Accesibilidad en la Web. WCAG 1.0 a WCAG 2.0

Transcripción

1 Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0 Universidad de Colima México Departamento de Lenguajes y Sistemas Informáticos Accesibilidad en la Web Sergio Luján Mora Departamento de Lenguajes y Sistemas Informáticos Universidad de Alicante DLSI Universidad de Alicante 1

2 Contenido Accesibilidad en la Web Declaración de accesibilidad Consejos La accesibilidad en la Web ayuda a todo el mundo La iniciativa NI4 Negocio Auditoria, test, test automático? Qué es la accesibilidad en la Web? DLSI Universidad de Alicante 2

3 Accesibilidad en la Web El poder de la Web está en su universalidad. Que todo el mundo pueda acceder, sin importar si se tiene o no una discapacidad, es un aspecto esencial Tim Berners-Lee Accesibilidad en la Web El poder de la Web está en su universalidad. Que todo el mundo pueda acceder, sin importar si se tiene o no una discapacidad, es un aspecto esencial Tim Berners-Lee Creador de la Web (HTML, HTTP, URL) Director del W3C DLSI Universidad de Alicante 3

4 Accesibilidad en la Web Diseño que permita a gente con discapacidad: 1. Percibir, entender, navegar e interactuar de forma efectiva en la Web Contenido web y navegadores y reproductores multimedia 2. Crear y aportar contenido Herramientas de autor Accesibilidad en la Web Para lograr este objetivo es fundamental que las diversas partes que participan en el desarrollo y uso de la Web trabajen juntos Estos componentes incluyen: Contenido: la información disponible en una página o aplicación web, incluyendo: La información mostrada: texto, imágenes y sonidos El código que define la estructura, presentación, etc. Navegadores y otros agentes de usuario Tecnología de apoyo: lectores de pantalla, teclados alternativos El conocimiento oc y experiencia e ca del usuario Desarrolladores: diseñadores, programadores, etc. Herramientas de autor: las herramientas que crean sitios web Herramientas de evaluación: herramientas de evaluación de la accesibilidad, validadores de HTML y CSS, etc. DLSI Universidad de Alicante 4

5 Todos los discapacitados pueden navegar por Internet? Un ciego, un tetrapléjico? DLSI Universidad de Alicante 5

6 Accesibilidad en la Web El Mundo (06/05/2006): Jorge León Escudero, un pentapléjico de 53 años que llevaba meses pidiendo en Internet una 'mano amiga' que le ayudara a 'morir dignamente', fue encontrado muerto el pasado jueves en su domicilio de Valladolid, desconectado del respirador que le mantenía con vida. Accesibilidad en la Web En agosto de 2005 abrió en Internet un 'blog', en el que se identificaba como Lucas S. Conseguía manejar el ordenador gracias a un adaptador labial -explica el diario 'Abc'- y desde hacía dos meses pedía una 'mano amiga' que le ayudara a 'morir dignamente'. En él aseguró que lo tenía "todo preparado para que quien me ayude quede incógnito". [ ] Los agentes investigan también el contenido del 'blog' que el fallecido actualizaba casi semanalmente para exponer su caso y su postura favorable a la eutanasia y para solicitar sin tapujos "ayuda exterior para poner fin a esta horrible tortura". DLSI Universidad de Alicante 6

7 Cuáles son los principales problemas en las páginas web? DLSI Universidad de Alicante 7

8 Accesibilidad en la Web Las barreras más habituales que se suelen encontrar en la Web son: Imágenes sin texto alternativo Ausencia de texto alternativo para las zonas sensibles de los mapas de imagen Uso incorrecto de los elementos estructurales en las páginas Sonidos no subtitulados e imágenes no descritas Ausencia de información ió alternativa ti para los que no pueden acceder a los marcos (frames) y a los scripts u otros objetos programados Tablas difíciles de interpretar cuando se alinean Contraste de colores pobre Accesibilidad en la Web No es accesibilidad correcta proporcionar una versión alternativa ti accesible La web tiene que ser única, pero accesible para todo el mundo No existen dos tipos de ascensores o de entradas en los edificios En cualquier caso, la opción versión alternativa ti accesible es mejor que nada DLSI Universidad de Alicante 8

