TEMA 3: ACCESIBILIDAD A LOS SITIOS WEB Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Portada: TEMA 3: ACCESIBILIDAD A LOS SITIOS WEB Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Asignatura Humanidades “Evitando la barreras de accesibilidad en la Sociedad de la Información” OpenCourseWare de la Universidad Carlos III de Madrid Asignatura Humanidades: “Evitando la barreras de accesibilidad en la Sociedad de la Información” OpenCourseWare de la Universidad Carlos III de Madrid

Indice Accesibilidad web Beneficios de la accesibilidad web Principios de diseño Estándares de la Web. W3C Iniciativa de la accesibilidad Web. WAI WCAG 1.0 WCAG 2.0 Accesibilidad a los contenidos audiovisuales en la web Evaluación de la accesibilidad web Título: Indice Contenido: Accesibilidad web Beneficios de la accesibilidad web Principios de diseño Estándares de la Web. W3C Iniciativa de la accesibilidad Web. WAI WCAG 1.0 WCAG 2.0 Accesibilidad a los contenidos audiovisuales en la web Evaluación de la accesibilidad web Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Repasando accesibilidad web Una Web es accesible cuando cualquier usuario pueda acceder a la Web independiente de sus características de acceso, y contextos de uso. Nos encontramos que hay grupos de usuarios con barreras de accesibilidad y no pueden acceder a la Web, a estas personas se les priva del derecho de poder ejercer su ciudadanía. La otra cara del progreso: La tecnología debería ser una herramienta integradora de muchas personas en la sociedad, y no lo contrario. Grupos de usuarios afectados: Directamente: Personas con discapacidad Todos, Diversidad Funcional Crece!! Discapacidad por envejecimiento Título: Recordando la accesibilidad web: Contenido: Una Web es accesible cuando cualquier usuario pueda acceder a la Web independiente de sus características de acceso, y contextos de uso. Nos encontramos que hay grupos de usuarios con barreras de accesibilidad y no pueden acceder a la Web, a estas personas se les priva del derecho de poder ejercer su ciudadanía. La otra cara del progreso: La tecnología debería ser una herramienta integradora de muchas personas en la sociedad, y no lo contrario. Grupos de usuarios afectados: - Directamente: Personas con discapacidad - Todos, Diversidad Funcional - Crece!! Discapacidad por envejecimiento Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Accesibilidad Web Beneficios de ser accesible Mejora la indexación y localización del sitio por buscadores. Participación en la Web semántica Reducción del mantenimiento (consistencia) Escalabilidad, crecimiento: nuevas líneas de negocio Movilidad: móviles, PDA, TV El numero de clientes que te dejas es considerable Título:Accesibilidad Web. Beneficios de ser accesible: Contenido: - Mejora la indexación y localización del sitio por buscadores. Participación en la Web semántica - Reducción del mantenimiento (consistencia) - Escalabilidad, crecimiento: nuevas líneas de negocio - Movilidad: móviles, PDA, TV - El numero de clientes que te dejas es considerable Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Principios de Diseño Web Separación de contenido, presentación y estructura Título:Principios de Diseño Web Contenido: En la Web debe haber una separación de contenido (Texto, imagen, videos, multimedia, ..), presentación (elementos CSS) y estructura a traves de elementos de (X)HTML de marcado estructural (lista, tablas, encabezados, titulo, ..) Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

