Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=73f627c1-7212-449e-a959-f24d9e938970

Audio y video accesibles en HTML5

Insertar audio accesible en HTML5

No hace mucho veíamos en este mismo blog cómo introducir audio en HTML5, pero nos quedaba pendiente el detalle de la accesibilidad. El caso es que, ya que te has puesto a fondo con el tema y provees de varios formatos de audio para dar soporte a navegadores antiguos, por qué no aportar también una transcripción de tu podcast o de tu canción, ya que esto puede ser muy útil para personas con discapacidades auditivas.

Pero ¡ojo!, es importante señalar que esto no tiene por qué beneficiar sólo a personas sordas, sino que la experiencia de usuario mejora para todos. En primer lugar, esto beneficia al spider de Google, ¿quieres que tus contenidos le gusten a Google?, pues piensa en la accesibilidad. El spider de Google es un usuario discapacitado VIP. Y en segundo lugar, imagínate que estás con tu smartphone en una zona de escasa cobertura y necesitas acceder al contenido de un podcast: tener acceso a la transcripción te permitirá ahorrar tiempo y datos de conexión y probablemente amarás eternamente al dueño de esa web que se ha acordado de meter una transcripción.

Cómo poner la transcripción del audio

Bien, veo que eres razonable y que has decidido poner una transcripción (me caes bien :-D). Si vas a aportar una transcripción ten en cuenta esto: ponla SIEMPRE fuera de la etiqueta audio. En este caso ya no estamos hablando de retrocompatibilidad sino de accesibilidad. Si una persona sorda accede con un navegador que soporte la etiqueta audio y sus formatos, no va a ver la transcripción, que según la especificación sólo se mostrará a navegadores que no la soporten.

Así iría mal ubicado, y, por tanto, la transcripción no se vería:

<audio controls>
    <source src="mi-archivo-de-audio.ogg" type="audio/ogg">
    <source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
    <source src="mi-archivo-de-audio.wav" type="audio/wav">
        <object type="application/x-shockwave-flash" data="player.swf?miArchivo=mi-archivo-de-audio.mp3">
            <param name="movie" value="player.swf?miArchivo=mi-archivo-de-audio.mp3">
            <a href="mi-archivo-de-audio.mp3">Descárgate aquí mi archivo de audio</a>
            <p>Transcripción de mi archivo de audio.</p>
        </object>
</audio>

Esta sería la ubicación correcta:

<audio controls>
    <source src="mi-archivo-de-audio.ogg" type="audio/ogg">
    <source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
    <source src="mi-archivo-de-audio.wav" type="audio/wav">
        <object type="application/x-shockwave-flash" data="player.swf?miArchivo=mi-archivo-de-audio.mp3">
            <param name="movie" value="player.swf?miArchivo=mi-archivo-de-audio.mp3">
            <a href="mi-archivo-de-audio.mp3">Descárgate aquí mi archivo de audio</a>            
        </object>
</audio>
<p>Transcripción de mi archivo de audio.</p>

Multimedia accesible

Si no estás muy puesto en temas de accesibilidad, te recomiendo que te vayas familiarizando con el tema porque vale la pena invertir un poquito más de esfuerzo en los desarrollos para garantizar un acceso universal. Además, con todas las novedades de HTML5 ahora que se permite JavaScript en la recomendación WCAG 2.0, más los avances en lo dispositivos de ayuda para discapacitados, la verdad es que apenas hay trabajo extra y, maldita sea, ¡estás contribuyendo a que el mundo un sitio un poco mejor para vivir! Aunque solo sea un poquitito así.

Algunas recomendaciones generales en la accesibilidad para elementos multimedia:

  • No seas troll y no reproduzcas nada automáticamente (esto ya lo vimos en el anterior post). Y asegúrate de proveer controles para manejar el video y el audio.
  • Asegúrate de que se puede acceder a los controles con el teclado. Por ejemplo, usando el tabulador, lo que no nos lleva al siguiente punto...
  • Mucho ojo con el tabulador. Asegúrate de no bloquear el foco en un elemento o y de que la navegación a través del tabulador sea razonablemente lógica.
  • Asegúrate de ofrecer contenido alternativo: transcripciones, subtítulos sincronizados y el archivo de audio o vídeo para descargar.
  • No está de más asegurarse que no hay música de fondo que se coma los diálogos o la información.
  • También es una buena práctica añadir descripciones sonoras en aquellos momentos que un vídeo lo requiera.
  • Evita destellos y parpadeos en tus vídeos. Y si no hay más remedio que usarlos, procura que no haya más de tres destellos por segundo y que el parpadeo no dure más de cinco segundos.

Y ya para ir terminando, puedes ver ejemplos de multimedia accesible en esta página.

Más información sobre accesibilidad

Si te ha picado el gusanillo de la accesibilidad puedes saber más sobre el tema en los siguientes enlaces:

Y te podría seguir poniendo recursos, validadores, extensiones... pero no quiero abrumarte, amigo desarrollador. Si te parece interesante el tema deja un comentario y busco hueco para hacer un post sobre accesibilidad con más información y recursos generales sobre accesibilidad.

Fecha de publicación:
Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestra newsletter...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.