9 DLSI Universidad de Alicante 9

10 DLSI Universidad de Alicante 10

11 DLSI Universidad de Alicante 11

12 DLSI Universidad de Alicante 12

13 DLSI Universidad de Alicante 13

14 DLSI Universidad de Alicante 14

15 Artículo: Accesibilidad en la Web Versión accesible: utilizar sólo en caso de emergencia. 7 buenas razones para olvidarnos de las "versiones accesibles". Fuente: jlvelazquez.net DLSI Universidad de Alicante 15

16 Accesibilidad en la Web El punto de verificación 11.4 (prioridad 2) dice así: Si, tras todos los esfuerzos aplicados, no puede crear una página accesible, proporcione un enlace a una página Web alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente yseactualicealaparque la página original no accesible. El problema es que la mayoría de las versiones accesibles no surgen tras haber hecho todo lo posible por evitarla, sino que simplemente aparecen por desconocimiento del desarrollador a la hora de proveer contenidos alternativos a elementos multimedia, a cumplir los estándares del W3C o simplemente por capricho del jefe de proyecto, departamento de marketing o del mismo desarrollador. Accesibilidad en la Web A continuación podéis ver una lista de 7 razones por las debemos evitarlas: 1. Es una forma de discriminación, i i ió una especie de entrada "por la puerta de atrás". 2. Rompen con la universalidad de la web. 3. Es una forma de duplicar el trabajo, tanto a la hora de desarrollar el sitio como a la hora de mantenerlo. 4. Suelen ser páginas nada atractivas visualmente (no todos los discapacitados son ciegos). 5. Suponen un gasto extra de espacio en disco del servidor. 6. Tener una versión accesible separada implica tener una versión no accesible. Y eso no es bueno; de la accesibilidad nos beneficiamos todos. 7. La proliferación de "versiones accesibles" hacen crecer el mito de que la accesibilidad sólo beneficia a usuarios discapacitados. DLSI Universidad de Alicante 16

17 Accesibilidad en la Web A pesar de todo esto... Todo sobre las versiones accesibles injustificadas no podía ser malo. Existe una cosa aún peor (mucho peor): una web totalmente inaccesible. Fuente: jlvelazquez.net Accesibilidad en la Web Otra alternativa es ofrecer distintos estilos visuales: Alto contraste Tamaño de letra Combinaciones de colores Solución adecuada para usuarios con Solución adecuada para usuarios con algunos problemas de visión (visión reducida, daltónicos, etc.) DLSI Universidad de Alicante 17

18 DLSI Universidad de Alicante 18

19 DLSI Universidad de Alicante 19

20 DLSI Universidad de Alicante 20

21 DLSI Universidad de Alicante 21

22 DLSI Universidad de Alicante 22

23 Declaración de accesibilidad Página web que describe todas las características ti de accesibilidad d que se han implementado: Atajos de teclado Cumplimiento de los estándares (XHTML, CSS) Nivel de accesibilidad logrado Decisiones de diseño Ayudas a la navegación Cómo contactar Enlaces sobre accesibilidad (páginas, herramientas, libros) DLSI Universidad de Alicante 23

24 DLSI Universidad de Alicante 24

25 DLSI Universidad de Alicante 25

26 Consejos Consejos generales que favorecen a todo el mundo y algunos específicos para la gente con discapacidades DLSI Universidad de Alicante 26

27 Qué consejos debo tener en cuenta para hacer páginas accesibles? Consejos Hace falta una planificación y un diseño previo En función: Del propósito del sitio web Del contenido Del público o audiencia destinatarios De aquello que se espera obtener del sitio web De aquello que los visitantes esperan obtener A veces existen auténticos guiones detrás de muchas estructuras de navegación DLSI Universidad de Alicante 27

28 Estructura lógica (y 3) DLSI Universidad de Alicante 28