“Diseño para/con todos” Principios de Diseño Web “Accesible” Diseño Centrado en el Usuario. Diseño Inclusivo Contar con la participación del usuario en el proceso de diseño: Diseño y Evaluación Utilización de técnicas de usabilidad Diseño inclusivo: Todo tipo de usuarios => Tener en cuenta que hay usuarios con discapacidad Todo tipo de contextos de uso => Tener en cuenta la diversidad funcional “Diseño para/con todos” Título:Principios de Diseño Web “Accesible”. Diseño Centrado en el Usuario. Diseño Inclusivo Contenido: Contar con la participación del usuario en el proceso de diseño: Diseño y Evaluación Utilización de técnicas de usabilidad Diseño inclusivo: Todo tipo de usuarios => Tener en cuenta que hay usuarios con discapacidad Todo tipo de contextos de uso => Tener en cuenta la diversidad funcional “Diseño para/con todos” Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web El W3C desarrolla especificaciones técnicas y directrices a través de un proceso que ha sido diseñado para maximizar el consenso sobre el contenido de un informe técnico, de forma que se pueda asegurar la alta calidad técnica y editorial, así como obtener un mayor apoyo desde el W3C y desde la comunidad en general. HTML, (X)HTML, XML, CSS, SMIL, etc. Título: Estándares de la Web Contenido: El W3C desarrolla especificaciones técnicas y directrices a través de un proceso que ha sido diseñado para maximizar el consenso sobre el contenido de un informe técnico, de forma que se pueda asegurar la alta calidad técnica y editorial, así como obtener un mayor apoyo desde el W3C y desde la comunidad en general. HTML, (X)HTML, XML, CSS, SMIL, etc. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren ofrecer (presentación: estética, situación espacial, …). La presentación final es interpretada por un agente de usuario (como Internet Explorer, Chrome, Firefox, Safari, …) Los documentos HTML son ficheros de texto que se pueden crear con cualquier editor de texto. También hay disponibles editores HTML (wysiwyg)[what you see is what you get]) Título: Estándares de la Web. HTML (HyperText Markup Language) Contenido: Se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren ofrecer (presentación: estética, situación espacial, …). La presentación final es interpretada por un agente de usuario (como Internet Explorer, Chrome, Firefox, Safari, …) Los documentos HTML son ficheros de texto que se pueden crear con cualquier editor de texto. También hay disponibles editores HTML (wysiwyg)[what you see is what you get]) Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Un documento está formado por elementos: Títulos, párrafos, listas, tablas, ... Para delimitar los elementos se utilizan etiquetas <nombre-etiqueta> elemento </nombre-etiqueta> Ejemplo: <TITLE>Un título</TITLE> Estas etiquetas son distintas dependiendo de que elemento se trata y tienen diferentes atributos específicos para cada una de ellas Título:Estándares de la Web. HTML (HyperText Markup Language) Contenido Un documento está formado por elementos: Títulos, párrafos, listas, tablas, ... Para delimitar los elementos se utilizan etiquetas <nombre-etiqueta> elemento </nombre-etiqueta> Ejemplo: <TITLE>Un título</TITLE> Estas etiquetas son distintas dependiendo de que elemento se trata y tienen diferentes atributos específicos para cada una de ellas Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) <head> <TITLE>Mi primera página</TITLE> </head> <body> …….. </body> </html> Título:Estándares de la Web. HTML (HyperText Markup Language) Contenido <html> <head> <TITLE>Mi primera página</TITLE> </head> <body> …….. </body> </html> Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Algunos elementos: <H1>Encabezado </H1> <html> <head><TITLE>Titulo</TITLE></head> <body> <H1>Titular de primer nivel</H1> <H2>Titular de segundo nivel</H2> <H3>Titular de tercer nivel</H3> </body> </html Título:Estándares de la Web. HTML (HyperText Markup Language) Contenido Algunos elementos: <H1>Encabezado </H1> <html> <head><TITLE>Titulo</TITLE></head> <body> <H1>Titular de primer nivel</H1> <H2>Titular de segundo nivel</H2> <H3>Titular de tercer nivel</H3> </body> </html Titular de primer nivel Titular de segundo nivel Titular de tercer nivel Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Algunos elementos: <A HREF=“url_relativa_destino” title=“información_adicional_importante” target=“comportamiento” >texto del enlace</A> Ejemplo: <A HREF=http://www.cesya.es title=“ventana emergente a la página del cesya” target =“_blank”>Enlace al CESyA</A> Título: Estándares de la Web. HTML (HyperText Markup Language) Contenido Algunos elementos: <A HREF=“url_relativa_destino” title=“información_adicional_importante” target=“comportamiento” >texto del enlace</A> Ejemplo: <A HREF=http://www.cesya.es title=“ventana emergente a la página del cesya” target =“_blank”>Enlace al CESyA</A> Enlace al CESyA Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Algunos elementos: <img src=”Image.URI” alt=”texto breve” longDesc=”descripción larga” /> Ejemplo: <img src=”Lourdes.gif” alt=”Foto de Lourdes”/> Título: Estándares de la Web. HTML (HyperText Markup Language) Contenido Algunos elementos: <img src=”Image.URI” alt=”texto breve” longDesc=”descripción larga” /> Ejemplo: <img src=”Lourdes.gif” alt=”Foto de Lourdes”/> Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de la Web HTML (HyperText Markup Language) Más elementos... Material de soporte con referencias: Guía Breve de XHTML: http://www.w3c.es/divulgacion/guiasbreves/XHTML HTML 4.01: http://html.conclase.net/w3c/html401-es/cover.html Guía Breve de CSS: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo CSS1 : http://html.conclase.net/w3c/css1-es.html Guía de Referencia XHTML: http://www.w3c.es/divulgacion/guiasreferencia/xhtml1/ Título:Estándares de la Web. HTML (HyperText Markup Language) Contenido Más elementos: Guía Breve de XHTML: http://www.w3c.es/divulgacion/guiasbreves/XHTML HTML 4.01: http://html.conclase.net/w3c/html401-es/cover.html Guía Breve de CSS: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo CSS1 : http://html.conclase.net/w3c/css1-es.html Guía de Referencia XHTML: http://www.w3c.es/divulgacion/guiasreferencia/xhtml1/ Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Estándares de Accesibilidad Web WAI. Pautas para la accesibilidad ATAG : para herramientas de autor UAAG: para agentes de usuario web (navegadores, reproductores) WCAG : Para los contenidos web (WCAG 1.0|WCAG 2.0) The Accessible Rich Internet Applications (WAI-ARIA) Título: Estándares de Accesibilidad Web. WAI. Pautas para la accesibilidad Contenido ATAG : para herramientas de autor UAAG: para agentes de usuario web (navegadores, reproductores) WCAG : Para los contenidos web (WCAG 1.0|WCAG 2.0) The Accessible Rich Internet Applications (WAI-ARIA) Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

