Media y Animaciones
El principio fundamental: el usuario debe tener control sobre cualquier contenido que se mueve, parpadea o se actualiza automáticamente.
Carruseles y Banners
Considere si realmente necesita un carrusel. Los estudios muestran que la mayoría de usuarios solo ven la primera diapositiva.
HTML — Carrusel accesible
<div role="region"
aria-label="Promociones destacadas"
aria-roledescription="carrusel">
<button aria-label="Pausar carrusel">⏸</button>
<button aria-label="Diapositiva anterior">←</button>
<button aria-label="Siguiente diapositiva">→</button>
<div aria-live="polite" aria-atomic="true">
<div role="group" aria-label="Diapositiva 1 de 3">
<img src="promo.jpg" alt="Descuento 50% en laptops">
</div>
</div>
</div>Video y Audio
- Subtítulos sincronizados para todo el contenido hablado.
- Transcripción completa disponible.
- Sin autoplay con sonido — nunca.
HTML — Video accesible
<!-- ✓ Recomendado -->
<video controls width="800">
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="subs.vtt"
srclang="es" label="Español" default>
<track kind="descriptions" src="desc.vtt"
srclang="es" label="Audiodescripción">
</video>
<!-- ✗ Nunca -->
<video autoplay>...</video>Animaciones y Movimiento
Crítico — Respetar preferencias del sistema
Usuarios con trastornos vestibulares configuran "movimiento reducido". El sitio DEBE respetarlo.
CSS + JS — prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {{
*, *::before, *::after {{
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}}
}}
// JavaScript
const reduced = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
if (reduced) {{ carousel.pause(); }}Destellos y Epilepsia Fotosensible
Nunca crear contenido que:
- Destelle más de 3 veces por segundo
- Contenga patrones de rayas parpadeantes
- Haga transiciones rápidas entre colores de alto contraste
Use PEAT (Photosensitive Epilepsy Analysis Tool) para verificar el contenido multimedia.