29 Qué mecanismos existen para que un usuario no se pierda en un sitio web? Mecanismos de navegación Para evitar que el usuario o visitante no se pierda durante la navegación, se puede usar: Rastro de las migas de pan : muestra una lista con los enlaces que el usuario ha visitado o el nivel actual de la jerarquía de navegación desde la página principal Numeración de los pasos: se indica una lista con todos los pasos necesarios para completar un proceso así como el paso en el que se encuentra el usuario DLSI Universidad de Alicante 29

30 DLSI Universidad de Alicante 30

31 DLSI Universidad de Alicante 31

32 DLSI Universidad de Alicante 32

33 Consejos Regla de los tres clicks Para acceder a la información útil Evitar callejones sin salida Todas las páginas: Un enlace a la página principal A la página anterior Por qué poner un enlace a la página anterior? DLSI Universidad de Alicante 33

34 DLSI Universidad de Alicante 34

35 Consejos Barra de navegación (menú con las opciones principales del sitio web) Opción de búsqueda Mapa del sitio Indicar formas de contacto con alguna persona (correo, teléfono): webmaster, comercial, etc. Aplicar una imagen corporativa para proporcionar una sensación de pertenencia al sitio web Evitar menús, opciones, estructuras y caminos muy largos o numerosos (siete es el número más apropiado) Consejos Discapacidades visuales Discapacidades auditivas Discapacidades en el habla Discapacidades motrices Discapacidades cognitivas DLSI Universidad de Alicante 35

36 Discapacidades visuales Los problemas más serios de accesibilidad, de acuerdo con el estado actual de la Web, hacen referencia a los usuarios invidentes y a los que tengan otras discapacidades visuales, ya que la mayoría de las paginas web son muy visuales. Daltonismo Invidentes Visión reducida (hipovidente) Discapacidades visuales (II) Para mejorar la accesibilidad de los usuarios daltónicos: Evitar los colores suaves porque puede que estén por debajo del límite de la visión del usuario Asegurarse de que haya siempre un alto contraste entro los colores del texto y del fondo Evitar las imágenes y patrones de fondo que interfieran en la lectura DLSI Universidad de Alicante 36

37 DLSI Universidad de Alicante 37

38 Discapacidades visuales (III) Para mejorar la accesibilidad de los usuarios invidentes: Las páginas de texto son razonablemente fáciles de leer para los usuarios invidentes El texto es leído por un lector de pantalla mediante un sintetizador del habla Pero para facilitar esta lectura es necesario realzar la estructura de la pagina con un marcado HTML correcto: <h1>, <h2>, <p> <ul>, <ol> <blockquote> </blockquote> <cite> </cite> Discapacidades visuales (IV) Para mejorar la accesibilidad de los usuarios que ven muy poco: Estos usuarios suelen necesitar que las fuentes sean grandes: Se puede modificar el tamaño del texto con las opciones del navegador Pero no codificar la información con tamaños de fuentes absolutos (px, pt, cm) DLSI Universidad de Alicante 38

39 Discapacidades visuales (V) Caracteres Las páginas que posean características de accesibilidad para los invidentes, pueden utilizar todos los tipos de letra disponibles: el dispositivo braille o el sintetizador vocal interpretan perfectamente el texto. Es posible entonces utilizar en las páginas web, caracteres de toda dimensión y color deseados: el texto siempre será leído correctamente. En cambio, un caso que tiene características muy peculiares es el de los hipovidentes o de quien tenga dificultades de percepción cromática, es decir de las personas que poseen en parte, y aunque en niveles diferentes, una cierta capacidad visual. Discapacidades visuales (VI) Para un hipovidente, cuanto más elevado es el contraste de colores más alta es la capacidad visiva consentida. Además, un buen contraste de colores, es un elemento válido y positivo que se pone a disposición de todos los usuarios. DLSI Universidad de Alicante 39

