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: