HTML5+ARIA: experiencia de accesibilidad multimedia personalizable

Madrid, 18 de diciembre de 2013

Día del W3C en España 2013

Emmanuelle Gutiérrez y Restrepo, <emmanuelle@sidar.org>

Sergio Salmerón <ssalmeron@bec.uned.es>
Pulse la barra espaciadora para ir a la siguiente transparencia

Presentación

Sergio Salmerón

Licenciado en Ingeniería Informática por la Universidad Complutense de Madrid.
Estudiante de Master de Inteligencia Artificial Avanzada por la UNED.
Miembro del grupo de investigación aDeNu, investigando en el ámbito de la minería de datos aplicada a:
- MAMIPEC: El estudio de interacciones humano-computador y el procesado de señales fisiológicas parala detección de estados afectivos en entornos educativos.
- RedVides: El procesado de información agronómica para la prevención de enfermedades.

Emmanuelle Gutiérrez y Restrepo

Experto Invitado del W3C-WAI para participar en los grupos de trabajo:
- EOWG, Eval TF, ERT WG, y
- «Cognitive and Learning Disabilities Accessibility Task Force»
Coordinadora del CTN 139/SC 8/GT 3 y Miembro del CTN 133/GT 3 de AENOR.
Investigadora del Grupo aDeNu, del Depto. de Inteligencia Artificial de la UNED.
Patrono y Directora General de la Fundación Sidar - Acceso Universal

Accesibilidad de los multimedia

Lo que piden las WCAG 2.0 para cumplir el nivel Triple A:

En cuanto al contenido

Texto alternativo para todo elemento no textual
Subtítulos para sordos
Audiodescripción
Medio alternativo (transcripción completa)
Traducción a lengua de señas

En cuanto al reproductor

Manejable mediante el teclado.
Que no atrape el foco.

Lo que NO piden, pero sería deseable:

Que la interpretación en lengua de señas no moleste a quien no la necesita y sea ampliable y re-posicionable para los que sí.
Que la transcripción resulte realmente útil para personas con deficiencias cognitivas.
Que los equivalentes alternativos sean accesibles para todos los usuarios y no sólo para quienes por cualquier razón no pueden ejecutar el reproductor.

Vista de página que usa el reproductor, con el vídeo en LSE sobrepuesto

Vista de página que usa el reproductor con el vídeo en LSE ampliado

Vista de página que usa el reproductor con el espacio de vídeo principal ampliado y el de lengua de señas en segundo plano.

Qué hemos hecho

Aprovechamos el trabajo de Terril Thomson y añadimos funcionalidades para la personalización.

HTML5 + JQuery

Reproductor nativo para los dos vídeos (con "fallback" en jwplayer)
Controles suficientemente grandes mediante CSS
Uso del elemento track para subtítulos y transcripción (con "fallback" mediante jquery pues aún no lo soportan todos los navegadores).
Reproductores re-posicionables y ajustables en tamaño.
Transcripción desplegable, resaltable y sincronizada con los vídeos.
Alternativas de descarga en varios formatos visible para todos.

Vista del vídeo en LSE y el control por teclado

ARIA

Identificación de secciones y estado de controles
Identificación de la posición del vídeo en lengua de señas (sobrepuesto o libre)

Metadatos para la adaptación a preferencias de accesibilidad

a11y Metadata-Project / Schema.org

<div id="Sob" class="empty" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">

		<meta itemprop="accessMode" content="visual" /> 

		<meta itemprop="accessMode" content="auditory" /> 

		<meta itemprop="hasAdaptation" content="#trans" /> 


		<video class="ump-media" preload="auto" width="480" height="360" 

		poster="videos/victor01.jpg" mediagroup="a11y">

Ajustes pendientes

¡Limpieza general! (De FrankensPlayer a ...)
Ajustar presentación "responsive".

Colocación inicial exacta del vídeo en lengua de señas sobre el otro vídeo.
Posicionamiento "inteligente" de los elementos cuando el usuario recoloca o reajusta el tamaño de uno de ellos.

Muestra colocación inexacta del vídeo en LSE sobre el otro

muestra sobreposición del texto sobre el vídeo

Trabajo futuro

Pluguin para TinyMCE

¡Serán bienvenidas colaboraciones!

Accessibility is right not a privilege!

William (Bill) Loughborough - In Memoriam Foto de William Loughborough mostrando el tetraedro diseñado por él para recordar las pautas de accesibilidad y vista del modelo para construirlo.

Foto de William Loughborough mostrando el tetraedro diseñado por él para recordar las pautas de accesibilidad y vista del modelo para construirlo.

¡Gracias por vuestra atención!

Emmanuelle Gutiérrez y Restrepo
emmanuelle@sidar.org

Sergio Salmerón
ssalmeron@bec.uned.es

Esta presentación se encuentra en:
http://sidar.org/ponencias/2013/madrid/w3c/