40 Discapacidades visuales (VII) Discapacidades visuales (VIII) Respecto a los tipos de letra que hay que utilizar para favorecer a un usuario hipovidente: Preferible elegir caracteres muy bien dibujados, que no sean demasiado finos (light) ni demasiado comprimidos (condensed) Muy legibles: Arial, Verdana, Century Gothic, Tahoma, Bookman Old Style Evitar cuidadosamente los tipos de letra comprimidos (por ejemplo, Impact, Juice, Matisse, Rockwell y parecidos), aquellos estilizados (por ejemplo, Matura, Snap, Matisse ITC, Lucida Handwriting e similares DLSI Universidad de Alicante 40

41 DLSI Universidad de Alicante 41

42 Discapacidades visuales (IX) Truco: Para los invidentes, un texto será perceptible a través de las herramientas oportunas también cuando el color sea invisible para un usuario con visión normal, o sea idéntico al del fondo Esto puede ser utilísimo, por ejemplo, para transmitir información escondida a los invidentes sin alterar un mínimo el resultado estético o la elegancia de una página web (por ejemplo, se puede insertar una indicación al comienzo y al final de un sumario, o escribir una frase descriptiva de una imagen animada) DLSI Universidad de Alicante 42

43 DLSI Universidad de Alicante 43

44 Discapacidades auditivas Rara es la situación en la que el sonido sea necesario para la comprensión de una página web hoy en día La accesibilidad de un sitio web casi siempre es la misma cuando se apaga el sonido, pero con la tendencia a emplear más recursos multimedia cambiará en el futuro Se deberá diseñar el sitio pensando en una audiencia con discapacidades auditivas Por ejemplo poniendo videos con versiones subtituladas o transcripciones DLSI Universidad de Alicante 44

45 Discapacidades en el habla Por el momento, no tiene demasiada importancia i si un usuario web puede hablar o no, porque todas las entradas de la computadora se hacen con un ratón y un teclado No obstante se deberán de tener en cuenta ya que es muy probable que las distintas formas de interfaces de usuario activadas por voz sean más populares en el futuro, en circunstancias en las que el uso del teclado no sea la mejor opción Discapacidades motrices Muchos usuarios tienen problemas con los movimientos i del ratón, además de con las pulsaciones de las teclas en el teclado (por ejemplo, pulsar varias teclas simultáneamente) Todos estos puntos deben ser tenidos en cuenta a la hora de diseñar: No emplear enlaces pequeños y juntos Los mapas de imágenes del lado del cliente deben de funcionar incluso para los usuarios que no puedan usar en absoluto un ratón Selección de los enlaces del mapa mediante teclado DLSI Universidad de Alicante 45

46 Discapacidades cognitivas Los primeros años solo podían acceder a la web personas inteligentes y con conocimientos informáticos (universitarios, científicos) Esto ha cambiado con el paso de los años Diseñar paginas que comprendan todos los usuarios independientemente de su nivel cultural o edad Lamentablemente, las discapacidades cognitivas no han supuesto tanta investigación a nivel de la interfaz como las discapacidades físicas, por lo que las directrices para dar soporte a estos usuarios no están muy bien establecidas Ejercicio: seleccionar una web y detectar posibles problemas de accesibilidad (navegar como una persona con discapacidades) DLSI Universidad de Alicante 46

47 Desactivar imágenes, vídeos, sonidos y demás elementos multimedia DLSI Universidad de Alicante 47

48 La accesibilidad en la Web ayuda a todo el mundo La creación de páginas web accesibles no sólo ayuda a las personas con algún tipo de discapacidad ayuda también al resto de usuarios cuando se encuentran en circunstancias determinadas. La accesibilidad en la Web ayuda a todo el mundo Sitio web con contenido basado en vídeo Solución accesible: Versión en texto para personas con discapacidad visual o transcripciones de los vídeos para personas con discapacidad auditiva: También se beneficia: Usuarios con equipos antiguos que no puedan reproducir vídeos Usuarios que acceden desde salas comunes de ordenadores, en bibliotecas o en colegios, por lo que contenidos basados en videos con sonido no se podrían consultar DLSI Universidad de Alicante 48

49 La accesibilidad en la Web ayuda a todo el mundo Sitio web con texto con bajo contraste entre el color del texto t y el color del fondo Solución accesible: Combinación de colores de alto contraste También se beneficia: Usuarios que acceden a la página web en la calle con una PDA o en un coche con un dispositivo multimedia La iniciativa NI4 Iniciativa de Instituto de Apoyo Empresarial (I.A.E.) y AFANIAS El protocolo NI4 nace como una posible respuesta a las necesidades de accesibilidad a Internet de las personas con discapacidad intelectual, y con la firme creencia que esta respuesta puede quedar definida en dos palabras: "Navegación Fácil" NI4 debe su nombre a los principios en los que se fundamentan las directrices i de "Navegación Fácil": Normalización Investigación Integración Intercomunicación Interactividad DLSI Universidad de Alicante 49

50 La iniciativa NI4 Estas Pautas de Diseño de Navegación Fácil pretenden aportar soluciones a los problemas específicos de las personas con discapacidad intelectual Intenta abarcar al mayor número de personas de este colectivo, si bien no hay que olvidar que uno de los grandes problemas es la gran heterogeneidad que existe dentro de este colectivo, lo que provoca una serie de problemas más complejos que dificultan en la actualidad el desarrollo de un estándar de diseño que sea eficaz en un 100% de los casos DLSI Universidad de Alicante 50

51 Ejercicio: seleccionar una web y comprobar el protocolo de NI4 (leer primero el documento adjunto) DLSI Universidad de Alicante 51

52 Negocio Existen amplias posibilidades de nuevos negocio: Diseño de webs accesibles Asesoría/consultoría Auditoría y test de accesibilidad DLSI Universidad de Alicante 52

53 DLSI Universidad de Alicante 53

54 Negocio Clientes más fieles: A menudo, los usuarios discapacitados se vuelven clientes muy fieles cuando comprueban que las marcas les proporcionan un buen servicio y se adaptan a sus necesidades DLSI Universidad de Alicante 54

55 Auditoria, test, test automático? Auditoria de accesibilidad, test de accesibilidad y test de accesibilidad automático Auditoria, test, test automático? Auditoria de accesibilidad Un experto en accesibilidad revisa un sitio web, informa de posibles problemas de accesibilidad y proporciona recomendaciones para solucionar los problemas. Ventajas: más rápido y barato que un test de accesibilidad, más exhaustivo que un test de accesibilidad. Desventajas: no se produce una transmisión de conocimiento del auditor al cliente (para ello se tienen que realizar cursos de formación). DLSI Universidad de Alicante 55

56 Auditoria, test, test automático? Ejemplo de informe de auditoría de accesibilidad Preguntas usuales: Se puede acceder al sitio web con cualquier tipo de navegador? Son los formularios accesibles para todos los usuarios? Pueden todos los usuarios acceder fácilmente al contenido del sitio web? Están la estructura/contenido y la presentación claramente separados? Los usuarios tienen un control total sobre la página? DLSI Universidad de Alicante 56

57 DLSI Universidad de Alicante 57

58 Auditoria, test, test automático? Test de accesibilidad Usuarios con algún tipo de discapacidad realizan una serie de tareas en un sitio web mientras que un controlador anota todos los problemas que experimentan. Es la única forma para asegurar un nivel de accesibilidad óptimo. Ventajas: también se detectan problemas de usabilidad, es una gran oportunidad para aprender de primera mano los problemas de accesibilidad. Desventajas: es extremadamente caro de realizar, sorprendentemente detecta menos problemas que una auditoría de accesibilidad. Auditoria, test, test automático? Para realizar un estudio estadístico válido, es necesario realizar las pruebas con diferentes grupos de usuarios (al menos 5 usuarios por grupo): Ciegos (lectores de pantalla) Problemas de visión (magnificadores de pantalla) Disléxicos Dificultades de aprendizaje Problemas de movilidad Personas mayores Total: al menos 30 usuarios DLSI Universidad de Alicante 58

59 DLSI Universidad de Alicante 59

60 Auditoria, test, test automático? Test de accesibilidad automático Mediante un programa que verifica un conjunto de guías, se evalúa de forma automática la accesibilidad de un sitio web. Ventajas: rápido, sencillo y económico de realizar. Desventajas: la calidad de los resultados es limitada, devuelven errores que no lo son y no detecta errores básicos. DLSI Universidad de Alicante 60