From 42519a1e471be8c333a6893adc02cbfd8b4b4aec Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 14 Jun 2026 06:51:23 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20keyboard=20?= =?UTF-8?q?accessibility=20and=20semantic=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change enhances the project's accessibility and UX by: - Adding a 'Skip to main content' link. - Converting non-semantic project cards and 'Back' buttons into semantic tags. - Removing redundant JavaScript-based navigation. - Adding focus-visible styles for all interactive elements to ensure clear keyboard navigation indicators. Co-authored-by: ISTEC-FOR340 <269002038+ISTEC-FOR340@users.noreply.github.com> --- index.html | 88 ++++++++++++++++++++-------------------- proyecto1/proyecto1.html | 70 ++++++++++++++++---------------- proyecto1/style.css | 12 +++++- proyecto2/proyecto2.html | 4 +- proyecto2/style.css | 12 +++++- script.js | 17 +------- style.css | 33 ++++++++++++++- 7 files changed, 136 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index 5cf0f32..3fef6d2 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,49 @@ - - - - + + + + - Interactive Sketches – ISTEC + Interactive Sketches – ISTEC - - - - -
-

Interactive Sketches

-

Examples of creative coding with p5.js – ISTEC

-
- -
- -
-

Circle Matrix (Image → Particles)

-

- Transform an image into a dynamic field of circles. - Each pixel becomes an interactive element that reacts to movement. -

- Concept: Image as a system of autonomous particles. -

- -
- -
-

The Weight of Words (Voice → Physics)

-

- Spoken words are converted into letters that move and fall under gravity. - Language becomes physical and temporary. -

- Concept: Speech transformed into matter. -

- -
- -
- - - - + + + + + + +
+

Interactive Sketches

+

Examples of creative coding with p5.js – ISTEC

+
+ +
+ + +

Circle Matrix (Image → Particles)

+

+ Transform an image into a dynamic field of circles. + Each pixel becomes an interactive element that reacts to movement. +

+ Concept: Image as a system of autonomous particles. +

+ Open Sketch + + + +

The Weight of Words (Voice → Physics)

+

+ Spoken words are converted into letters that move and fall under gravity. + Language becomes physical and temporary. +

+ Concept: Speech transformed into matter. +

+ Open Sketch + + +
+ + + + diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html index c22da09..dcea080 100644 --- a/proyecto1/proyecto1.html +++ b/proyecto1/proyecto1.html @@ -1,40 +1,40 @@ - - - - + + + + - Circle Matrix Image + Circle Matrix Image - - - - - -
-

Circle Matrix

-

- Transform an image into a dynamic field of particles. - The image dissolves into circles that react to your presence. -

- -
- - - - - - -
-
- - - - - - - + + + + + +
+

Circle Matrix

+

+ Transform an image into a dynamic field of particles. + The image dissolves into circles that react to your presence. +

+ +
+ + + + + + +
+
+ + + ⬅ Back + + + + + + \ No newline at end of file diff --git a/proyecto1/style.css b/proyecto1/style.css index b562aca..3b9a12c 100644 --- a/proyecto1/style.css +++ b/proyecto1/style.css @@ -108,12 +108,22 @@ 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; + display: flex; + align-items: center; + justify-content: center; } -.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); + outline: none; +} + +.back-btn:focus-visible { + box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--accent-color); } /* MOBILE */ diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html index e984f76..31d1479 100644 --- a/proyecto2/proyecto2.html +++ b/proyecto2/proyecto2.html @@ -15,9 +15,9 @@ - +
diff --git a/proyecto2/style.css b/proyecto2/style.css index fd6dfbb..6e253d6 100644 --- a/proyecto2/style.css +++ b/proyecto2/style.css @@ -143,12 +143,22 @@ 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; + display: flex; + align-items: center; + justify-content: center; } -.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); + outline: none; +} + +.back-btn:focus-visible { + box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--accent-color); } /* MOBILE */ diff --git a/script.js b/script.js index 56bdf15..b4881da 100644 --- a/script.js +++ b/script.js @@ -1,16 +1 @@ -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]; - }; - } - }); -}; +// Redundant navigation logic removed as cards are now semantic tags. diff --git a/style.css b/style.css index f563ad8..d67ea4a 100644 --- a/style.css +++ b/style.css @@ -13,6 +13,24 @@ padding: 0; } +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--accent-gradient); + color: white; + padding: 8px; + z-index: 1000; + transition: top 0.3s; + text-decoration: none; + font-weight: 600; + border-radius: 0 0 8px 0; +} + +.skip-link:focus { + top: 0; +} + body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-color); @@ -100,10 +118,16 @@ 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); + outline: none; +} + +.card:focus-visible { + box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--accent-color); } .card > * { @@ -147,12 +171,17 @@ header p { border: 1px solid rgba(255, 255, 255, 0.1); } -.card:hover .btn { +.card:hover .btn, +.card:focus-visible .btn { background: var(--accent-gradient); border-color: transparent; box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2); } +.card { + text-decoration: none; +} + /* ANIMATIONS */ @keyframes fadeInDown { from {