PDF de programación - Accesibilidad en los contenidos audiovisuales en la Web a través de HTML5

Departamento de Informática



PROYECTO FIN DE CARRERA



Accesibilidad a los contenidos
audiovisuales en la Web a través

de HTML5



Autor:


Tutor:



Alberto Sánchez-Heredero Pérez

Lourdes Moreno López

Leganés, Julio de 2011






ii




Título: Accesibilidad a los contenidos audiovisuales en la Web a través de HTML5
Autor: Alberto Sánchez-Heredero Pérez
Director: Lourdes Moreno López



EL TRIBUNAL



Presidente:

Vocal:



Secretario:



Realizado el acto de defensa y lectura del Proyecto Fin de Carrera el día 1 de Julio de
2011 en Leganés, en la Escuela Politécnica Superior de la Universidad Carlos III de
Madrid, acuerda otorgarle la CALIFICACIÓN de



VOCAL



SECRETARIO



PRESIDENTE



iii





iv




Agradecimientos



A mis padres por el apoyo que me han dado durante todos estos años de carrera, sin
olvidarme por supuesto de mi hermano y mi novia que siempre han estado conmigo en los
momentos difíciles.

A Lourdes por todo el ánimo que me ha dado durante la realización de este proyecto de
fin de carrera, que a pesar de los retrasos e inconvenientes que hemos tenido, ha sido un placer
haber trabajado con ella.



v





vi




Resumen



Desde hace años asistimos a un continuo incremento de contenido audiovisual como
vídeo en la Web, por ello que sea muy importante tener en cuenta requisitos de accesibilidad al
incluirlo en la web para que todos los usuarios puedan acceder al contenido independientemente
de sus características de acceso y contextos diversos de uso. Un contenido vídeo en la web debe
ir acompañado de manera sincronizada de alternativas como subtitulado y audiodescripción
entre otros, pero además el agente de usuario (reproductor) a través del cual los usuarios
acceden debe ser también accesible. Como solución universal está el nuevo estándar HTML5
aun en desarrollo que proporciona algunas ventajas para la accesibilidad en lo que a contenido
audiovisual se refiere. En este proyecto se presenta un estudio de estándares a cumplir para
incluir contenido audiovisual en la Web, se valora si el nuevo estándar HTML5 da soporte y
como caso de estudio se ha desarrollado un reproductor accesible en HTML5.



Palabras clave: Accesibilidad web, multimedia, vídeo, discapacidad, diversidad
funcional, diseño web, desarrollo web, agente de usuario web, reproductor,
estándares.



vii





viii




Abstract



In recent years, we have seen a continuous increase of audiovisual content like video on
the Web. It is very important to consider accessibility requirements when the video is included
in the web page enabling users to have access to the content, regardless of users access features
and diverse contexts of use. Video content on the Web must be accompanied by synchronized
alternatives such as caption and audio description, furthermore the user agent (player) must be
accessible too. A universal solution is the new standard HTML5, although it is still under
development. It provides some advantages for accessibility as far as audiovisual content is
concerned. In this project, a study is presented, which includes standards and requirements that
need to be fulfilled when there is audiovisual content on the Web. A case study with a web
accessible player has been developed in order to assess if the new HTML5 standard really offers
accessibility requirements support.


Keywords: Web accessibility, multimedia, video, disability, Web design, Web

developed, User agent, player, standards.



ix




Índice general

1.

Introducción y objetivos ............................................................................................ 1

1.1.

Introducción ...................................................................................................... 1

1.2.

Introducción y motivación ................................................................................ 2

1.3. Objetivos ........................................................................................................... 2

1.4. Estructura de la memoria ................................................................................... 3

2.

Introducción a HTML5 ............................................................................................. 5

2.1. HyperText Markup Language 5 (HTML5) ....................................................... 6

2.2. Estándares de la Web. HTML4.X vs HTML5 .................................................. 6

2.3. Algunas características que aporta HTML5 ...................................................... 8

2.4. Nivel de implementación en los navegadores de HTML5 ................................ 9

2.5. Especificación borrador HTML5.0 ................................................................. 12

2.6. HTML5 y elementos relacionados con el contenido multimedia .................... 21

3. Accesibilidad Web .................................................................................................. 31

3.1. Legislación y normativa relativa a la accesibilidad ......................................... 31

3.2.

Iniciativa de Accesibilidad Web (WAI) .......................................................... 33

3.3. Accesibilidad al contenido multimedia en la Web .......................................... 43

4. Accesibilidad en elementos relativos al contenido multimedia en HTML5 ........... 55

4.1. Elemento <video> ........................................................................................... 55

4.2. Elementos semánticos ..................................................................................... 56

4.3. Elemento Track ............................................................................................... 60

5. Diseño y desarrollo de interfaz basado en HTML5 ................................................. 61

5.1. Requisitos de accesibilidad de un contenido multimedia en la Web ............... 62

5.2. Diseño de Interfaz que reproduzca contenido multimedia accesible .............. 62

5.3.

Implementación en HTML5 de la Interfaz. ..................................................... 64

5.4. Evaluación. Pruebas de acceso en distintos agentes de usuario .................... 113

6. Presupuesto............................................................................................................ 121

7. Conclusiones y líneas futuras ................................................................................ 123

Glosario ........................................................................................................................ 127

Referencias ................................................................................................................... 129

Anexo ........................................................................................................................... 133







Índice de figuras

Figura 1: Doctype HTML4.01 .................................................................................................... 12
Figura 2: Doctype HTML5 ......................................................................................................... 12
Figura 3: Elemento raíz HTML4.01 ............................................................................................ 13
Figura 4: Elemento raíz HTML5 ................................................................................................. 13
Figura 5: Esquema de etiquetas HTML5 .................................................................................... 14
Figura 6: Video en HTML4 ........................................................................................................ 23
Figura 7: Video avanzado en HTML5 ........................................................................................ 23
Figura 8: Video simplificado en HTML5 ................................................................................... 23
Figura 9: Video múltiples formatos HTML5 .............................................................................. 24
Figura 10: Audio en HTML4.01 ................................................................................................. 25
Figura 11: Audio en HTML5 ...................................................................................................... 25
Figura 12: Múltiples formatos de audio en HTML5 ................................................................... 26
Figura 13: Elemento Canvas ....................................................................................................... 27
Figura 14: Código JavaScript para Canvas ................................................................................. 27
Figura 15: Segundo código JavaScript para Canvas ................................................................... 27
Figura 16: Ejemplo Canvas ......................................................................................................... 27
Figura 17: Resultado del ejemplo Canvas ................................................................................... 27
Figura 18: Ejemplo del elemento track de HTML5 .................................................................... 28
Figura 19: Código para incluir en la cebecera el reproductor LeanBack Player HTML5 ........... 29
Figura 20: Código del reproductor LeanBack Player HTML5 ................................................... 30
Figura 21: Boceto de la interfaz en HTML5 ..........................................................................