WCAG 1.0 Estructura (actualmente la versión de referencia siguiendo normativa y legislación en España) WCAG 1.0 utiliza 14 pautas. Cada pauta tiene varios checkpoints (puntos de revisión). Cada checkpoint tiene un nivel de prioridad: Prioridad 1: Puntos de revisión que tienen que satisfacer los desarrolladores de contenido para que no existan usuarios que no sean capaces de acceder a la información de un sitio Web - must. Prioridad 2: Puntos a satisfacer para evitar que la información sea difícilmente accesible - should. Prioridad 3: Puntos a satisfacer si se quiere evitar que determinados usuarios puedan encontrar dificultades al acceder a la información - may. Hay 65 puntos de revisión. Título: WCAG 1.0 . Estructura Contenido (actualmente la versión de referencia siguiendo normativa y legislación en España) WCAG 1.0 utiliza 14 pautas. Cada pauta tiene varios checkpoints (puntos de revisión). Cada checkpoint tiene un nivel de prioridad: Prioridad 1: Puntos de revisión que tienen que satisfacer los desarrolladores de contenido para que no existan usuarios que no sean capaces de acceder a la información de un sitio Web - must. Prioridad 2: Puntos a satisfacer para evitar que la información sea difícilmente accesible - should. Prioridad 3: Puntos a satisfacer si se quiere evitar que determinados usuarios puedan encontrar dificultades al acceder a la información - may. Hay 65 puntos de revisión Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

WCAG 1.0 Conformidad Niveles de conformidad: Certificaciones: Nivel de conformidad A (A): se satisfacen todos los puntos de revisión de prioridad 1. Nivel de conformidad Doble A (AA): se satisfacen todos los puntos de revisión de prioridad 1 y 2. Nivel de conformidad Triple A (AAA): se satisfacen todos los puntos de revisión de prioridad 1, 2 y 3. Certificaciones: Folleto Certificación Accesibilidad TIC http://www.aenor.es/documentos/certificacion/folletos/w_169_ACCESIBILIDAD_TIC.pdf Título: WCAG 1.0. Conformidad Contenido Niveles de conformidad: Nivel de conformidad A (A): se satisfacen todos los puntos de revisión de prioridad 1. Nivel de conformidad Doble A (AA): se satisfacen todos los puntos de revisión de prioridad 1 y 2. Nivel de conformidad Triple A (AAA): se satisfacen todos los puntos de revisión de prioridad 1, 2 y 3. Certificaciones Folleto Certificación Accesibilidad TIC http://www.aenor.es/documentos/certificacion/folletos/w_169_ACCESIBILIDAD_TIC.pdf Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

WCAG 1.0 Pautas Proporcionar alternativas equivalentes para el contenido visual y auditivo. No basarse sólo en el color. Utilizar marcadores y hojas de estilo, y hacerlo apropiadamente. Identificar el idioma usado. Crear tablas que se transformen correctamente. Asegurar que las páginas que incorporen nuevas tecnologías se transformen correctamente. Asegurar al usuario el control sobre los cambios de los contenidos dependientes del tiempo. Asegurar la accesibilidad directa de las interfaces incorporadas. Diseñar para la independencia del dispositivo. Utilizar soluciones provisionales. Utilizar las tecnologías y pautas W3C. Proporcionar información de contexto y orientación. Proporcionar mecanismos claros de navegación. Asegurar que los documentos sean claros y simples. Título: WCAG 1.0. Pautas Proporcionar alternativas equivalentes para el contenido visual y auditivo. No basarse sólo en el color. Utilizar marcadores y hojas de estilo, y hacerlo apropiadamente. Identificar el idioma usado. Crear tablas que se transformen correctamente. Asegurar que las páginas que incorporen nuevas tecnologías se transformen correctamente. Asegurar al usuario el control sobre los cambios de los contenidos dependientes del tiempo. Asegurar la accesibilidad directa de las interfaces incorporadas. Diseñar para la independencia del dispositivo. Utilizar soluciones provisionales. Utilizar las tecnologías y pautas W3C. Proporcionar información de contexto y orientación. Proporcionar mecanismos claros de navegación. Asegurar que los documentos sean claros y si Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

