ISTEC-FOR340 · ISTEC-FOR340 · Jul 6, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -0,0 +1,5 @@
+## 2025-07-06 - Semantic Navigation and Keyboard Focus
+
+**Learning:** Replacing JavaScript-driven navigation (`div` with `onclick`) with semantic `<a>` tags not only improves screen reader compatibility but also enables native browser behaviors like opening in new tabs. Pairing this with `:focus-visible` styles that mirror hover effects ensures a consistent and accessible experience for keyboard users.
+
+**Action:** Always prefer semantic `<a>` tags for navigation containers. When converting containers to links, ensure nested interactive elements are changed to non-interactive spans to avoid invalid nested links, and apply `:focus-visible` to the container.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,27 +18,27 @@ <h1>Interactive Sketches</h1>
 
 <main class="container">
 
-    <div class="card" id="btn-p1">
+    <a href="proyecto1/proyecto1.html" class="card" id="btn-p1">
         <h2>Circle Matrix (Image → Particles)</h2>
         <p>
             Transform an image into a dynamic field of circles.  
             Each pixel becomes an interactive element that reacts to movement.  
             <br><br>
             <strong>Concept:</strong> Image as a system of autonomous particles.
         </p>
-        <button class="btn">Open Sketch</button>
-    </div>
+        <span class="btn">Open Sketch</span>
+    </a>
 
-    <div class="card" id="btn-p2">
+    <a href="proyecto2/proyecto2.html" class="card" id="btn-p2">
         <h2>The Weight of Words (Voice → Physics)</h2>
         <p>
             Spoken words are converted into letters that move and fall under gravity.  
             Language becomes physical and temporary.  
             <br><br>
             <strong>Concept:</strong> Speech transformed into matter.
         </p>
-        <button class="btn">Open Sketch</button>
-    </div>
+        <span class="btn">Open Sketch</span>
+    </a>
 
 </main>
 

diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html
@@ -29,9 +29,9 @@ <h1>Circle Matrix</h1>
   </div>
 </div>
 
-<button onclick="window.location.href='../index.html'" class="back-btn">
+<a href="../index.html" class="back-btn">
   ⬅ Back
-</button>
+</a>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
 <script src="sketch.js"></script>

diff --git a/proyecto1/style.css b/proyecto1/style.css
@@ -108,14 +108,21 @@ input[type="file"] {
   -webkit-backdrop-filter: blur(16px);
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   z-index: 100;
+  text-decoration: none;
+  outline: none;
 }
 
-.back-btn:hover {
+.back-btn:hover,
+.back-btn:focus-visible {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
   border-color: var(--accent-color);
 }
 
+.back-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent-color);
+}
+
 /* MOBILE */
 @media (max-width: 600px) {
   .ui-panel {

diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html
@@ -15,9 +15,9 @@
 <body>
 
 <!-- BACK -->
-<button onclick="window.location.href='../index.html'" class="back-btn">
+<a href="../index.html" class="back-btn">
   ⬅ Back
-</button>
+</a>
 
 <!-- UI PANEL -->
 <div id="gui">

diff --git a/proyecto2/style.css b/proyecto2/style.css
@@ -143,14 +143,21 @@ input[type="range"]::-webkit-slider-thumb {
   -webkit-backdrop-filter: blur(16px);
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   z-index: 1000;
+  text-decoration: none;
+  outline: none;
 }
 
-.back-btn:hover {
+.back-btn:hover,
+.back-btn:focus-visible {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
   border-color: var(--accent-color);
 }
 
+.back-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent-color);
+}
+
 /* MOBILE */
 @media (max-width: 600px) {
   #gui {

diff --git a/script.js b/script.js
@@ -1,16 +1,4 @@
-window.onload = function () {
-    const routes = {
-        "btn-p1": "proyecto1/proyecto1.html",
-        "btn-p2": "proyecto2/proyecto2.html"
-    };
-
-    Object.keys(routes).forEach(id => {
-        const element = document.getElementById(id);
-
-        if (element) {
-            element.onclick = () => {
-                window.location.href = routes[id];
-            };
-        }
-    });
-};
+// Navigation is now handled by semantic <a> tags in index.html
+window.onload = function () {
+    console.log("Main page loaded.");
+};
diff --git a/style.css b/style.css
@@ -66,6 +66,8 @@ header p {
 
 /* CARD */
 .card {
+    text-decoration: none;
+    outline: none;
     background: var(--card-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
@@ -100,12 +102,17 @@ header p {
     z-index: 0;
 }
 
-.card:hover {
+.card:hover,
+.card:focus-visible {
     transform: translateY(-8px);
     border-color: rgba(56, 189, 248, 0.4);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 
+.card:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
 .card > * {
     position: relative;
     z-index: 1;
@@ -147,7 +154,8 @@ header p {
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.card:hover .btn {
+.card:hover .btn,
+.card:focus-within .btn {
     background: var(--accent-gradient);
     border-color: transparent;
     box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2);