🎨 Palette: Improve accessibility for text fragmentation animations

.Jules/palette.md

@@ -1,3 +1,3 @@
-## 2025-03-31 - [Keyboard Animation Consistency]
-**Learning:** Animations triggered only on `:hover` exclude keyboard users from the "delightful" parts of the UX. Using `:focus-visible` to trigger the same animations ensures a consistent experience across input methods.
-**Action:** Always pair `:hover` animation triggers with `:focus-visible` to maintain parity between mouse and keyboard interactions.
+## 2025-05-14 - [A11y for Text Fragmentation]
+**Learning:** Fragmenting text into spans for animation (e.g., character-by-character effects) breaks screen reader clarity by treating each character as a separate entity. Always use `aria-label` on the parent interactive element to preserve the full text and set `aria-hidden="true"` on the individual character spans. Additionally, hover animations must always have a `:focus-visible` counterpart for keyboard accessibility.
+**Action:** Automatically apply `aria-label` and `aria-hidden` when using character fragmentation scripts and ensure `:focus-visible` triggers are included in CSS.

css/style.css

@@ -93,7 +93,7 @@ body {
     }
   }
 
-  /* Apply the animation on hover and focus */
+  /* Apply the animation on hover */
   .logo a:hover span,
   .logo a:focus-visible span {
     animation: showlogoLetters 0.2s ease forwards; /* Play animation on hover and keep the final state */
@@ -135,7 +135,7 @@ body {
     }
   }
 
-  /* Apply the animation on hover and focus */
+  /* Apply the animation on hover */
   .item a:hover span,
   .item a:focus-visible span {
     animation: showLetters 0.2s ease forwards; /* Play animation on hover and keep the final state */
@@ -199,6 +199,12 @@ body {
   .center-text h1::after {
     filter: blur(10px);
   }
+
+  a:focus-visible {
+    outline: 2px solid #C3F2FF;
+    outline-offset: 4px;
+    border-radius: 2px;
+  }
 
   @keyframes rotate {
     0% {

six.html

@@ -144,7 +144,7 @@ <h1>Explore The Space</h1>
 
         function wrapCharacters(element) {
           const text = element.innerText;
-          element.setAttribute('aria-label', text);
+          element.setAttribute("aria-label", text);
           const characters = text.split("");
           const wrappedText = characters.map(char => `<span aria-hidden="true">${char}</span>`).join("");
           element.innerHTML = wrappedText;