Vídeo y audio accesibles

Cómo publicar contenido multimedia con subtítulos, transcripción y controles usables para más personas.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Decisiones clave para que vídeo y audio funcionen en escenarios reales.

Subtítulos sincronizados

Incluyen diálogo y sonidos relevantes cuando aportan comprensión.

Transcripción completa

Permite acceder al contenido sin reproducir audio o vídeo.

Controles accesibles

Play, pausa, volumen y progreso deben ser operables por teclado.

Autoplay con cuidado

Evita reproducción automática con sonido; interfiere y desorienta.

Idioma bien definido

Marca idioma correcto en pistas de subtítulos y contenido.

Error común

Subtítulos incrustados en vídeo sin posibilidad de activarlos o desactivarlos.

Aplicación en proyectos reales

Checklist para subir multimedia sin crear deuda de accesibilidad.

Antes de publicar, verifica que el recurso tiene subtítulos editables y transcripción descargable o visible.

En landing y formación, prioriza piezas con instrucciones o información contractual.

Prueba siempre controles con teclado en desktop y lector de pantalla en móvil cuando aplique.

Añade pistas `track` con `kind="captions"` cuando sea vídeo.
Publica transcripción cerca del reproductor, no escondida en otra página.
Evita interfaces de player que oculten controles al navegar con tab.
Documenta política de publicación accesible para contenidos editoriales.

Patrón de código

Ejemplo base de vídeo con subtítulos y enlace a transcripción.

Vídeo con alternativas de acceso

<video controls>
  <source src="leccion.mp4" type="video/mp4" />
  <track kind="captions" src="leccion-es.vtt" srclang="es" label="Español" default />
</video>
<p><a href="/transcripciones/leccion-es.html">Leer transcripción completa</a></p>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Comprueba una pieza multimedia con subtítulos y feedback de estado.

⌄

🏁 Retos

Reto Reto práctico Añade subtítulos y pista de idioma a un vídeo incompleto.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 09

Contraste y legibilidad en interfaces

Lección 11

Tablas accesibles con scope y caption

›