WCAG 1.0 Pautas Recurso de utilidad: Manual de aplicación de las WCAG 1.0. Directrices de Accesibilidad para el Contenido en la Web. Copyright © sidar 1997-2002. Este Curso de Diseño Accesible ha sido desarrollado por la Fundación sidar http://www.sidar.org/acti/cursos/cursotener/manual/direc /index.html Título:WCAG 1.0. Pautas Contenido: Recurso de utilidad: Manual de aplicación de las WCAG 1.0. Directrices de Accesibilidad para el Contenido en la Web. Copyright © sidar 1997-2002. Este Curso de Diseño Accesible ha sido desarrollado por la Fundación sidar http://www.sidar.org/acti/cursos/cursotener/manual/direc/index.html Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

WCAG 1.0 Guía de referencia rápida Imágenes y animaciones: Usar texto alternativo (atributo alt) para describir la función de los elementos visuales. Mapas de imagen: Usar mapas de cliente y texto alternativo para las zonas activas. Multimedia: Facilitar subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos accesibles. Enlaces de hipertexto: Usar texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, no usar instrucciones como “haga clic aquí”. Organización de las páginas: Usar encabezados, listas y estructura consistente. Usar hojas de estilos en cascada (CSS) para maquetación y estilo, donde sea posible. Gráficos: Resumir o usar el atributo longdesc. Scripts, applets y plug-in: Ofrecer alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan apoyo. Marcos: Utilizar noframes y títulos con sentido. Tablas: Realizarlas de manera que se puedan leer línea a línea. Incluir un resumen. Revisar el trabajo: Validar el código HTML. Usar herramientas de evaluación y navegadores “sólo texto” para verificar la accesibilidad. Título:WCAG 1.0. Guía de referencia rápida Contenido Imágenes y animaciones: Usar texto alternativo (atributo alt) para describir la función de los elementos visuales. Mapas de imagen: Usar mapas de cliente y texto alternativo para las zonas activas. Multimedia: Facilitar subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos accesibles. Enlaces de hipertexto: Usar texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, no usar instrucciones como “haga clic aquí”. Organización de las páginas: Usar encabezados, listas y estructura consistente. Usar hojas de estilos en cascada (CSS) para maquetación y estilo, donde sea posible. Gráficos: Resumir o usar el atributo longdesc. Scripts, applets y plug-in: Ofrecer alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan apoyo. Marcos: Utilizar noframes y títulos con sentido. Tablas: Realizarlas de manera que se puedan leer línea a línea. Incluir un resumen. Revisar el trabajo: Validar el código HTML. Usar herramientas de evaluación y navegadores “sólo texto” para verificar la accesibilidad. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Introducción a las WCAG 2.0 WCAG 1.0 (1999) y WCAG (Dic 2008) Estructura Puntos de Verificación, Criterios de Conformidad Nivel de Conformidad Documentación 1.0 (1999) 14 pautas con 65 puntos de verificación Los Puntos de Verificación tienen asignado un Nivel de Prioridad 1, 2 o 3. Nivel A, AA, AAA Técnicas fundamentales Técnicas HTML Técnicas CSS 2.0 (2008) 4 principios básicos con 12 pautas que contienen un total de 61 criterios de éxito. Los Criterios de Conformidad tienen asignados un Nivel de Conformidad A, AA ó AAA. Como satisfacer / Comprender Técnicas suficientes y aconsejables. Título:Introducción a las WCAG 2.0. WCAG 1.0 (1999) y WCAG (Dic 2008) Contenido: WCAG 1.0 (1999) Estructura: 14 pautas con 65 puntos de verificación Puntos de Verificación, Criterios de Conformidad: Los Puntos de Verificación tienen asignado un Nivel de Prioridad 1, 2 o 3 Nivel de Conformidad: Nivel A, AA, AAA Documentación: Técnicas fundamentales, Técnicas HTML y Técnicas CSS WCAG 2.0 (2008) Estructura: 4 principios básicos con 12 pautas que contienen un total de 61 criterios de éxito Puntos de Verificación, Criterios de Conformidad: Los Criterios de Conformidad tienen asignados un Nivel de Conformidad A, AA ó AAA. Documentación: Como satisfacer / Comprender, Técnicas suficientes y aconsejables. Presentación: http://www.w3c.es/Presentaciones/2009/0416-W3C-BCN-JG/ Presentación W3C Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Introducción a las WCAG 2.0 Principios y pautas Principio 1.- Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos. Pauta 1.1.- Proporcionar alternativas textuales para todo contenido web no textual, de manera que el acceso al contenido se ajuste a las necesidades de los usuarios. Pauta 1.2.- Medios tempodependientes: Proporcionar alternativas sincronizadas para el contenido web multimedia sincronizado que sea tempodependiente. Pauta 1.3.- Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura. Pauta 1.4.- Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo Título:Introducción a las WCAG 2.0. Principios y pautas Contenido Principio 1.- Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos. Pauta 1.1.- Proporcionar alternativas textuales para todo contenido web no textual, de manera que el acceso al contenido se ajuste a las necesidades de los usuarios. Pauta 1.2.- Medios tempodependientes: Proporcionar alternativas sincronizadas para el contenido web multimedia sincronizado que sea tempodependiente. Pauta 1.3.- Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura. Pauta 1.4.- Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Introducción a las WCAG 2.0 Principios y pautas Principio 2.- Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables. Pauta 2.1.- Proporcionar acceso a toda la funcionalidad mediante el teclado. Pauta 2.2.- Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido. Pauta 2.3.- No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones. Pauta 2.4.- Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran. Título: Introducción a las WCAG 2.0. Principios y pautas Contenido: Principio 2.- Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables. Pauta 2.1.- Proporcionar acceso a toda la funcionalidad mediante el teclado. Pauta 2.2.- Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido. Pauta 2.3.- No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones. Pauta 2.4.- Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Introducción a las WCAG 2.0 Principios y pautas Principio 3.- Comprensible: Comprensible - La información y el manejo de la interfaz de usuario deben ser comprensibles. Pauta 3.1.- Hacer que los contenidos textuales resulten legibles y comprensibles. Pauta 3.2.- Hacer que las páginas web aparezcan y operen de manera predecible. Pauta 3.3.- Ayudar a los usuarios a evitar y corregir los errores. Título: Introducción a las WCAG 2.0. Principios y pautas Contenido: Principio 3.- Comprensible: Comprensible - La información y el manejo de la interfaz de usuario deben ser comprensibles. Pauta 3.1.- Hacer que los contenidos textuales resulten legibles y comprensibles. Pauta 3.2.- Hacer que las páginas web aparezcan y operen de manera predecible. Pauta 3.3.- Ayudar a los usuarios a evitar y corregir los errores. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Introducción a las WCAG 2.0 Principios y pautas Principio 4.- Robusto: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas. Pauta 4.1: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas. Título: Introducción a las WCAG 2.0. Principios y pautas Contenido: Principio 4.- Robusto: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas. Pauta 4.1: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad Insertar un contenido audiovisual en web de forma accesible, implica tener en consideración los tres eslabones de la cadena de la accesibilidad. Título: Accesibilidad a los contenidos multimedia. Cadena de la Accesibilidad Contenido: Insertar un contenido audiovisual en web de forma accesible, implica tener en consideración los tres eslabones de la cadena de la accesibilidad. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad Cadena de la accesibilidad de los contenidos audiovisuales en Web Contenido en sí: El contenido debe ser accesible (Pauta 1.2 WCAG 2.0) Cómo llegar al contenido: El acceso a ese contenido debe ser accesible (WCAG 2.0) Control e interacción con el usuario: Ofrecer alternativas atendiendo a preferencias del usuario, y la interacción del usuario al acceder al contenido debe ser usable. Considerar otros trabajos cómo “Pautas de accesibilidad para agentes de usuario (UAAG)” Título: Accesibilidad a los contenidos multimedia. Cadena de la Accesibilidad Contenido: Cadena de la accesibilidad de los contenidos audiovisuales en Web Contenido en sí: El contenido debe ser accesible (Pauta 1.2 WCAG 2.0) Cómo llegar al contenido: El acceso a ese contenido debe ser accesible (WCAG 2.0) Control e interacción con el usuario: Ofrecer alternativas atendiendo a preferencias del usuario, y la interacción del usuario al acceder al contenido debe ser usable. Considerar otros trabajos cómo “Pautas de accesibilidad para agentes de usuario (UAAG)” Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad Pauta 1.2 de las WCAG 2.0 Subtitulado Audiodescripción Lengua de signos Título: Accesibilidad web. En los contenidos audiovisuales: Pauta 1.2 de las WCAG 2.0: Subtitulado, Audiodescripción y Lengua de signos Imágenes de videos con estos recursos: http://www.cesya.es/es/multimedia_accesible Fuente imágenes: http://www.cesya.es/es/multimedia_accesible Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad Título: Accesibilidad a los contenidos multimedia. Cadena de la Accesibilidad Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Metodología Verifique la accesibilidad con herramientas automáticas y revisión humana. Los métodos automáticos son generalmente rápidos y convenientes, pero no pueden identificar todos los problemas de accesibilidad. La revisión humana puede ayudar a garantizar la claridad del lenguaje y la facilidad de navegación Recomendaciones generales de WAI: Valide la accesibilidad con herramientas automáticas y revisión humana Comience utilizando métodos de validación desde los primeras fases del desarrollo Metodologías Título: Evaluación de accesibilidad WCAG. Metodología Contenido: Verifique la accesibilidad con herramientas automáticas y revisión humana. Los métodos automáticos son generalmente rápidos y convenientes, pero no pueden identificar todos los problemas de accesibilidad. La revisión humana puede ayudar a garantizar la claridad del lenguaje y la facilidad de navegación Recomendaciones generales de WAI: Valide la accesibilidad con herramientas automáticas y revisión humana Comience utilizando métodos de validación desde los primeras fases del desarrollo Metodologías Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Metodología. Evaluación automática Ventajas: Permite un funcionamiento rápido y sistemático. Se revisan muchos aspectos simultáneamente. Ofrece una calificación global de la accesibilidad de la página. Se puede certificar que no se cumple. Desventajas: La interpretación de los resultados del análisis es compleja y exige conocer los principios básicos de accesibilidad. Muchos aspectos de la accesibilidad sólo pueden verificarse mediante una revisión manual complementaria. No pueden certificar que sí se cumple. Título: Evaluación de accesibilidad WCAG. Metodología. Evaluación automática Contenido: Ventajas: Permite un funcionamiento rápido y sistemático. Se revisan muchos aspectos simultáneamente. Ofrece una calificación global de la accesibilidad de la página. Se puede certificar que no se cumple. Desventajas: La interpretación de los resultados del análisis es compleja y exige conocer los principios básicos de accesibilidad. Muchos aspectos de la accesibilidad sólo pueden verificarse mediante una revisión manual complementaria. No pueden certificar que sí se cumple. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Metodología. Evaluación manual Ventajas Se entienden mejor los problemas de la página. Se puede comparar la validez de distintas soluciones. Es el único medio posible para revisar algunos aspectos: adecuación texto alternativo, títulos de marcos, etc. Desventajas Proceso mucho más costoso en tiempo. Hacen falta más navegadores alternativos, simuladores de navegadores o configuraciones distintas del mismo navegador entre otras herramientas. Exige el juicio personal del revisor. Hay que conocer mejor los problemas para detectarlos. Algunas cosas son difíciles de simular. Puede no detectar algunos fallos de accesibilidad. Título: Evaluación de accesibilidad WCAG 1.0. Metodología. Evaluación manual Contenido: Ventajas Se entienden mejor los problemas de la página. Se puede comparar la validez de distintas soluciones. Es el único medio posible para revisar algunos aspectos: adecuación texto alternativo, títulos de marcos, etc. Desventajas Proceso mucho más costoso en tiempo. Hacen falta más navegadores alternativos, simuladores de navegadores o configuraciones distintas del mismo navegador entre otras herramientas. Exige el juicio personal del revisor. Hay que conocer mejor los problemas para detectarlos. Algunas cosas son difíciles de simular. Puede no detectar algunos fallos de accesibilidad Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Recursos Herramientas automáticas de validación Barras de desarrollo Herramientas reparadoras Otros navegadores, sólo texto, etc. Analizadores de contraste, y del color Lectores de pantalla, magnificadores, … Simuladores de tipos de pantalla, resolución, … http://labda.inf.uc3m.es/awa/es/node/125 Título: Evaluación de accesibilidad WCAG. Recursos Contenido: Herramientas automáticas de validación Barras de desarrollo Herramientas reparadoras Otros navegadores, sólo texto, etc. Analizadores de contraste, y del color Lectores de pantalla, magnificadores, … Simuladores de tipos de pantalla, resolución, … http://labda.inf.uc3m.es/awa/es/node/125 Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Determinar el alcance de la evaluación Establecer la muestra representativa de las páginas que se van a analizar Evaluación automática Evaluación manual Resumir los problemas. Informe Título: Evaluación de accesibilidad WCAG. Pasos a seguir Contenido: Determinar el alcance de la evaluación Establecer la muestra representativa de las páginas que se van a analizar Evaluación automática Evaluación manual Resumir los problemas. Informe Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Determinar el alcance de la evaluación Debe fijarse un nivel de conformidad (A, AA, AAA) que se quiera alcanzar y evaluar. Título: Evaluación de accesibilidad WCAG . Pasos a seguir Contenido: Determinar el alcance de la evaluación Debe fijarse un nivel de conformidad (A, AA, AAA) que se quiera alcanzar y evaluar. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Establecer la muestra representativa Páginas que se van a analizar (páginas de entrada al sitio, páginas con distinta organización y funcionalidad, páginas con tipo distinto de contenido) y la URL base que incluye todas las páginas a analizar en las revisiones automáticas (si no es posible por el tamaño del sitio o su naturaleza dinámica, seleccionar una muestra ampliada de páginas representativas). Título: Evaluación de accesibilidad WCAG. Pasos a seguir Contenido: Establecer la muestra representativa Páginas que se van a analizar (páginas de entrada al sitio, páginas con distinta organización y funcionalidad, páginas con tipo distinto de contenido) y la URL base que incluye todas las páginas a analizar en las revisiones automáticas (si no es posible por el tamaño del sitio o su naturaleza dinámica, seleccionar una muestra ampliada de páginas representativas). Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Evaluación automática Validación de estándares: Consiste en utilizar herramientas de validación de los estándares como HTML, CSS, etc.  Utilizar herramientas de evaluación de la accesibilidad: Consiste en utilizar herramientas de evaluación de la accesibilidad web. Se recomienda usar al menos dos herramientas de evaluación automática de la accesibilidad. Herramientas: http://www.w3.org/WAI/ER/tools/ http://labda.inf.uc3m.es/awa/es/node/125 Título: Evaluación de accesibilidad WCAG. Pasos a seguir Contenido: Evaluación automática Validación de estándares: Consiste en utilizar herramientas de validación de los estándares como HTML, CSS, etc.  Utilizar herramientas de evaluación de la accesibilidad: Consiste en utilizar herramientas de evaluación de la accesibilidad web. Se recomienda usar al menos dos herramientas de evaluación automática de la accesibilidad. Herramientas: http://www.w3.org/WAI/ER/tools/ http://labda.inf.uc3m.es/awa/es/node/125 Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Evaluación manual Evaluación complementaria a la automática Listado de puntos de comprobación de las pautas o checklist de accesibilidad a las páginas web Revisiones manuales para verificar que se cumplen las WCAG en distintas contextos de uso con diversidad funcional. Título: Evaluación de accesibilidad WCAG. Pasos a seguir Evaluación manual Evaluación complementaria a la automática Listado de puntos de comprobación de las pautas o checklist de accesibilidad a las páginas web Revisiones manuales para verificar que se cumplen las WCAG en distintas contextos de uso con diversidad funcional. Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Evaluación manual (sigue) Probar configuraciones de distintos navegadores existentes. Desactivar las imágenes: texto alternativo es adecuado Comprobar que se puede aumentar el tamaño de fuente Comprobar que no es necesario el desplazamiento horizontal con diferentes resoluciones de pantalla Visualizar la pantalla en escala de grises, contraste suficiente Comprobar que hay acceso en la navegación y funcionalidad sólo con teclado Comprobar que hay acceso en la navegación y funcionalidad desactivando plugins, scripts, etc. Acceder con un lector de pantalla y navegadores especiales como sólo texto Comprobar que el texto es claro y sencillo Título: Evaluación de accesibilidad WCAG. Pasos a seguir Contenido: Evaluación manual (sigue) Probar configuraciones de distintos navegadores existentes. Desactivar las imágenes: texto alternativo es adecuado Comprobar que se puede aumentar el tamaño de fuente Comprobar que no es necesario el desplazamiento horizontal con diferentes resoluciones de pantalla Visualizar la pantalla en escala de grises, contraste suficiente Comprobar que hay acceso en la navegación y funcionalidad sólo con teclado Comprobar que hay acceso en la navegación y funcionalidad desactivando plugins, scripts, etc. Acceder con un lector de pantalla y navegadores especiales como sólo texto Comprobar que el texto es claro y sencillo Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Evaluación de accesibilidad WCAG Pasos a seguir Informe Resumir los problemas y las mejores prácticas identificadas para cada tipo de página, con una URL de ejemplo y el método por el que fueron identificados. Recomendar la reparación de los problemas de accesibilidad detectados, la ampliación de los aspectos positivos y el mantenimiento y seguimiento del sitio. http://www.w3.org/WAI/eval/template.html Ejemplo: http://www.cesya.es/files/documentos/Informe_de_accesibilidad_CESyA_Febrero_2010.pdf Título: Evaluación de accesibilidad WCAG. Pasos a seguir Informe Resumir los problemas y las mejores prácticas identificadas para cada tipo de página, con una URL de ejemplo y el método por el que fueron identificados. Recomendar la reparación de los problemas de accesibilidad detectados, la ampliación de los aspectos positivos y el mantenimiento y seguimiento del sitio. http://www.w3.org/WAI/eval/template.html Ejemplo: http://www.cesya.es/files/documentos/Informe_de_accesibilidad_CESyA_Febrero_2010.pdf Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Referencias WCAG 1.0: http://www.w3.org/TR/WCAG10/ Traducción oficial: http://www.discapnet.es/web_accesible/wcag10/WAI- WEBCONTENT-19990505_es.html Documento utilidad puntos de verificación: http://www.discapnet.es/web_accesible/wcag10/full- checklist.html WCAG 2.0: http://www.w3.org/TR/WCAG20/ Traducción en proceso de ser oficial: http://www.sidar.org/traducciones/wcag20/wcag20_es.html   Accesibilidad a los contenidos audiovisuales en la Web. Lourdes Moreno et al. Real Patronato sobre Discapacidad. Noviembre 2008. ISBN 978-84-691-7754-9 http://www.cesya.es/files/documentos/accesibilidad_contenidos.pdf Título: Referencias Contenido: WCAG 1.0: http://www.w3.org/TR/WCAG10/ Traducción oficial: http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html Documento utilidad puntos de verificación: http://www.discapnet.es/web_accesible/wcag10/full-checklist.html WCAG 2.0: http://www.w3.org/TR/WCAG20/ Traducción en proceso de ser oficial: http://www.sidar.org/traducciones/wcag20/wcag20_es.html   Accesibilidad a los contenidos audiovisuales en la Web. Lourdes Moreno et al. Real Patronato sobre Discapacidad. Noviembre 2008. ISBN 978-84-691-7754-9 http://www.cesya.es/files/documentos/accesibilidad_contenidos.pdf Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Referencias herramientas Recursos de evaluación de la accesibilidad más utilizados: HERA: http://www.sidar.org/hera/ TAW: http://www.tawdis.net WAVE: http://wave.webaim.org/?lang=es AIS Web Accessibility Toolbar: http://www.visionaustralia.org.au/ais/toolbar/ Web Developer Toolbar: http://chrispederick.com/work/web-developer/ W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/ W3C Markup Validation Service: http://validator.w3.org/ MÁS: http://labda.inf.uc3m.es/awa/es/node/125 Título: Referencias Contenido: Recursos de evaluación de la accesibilidad más utilizados: HERA: http://www.sidar.org/hera/ TAW: http://www.tawdis.net WAVE: http://wave.webaim.org/?lang=es AIS Web Accessibility Toolbar: http://www.visionaustralia.org.au/ais/toolbar/ Web Developer Toolbar: http://chrispederick.com/work/web-developer/ W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/ W3C Markup Validation Service: http://validator.w3.org/ MÁS: http://labda.inf.uc3m.es/awa/es/node/125 Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

Referencias herramientas Algunas que evalúan las WCAG 2.0 TAW: http://www.tawdis.net/ Achecker: http://achecker.ca/checker/index.php Tool Validator: http://www.totalvalidator.com/ Título: Referencias herramientas Algunas que evalúan las WCAG 2.0 TAW: http://www.tawdis.net/ Achecker: http://achecker.ca/checker/index.php Tool Validator: http://www.totalvalidator.com/ Asignatura OCW-UC3M: “Evitando la barreras de accesibilidad en la Sociedad de la Información", Lourdes Moreno y Paloma Martínez, Grupo Labda

TEMA 3: ACCESIBILIDAD A LOS SITIOS WEB Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Fin de la presentación Asignatura Humanidades: “Evitando la barreras de accesibilidad en la Sociedad de la Información” OpenCourseWare de la Universidad Carlos III de Madrid