feat(a11y): improve accessibility across the app

- Add screen-reader <h1> for the selected algorithm view (only the
  welcome screen had a heading before)
- Localize the main region aria-label via new visualizationLabel key
- Fix 404 page lang attribute by passing locale to Layout
- Respect prefers-reduced-motion to pause the auto-cycling showcase
- Mark decorative kbd SVGs as aria-hidden in the welcome screen
- Enrich complexity chart aria-labels with the actual Big-O values

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: midudev

src/components/AlgoViz.tsx

@@ -5,6 +5,7 @@ import {
   getAlgorithmDescription,
   getAlgorithmMetaTitle,
   getAlgorithmMetaDescription,
+  getCategoryName,
   defaultLocale,
   locales,
 } from '@i18n/translations'
@@ -342,8 +343,15 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
         <main
           id="main-content"
           className="flex-1 flex flex-col overflow-hidden min-w-0"
-          aria-label="Algorithm visualization"
+          aria-label={t.visualizationLabel}
         >
+          {/* Screen-reader page heading — reflects the current algorithm.
+              The WelcomeScreen renders its own visible <h1> when nothing is selected. */}
+          {selectedAlgorithm && (
+            <h1 className="sr-only">
+              {selectedAlgorithm.name} — {getCategoryName(locale, selectedAlgorithm.category)}
+            </h1>
+          )}
           <div className="flex-1 flex flex-col p-4 md:p-8 overflow-auto">
             {renderVisualization()}
           </div>

src/components/AlgorithmShowcase.tsx

@@ -61,6 +61,17 @@ export default function AlgorithmShowcase({
   const pausingRef = useRef(false)
   const timersRef = useRef<ReturnType<typeof setTimeout>[]>([])
 
+  // Respect the user's reduced-motion preference: pause the auto-cycling demo
+  // (WCAG 2.2.2 — give users control over moving / auto-updating content).
+  const [reducedMotion, setReducedMotion] = useState(false)
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
+    setReducedMotion(mq.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
   const current = items[algoIdx]
 
   const clearTimers = useCallback(() => {
@@ -69,6 +80,7 @@ export default function AlgorithmShowcase({
   }, [])
 
   useEffect(() => {
+    if (reducedMotion) return
     pausingRef.current = false
 
     const interval = setInterval(() => {
@@ -97,7 +109,7 @@ export default function AlgorithmShowcase({
       clearInterval(interval)
       clearTimers()
     }
-  }, [algoIdx, current.steps.length, items.length, clearTimers])
+  }, [algoIdx, current.steps.length, items.length, clearTimers, reducedMotion])
 
   const goToAlgo = useCallback(
     (idx: number) => {

src/components/ComplexityChart.tsx

@@ -192,6 +192,11 @@ export default function ComplexityChart({ description, locale = 'en' }: { descri
   }
   const resolvedLabels = resolveOverlaps(labels, 11)
 
+  const chartTitle = locale === 'es' ? 'Complejidad temporal' : 'Time complexity'
+  const chartLabel = `${chartTitle}: ${entries
+    .map((e) => (e.label ? `${e.label} ${e.raw}` : e.raw))
+    .join(', ')}`
+
   return (
     <div className="mt-5 mb-3">
       <div className="text-[10px] text-neutral-500 uppercase tracking-wider font-semibold mb-2">
@@ -203,7 +208,7 @@ export default function ComplexityChart({ description, locale = 'en' }: { descri
         className="w-full"
         style={{ maxHeight: 150 }}
         role="img"
-        aria-label="Time complexity growth chart"
+        aria-label={chartLabel}
       >
         {/* Gradient definitions for area fills */}
         <defs>

src/components/ConceptVisualizer.tsx

@@ -111,7 +111,11 @@ function BigOChart({ state }: { state: BigOState }) {
         className="w-full max-w-2xl"
         style={{ maxHeight: '340px' }}
         role="img"
-        aria-label="Big O complexity chart"
+        aria-label={`Big O complexity chart${
+          visibleCurves.length > 0
+            ? `: ${visibleCurves.map((c) => c.name).join(', ')}`
+            : ''
+        }`}
       >
         {/* Background */}
         <rect x={PAD.left} y={PAD.top} width={chartW} height={chartH} fill="rgba(255,255,255,0.02)" rx="4" />

src/components/WelcomeScreen.tsx

@@ -53,6 +53,7 @@ export default function WelcomeScreen({ t, locale, onSelectAlgorithm }: WelcomeS
               strokeWidth={1}
               strokeLinecap="round"
               strokeLinejoin="round"
+              aria-hidden="true"
             >
               <path d="M4 10v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1 -1v-3" />
             </svg>
@@ -68,6 +69,7 @@ export default function WelcomeScreen({ t, locale, onSelectAlgorithm }: WelcomeS
                 strokeLinejoin="round"
                 viewBox="0 0 16 16"
                 style={{ color: 'currentcolor' }}
+                aria-hidden="true"
               >
                 <path
                   fillRule="evenodd"
@@ -84,6 +86,7 @@ export default function WelcomeScreen({ t, locale, onSelectAlgorithm }: WelcomeS
                 strokeLinejoin="round"
                 viewBox="0 0 16 16"
                 style={{ color: 'currentcolor' }}
+                aria-hidden="true"
               >
                 <path
                   fillRule="evenodd"

src/i18n/translations.ts

@@ -53,6 +53,7 @@ export interface Translations {
   // Mobile / aria labels
   sidebarAriaLabel: string
   codePanelAriaLabel: string
+  visualizationLabel: string
   mobileMenuTitle: string
   openMenu: string
   closeMenu: string
@@ -119,6 +120,7 @@ export const translations: Record<Locale, Translations> = {
 
     sidebarAriaLabel: 'Algorithm categories',
     codePanelAriaLabel: 'Code and details panel',
+    visualizationLabel: 'Algorithm visualization',
     mobileMenuTitle: 'Algorithms',
     openMenu: 'Open menu',
     closeMenu: 'Close menu',
@@ -1091,6 +1093,7 @@ Named after the Greek mathematician Eratosthenes of Cyrene (~276–194 BCE), thi
 
     sidebarAriaLabel: 'Categorías de algoritmos',
     codePanelAriaLabel: 'Panel de código y detalles',
+    visualizationLabel: 'Visualización del algoritmo',
     mobileMenuTitle: 'Algoritmos',
     openMenu: 'Abrir menú',
     closeMenu: 'Cerrar menú',

src/pages/404.astro

@@ -3,12 +3,13 @@ import Layout from '@layouts/Layout.astro'
 import { translations, defaultLocale, type Locale, locales } from '@i18n/translations'
 
 const pathName = Astro.url.pathname
-const locale = pathName.split('/')[1] as Locale
-const t = locales.includes(locale) ? translations[locale] : translations[defaultLocale]
-const pathnameToRedirect = locales.includes(locale) && locale !== defaultLocale ? `/${locale}` : `/`
+const maybeLocale = pathName.split('/')[1] as Locale
+const locale = locales.includes(maybeLocale) ? maybeLocale : defaultLocale
+const t = translations[locale]
+const pathnameToRedirect = locale === defaultLocale ? `/` : `/${locale}`
 ---
 
-<Layout title="404 — Page not found">
+<Layout locale={locale} title={t.notFoundTitle}>
   <div class="h-screen flex flex-col items-center justify-center gap-6 bg-black text-white px-4">
     <div
       class="w-12 h-12 rounded-xl bg-white/4 flex items-center justify-center border border-white/8"