Accesibilidad WCAG: webs para todas las personas

1. Contraste: lo que más falla

Texto normal ≥ 4.5:1, grande ≥ 3:1. Compruébalo con la herramienta de DevTools (inspeccionar → contraste). Los grises claros sobre blanco son el error nº1.

/* Foco visible SIEMPRE */
:focus-visible{outline:3px solid #0e7c66;outline-offset:2px}

2. Todo usable solo con teclado

Desconecta el mouse y navega con Tab / Shift+Tab / Enter / Esc. Si no puedes llegar al menú, al buscador o cerrar un modal, está roto. Este sitio pasa el test: prueba el menú y los filtros solo con teclado.

3. Imágenes y multimedia

• Informativa → alt que transmite el mensaje.
• Decorativa → alt="".
• Videos → subtítulos + transcripción.
• Nunca solo color para transmitir info (usa icono + texto).

4. Formularios sin trampas

<label for="n">Nombre</label>
<input id="n" aria-describedby="ayuda-n">
<p id="ayuda-n">Como aparece en tu DNI</p>

5. Test exprés de 5 minutos ✅

• Solo teclado hasta el final del artículo
• Zoom 200% sin scroll horizontal
• Contraste verificado
• Lector de pantalla (NVDA/VoiceOver) anuncia todo
• Sin animaciones que mareen (respeta prefers-reduced-motion)

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}