1. ACCESIBILIDAD A LOS SITIOS WEB “Evitando la barreras de accesibilidad en la Sociedad de la Información”

2. 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

3. 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 la Discapacidad por envejecimiento

4. 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

5. Principios de Diseño Web Separación de contenido, presentación y estructura

6. 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”

7. 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.

8. 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]

9. 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  elemento  Ejemplo:  Un título  Estas etiquetas son distintas dependiendo de que elemento se trata y tienen diferentes atributos específicos para cada una de ellas

10. Estándares de la Web HTML (HyperText Markup Language) Mi primera página ……..

11. Estándares de la Web HTML 5 (HyperText Markup Language )   Titulo de la web 

12. Estándares de la Web HTML 5 (HyperText Markup Language)   Mi sitio web  Mi sitio web creado en html5   Titulo de contenido  Contenido (ademas de imagenes, citas, videos etc.)

13. Estándares de la Web HTML 5 (HyperText Markup Language )   Titulo de contenido  contenido   Creado por mi el 2011 

14. Estándares de la Web HTML (HyperText Markup Language) Algunos elementos:  Encabezado Titulo Titular de primer nivel Titular de segundo nivel Titular de tercer nivel </html Titular de primer nivel Titular de segundo nivel Titular de tercer nivel

15. Estándares de la Web HTML (HyperText Markup Language) Algunos elementos:  texto del enlace Ejemplo:  Enlace al CESyA http://www.cesya.es Enlace al CESyA

16. Estándares de la Web HTML (HyperText Markup Language) Algunos elementos:   Ejemplo: 

17. 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 http://www.w3c.es/divulgacion/guiasbreves/XHTML  HTML 4.01: http://html.conclase.net/w3c/html401- es/cover.htmlhttp://html.conclase.net/w3c/html401- es/cover.html  Guía Breve de CSS: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo http://www.w3c.es/divulgacion/guiasbreves/hojasestilo  CSS1 : http://html.conclase.net/w3c/css1-es.html CSS1 : http://html.conclase.net/w3c/css1-es.html  Guía de Referencia XHTML: http://www.w3c.es/divulgacion/guiasreferencia/xhtml1/ http://www.w3c.es/divulgacion/guiasreferencia/xhtml1/

18. 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)

19. 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  Hay 65 puntos de revisión.

20. WCAG 1.0 Conformidad  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_AC CESIBILIDAD_TIC.pdf

21. WCAG 1.0 Pautas 1. Proporcionar alternativas equivalentes para el contenido visual y auditivo. 2. No basarse sólo en el color. 3. Utilizar marcadores y hojas de estilo, y hacerlo apropiadamente. 4. Identificar el idioma usado. 5. Crear tablas que se transformen correctamente.

22. WCAG 1.0 Pautas 6. Asegurar que las páginas que incorporen nuevas tecnologías se transformen correctamente. 7. Asegurar al usuario el control sobre los cambios de los contenidos dependientes del tiempo. 8. Asegurar la accesibilidad directa de las interfaces incorporadas. 9. Diseñar para la independencia del dispositivo. 10. Utilizar soluciones provisionales.

23. WCAG 1.0 Pautas 11. Utilizar las tecnologías y pautas W3C. 12. Proporcionar información de contexto y orientación. 13. Proporcionar mecanismos claros de navegación. 14. Asegurar que los documentos sean claros y simples.

24. 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 sidarsidar http://www.sidar.org/acti/cursos/cursotener/ma nual/direc/index.html

25. 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í”.

26.  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

27. Introducción a las WCAG 2.0 WCAG 1.0 (1999) y WCAG (Dic 2008) WCAGEstructura Puntos de Verificación, Criterios de Conformidad Nivel de Conformidad Documentación WCAG 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 WCAG 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. Nivel A, AA, AAA Como satisfacer / Comprender Técnicas suficientes y aconsejables.

28. 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

29. 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. Introducción a las WCAG 2.0 Principios y pautas

30. 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. Introducción a las WCAG 2.0 Principios y pautas

31. 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. Introducción a las WCAG 2.0 Principios y pautas

32.  Insertar un contenido audiovisual en web de forma accesible, implica tener en consideración los tres eslabones de la cadena de la accesibilidad. Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad

