Accesible por diseño
Este blog cumple WCAG 2.1 Nivel AA verificado con axe-core en 8 páginas. Cero violaciones.
Quién se beneficia
accesibilidad real para personas reales
Lectores de pantalla
Semántica HTML correcta, ARIA roles y labels, foco gestionado tras cada navegación. Compatible con VoiceOver y NVDA.
Solo teclado
Toda la interfaz es operable con Tab, Shift+Tab, Enter y Espacio. Skip link disponible. Focus siempre visible.
Baja visión
Contraste mínimo 4.5:1 en todo el texto. Objetivos táctiles de 44×44px. Sin información transmitida solo por color.
Daltonismo
Estados e información no dependen únicamente del color — siempre acompañados de texto, iconos o patrón.
Qué garantiza AA
los cuatro principios WCAG
Perceptible
Contraste 4.5:1, alt text descriptivo, estructura HTML semántica.
Operable
Navegación completa por teclado, focus visible, áreas táctiles 44×44px.
Comprensible
Idioma declarado, formularios con errores claros, navegación consistente entre páginas.
Robusto
HTML semántico, ARIA correcto, verificado con axe-core + Playwright.
Lo que implementamos
12 requisitos técnicos
- Skip to content visible al recibir foco
- Focus visible: 3px ring, 3px offset, ≥3:1 contraste
- Scroll padding top para nav fijo (WCAG 2.4.12)
- prefers-reduced-motion respetado (MotionToggle)
- Stretched links — un único enlace por tarjeta
- HTML semántico: nav, main, header, footer, article
- ARIA: labels, roles, aria-current, aria-expanded
- Alt text descriptivo en todas las imágenes
- Formularios: labels, errores, honeypot accesible
- Idioma declarado: lang attribute + hreflang ES/EN
- Contraste verificado: 4.5:1 texto normal, 3:1 UI
- Dialog con aria-label programático
Contraste verificado
combinaciones de color reales del sitio
| Modo claro | Modo oscuro | |
|---|---|---|
| Texto cuerpo | Aa 18.1:1 Supera AA | Aa 15.8:1 Supera AA |
| Accent / links | Aa 5.3:1 Supera AA | Aa 7.2:1 Supera AA |
| Texto secundario | Aa 4.7:1 Supera AA | Aa 5.9:1 Supera AA |
Páginas verificadas
8 rutas · 0 violaciones cada una
-
/
Inicio
-
/blog
Blog
-
/work
Trabajo
-
/cv
CV
-
/en
Inicio
-
/en/blog
Blog
-
/en/work
Trabajo
-
/en/cv
CV
Cómo lo verificamos
axe-core + playwright
Verificación automatizada con axe-core v4 ejecutado vía Playwright sobre build de producción local.
$ npm run test:a11y:axe