33.  Cadena de la accesibilidad de los contenidos audiovisuales en Web 1. Contenido en sí: El contenido debe ser accesible (Pauta 1.2 WCAG 2.0) 2. Cómo llegar al contenido: El acceso a ese contenido debe ser accesible (WCAG 2.0) 3. 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)” Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad

34.  Pauta 1.2 de las WCAG 2.0  Subtitulado  Audiodescripción  Lengua de signos Fuente imágenes: http://www.cesya.es/es/multimedia_accesiblehttp://www.cesya.es/es/multimedia_accesible Accesibilidad a los contenidos multimedia Cadena de la Accesibilidad

36. 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

37.  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. Evaluación de accesibilidad WCAG Metodología. Evaluación automática

38.  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.

39.  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. Evaluación de accesibilidad WCAG Metodología. Evaluación manual

40.  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

41.  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 Evaluación de accesibilidad WCAG Recursos

42. 1. Determinar el alcance de la evaluación 2. Establecer la muestra representativa de las páginas que se van a analizar 3. Evaluación automática 4. Evaluación manual 5. Resumir los problemas. Informe Evaluación de accesibilidad WCAG Pasos a seguir

43. 1. Determinar el alcance de la evaluación  Debe fijarse un nivel de conformidad (A, AA, AAA) que se quiera alcanzar y evaluar. Evaluación de accesibilidad WCAG Pasos a seguir

44. 2. 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). Evaluación de accesibilidad WCAG Pasos a seguir

45. 3. 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://www.w3.org/WAI/ER/tools/  http://labda.inf.uc3m.es/awa/es/node/125 http://labda.inf.uc3m.es/awa/es/node/125 Evaluación de accesibilidad WCAG Pasos a seguir

46. 4. 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 webchecklist de accesibilidad  Revisiones manuales para verificar que se cumplen las WCAG en distintas contextos de uso con diversidad funcional. Evaluación de accesibilidad WCAG Pasos a seguir

47. 4. 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 Evaluación de accesibilidad WCAG Pasos a seguir

48. Evaluación manual (sigue)  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

49. 5. 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 http://www.w3.org/WAI/eval/template.html  Ejemplo: http://www.cesya.es/files/documentos/Informe_de_ac cesibilidad_CESyA_Febrero_2010.pdf http://www.cesya.es/files/documentos/Informe_de_ac cesibilidad_CESyA_Febrero_2010.pdf Evaluación de accesibilidad WCAG Pasos a seguir

50. Referencias  WCAG 1.0: http://www.w3.org/TR/WCAG10/http://www.w3.org/TR/WCAG10/  Traducción oficial: http://www.discapnet.es/web_accesible/wcag10/WAI- WEBCONTENT-19990505_es.html 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 http://www.discapnet.es/web_accesible/wcag10/full-checklist.html  WCAG 2.0: http://www.w3.org/TR/WCAG20/http://www.w3.org/TR/WCAG20/  Traducción en proceso de ser oficial: http://www.sidar.org/traducciones/wcag20/wcag20_es.html 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

51. Referencias herramientas Recursos de evaluación de la accesibilidad más utilizados:  HERA: http://www.sidar.org/hera/http://www.sidar.org/hera/  TAW: http://www.tawdis.nethttp://www.tawdis.net  WAVE: http://wave.webaim.org/?lang=eshttp://wave.webaim.org/?lang=es  AIS Web Accessibility Toolbar: http://www.visionaustralia.org.au/ais/toolbar/ http://www.visionaustralia.org.au/ais/toolbar/  Web Developer Toolbar: http://chrispederick.com/work/web-developer/ http://chrispederick.com/work/web-developer/  W3C CSS Validation Service: http://jigsaw.w3.org/css- validator/http://jigsaw.w3.org/css- validator/  W3C Markup Validation Service: http://validator.w3.org/ http://validator.w3.org/ MÁS: http://labda.inf.uc3m.es/awa/es/node/125http://labda.inf.uc3m.es/awa/es/node/125

52. Referencias herramientas  Algunas que evalúan las WCAG 2.0  TAW: http://www.tawdis.net/http://www.tawdis.net/  Achecker: http://achecker.ca/checker/index.php http://achecker.ca/checker/index.php  Tool Validator: http://www.totalvalidator.com/ http://www.totalvalidator.com/