accesibilidad en la web: de wcag 1.0 a wcag...

DLSI – Universidad de Alicante 1

Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0

Universidad de ColimaMéxico

Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad en la WebAccesibilidad en la Web

Sergio Luján MoraDepartamento de Lenguajes y Sistemas Informáticos

Universidad de Alicante


Contenido• Accesibilidad en la Web• Declaración de accesibilidad• Consejos• La accesibilidad en la Web ayuda a

todo el mundo• La iniciativa NI4La iniciativa NI4• Negocio• ¿Auditoria, test, test automático?

¿Qué es la accesibilidad en la Web?


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-LeeTim 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-LeeTim Berners LeeCreador de la Web (HTML, HTTP, URL)

Director del W3C


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

d ll d l W b t b j j tdesarrollo 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 y experiencia del usuarioco oc e to y e pe e c a de usua o– 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.


¿Todos los discapacitados pueden navegar por Internet?

¿Un ciego, un tetrapléjico?


Accesibilidad en la WebEl Mundo (06/05/2006):J L ó E d t léji d 53 ñ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 WebEn agosto de 2005 abrió en Internet un 'blog', en el

que se identificaba como Lucas S. Conseguía q gmanejar 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'Los agentes investigan también el contenido del 'blog'

que el fallecido actualizaba casi semanalmentepara exponer su caso y su postura favorable a la eutanasia y para solicitar sin tapujos "ayuda exterior para poner fin a esta horrible tortura".


¿Cuáles son los principales problemas en las páginas web?


Accesibilidad en la Web• Las barreras más habituales que se suelen

encontrar en la Web son: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

A i d i f ió lt ti l– Ausencia de información alternativa 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

“ ió lt ti ibl ”una “versión alternativa 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 lt ti ibl ” j dalternativa accesible” es mejor que nada


Accesibilidad en la Web• Artículo:

– Versión accesible: utilizar sólo en caso de emergencia. 7 buenas razones para olvidarnos de las "versiones accesibles".

Fuente: jlvelazquez.net


Accesibilidad en la Web• El punto de verificación 11.4 (prioridad 2) dice así:

Si, tras todos los esfuerzos aplicados, no puedeSi, tras todos los esfuerzos aplicados, no puedecrear una página accesible, proporcione un enlace auna página Web alternativa que use tecnologíasW3C, sea accesible, tenga información (ofuncionalidad) equivalente y se actualice a la par quela 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 aparecenposible 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 E f d di i i ió i d t d "1. Es una forma de discriminación, 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 T ió ibl d i li t6. 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.


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


Declaración de accesibilidad• Página web que describe todas las

t í ti d ibilid d hcaracterísticas de accesibilidad que se han implementado:– Atajos de teclado– Cumplimiento de los estándares (XHTML, CSS)– Nivel de accesibilidad logrado

Decisiones de diseño– Decisiones de diseño– Ayudas a la navegación– Cómo contactar– Enlaces sobre accesibilidad (páginas,

herramientas, libros)


Consejos• Consejos generales que favorecen a

todo el mundo y algunos específicos para la gente con discapacidades


¿Qué consejos debo tener en cuenta para hacer páginas accesibles?

Consejos• Hace falta una planificación y un diseño

previoprevio• 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


Estructura lógica (y 3)


¿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

i d d t l ió dpierda 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


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?


Consejos• Barra de navegación (menú con las opciones

principales del sitio web)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 webuna 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


Discapacidades visuales• Los problemas más serios de accesibilidad,

d d l t d t l d l W bde 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– 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


Discapacidades visuales (III)• Para mejorar la accesibilidad de los usuarios

invidentes: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>

l l• <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)


Discapacidades visuales (V)• Caracteres

– Las páginas que posean características de accesibilidadLas 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 dees 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 lospone a disposición de todos los usuarios.


Discapacidades visuales (VII)

Discapacidades visuales (VIII)• Respecto a los tipos de letra que hay que

utilizar para favorecer a un usuarioutilizar 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– 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


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 i l í i l l d é i lsin 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)


Discapacidades auditivas• Rara es la situación en la que el sonido sea

i l ió d á inecesario 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 futuromultimedia 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


Discapacidades en el habla• Por el momento, no tiene demasiada

i t i i i b d h blimportancia 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 distintasya 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

i i t d l tó d á d lmovimientos 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: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


Discapacidades cognitivas• Los primeros años solo podían acceder a la web

personas inteligentes y con conocimientospersonas 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 interfazhan 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)


Desactivar imágenes, vídeos, sonidos y demás elementos multimedia


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


• Sitio web con contenido basado en vídeo• Solución accesible:• 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



• Sitio web con texto con bajo contraste t l l d l t t l l d lentre el color del texto 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 AFANIASy 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 f d t l di t i d "N ió Fá il"fundamentan las directrices de "Navegación Fácil":– Normalización– Investigación– Integración– Intercomunicación– Interactividad


La iniciativa NI4• Estas Pautas de Diseño de Navegación Fácil

pretenden aportar soluciones a los problemaspretenden 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 dificultanuna 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


Ejercicio: seleccionar una web y comprobar el protocolo de NI4

(leer primero el documento adjunto)


Negocio• Existen amplias posibilidades de

nuevos negocio:– Diseño de webs accesibles– Asesoría/consultoría– Auditoría y test de accesibilidad


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


¿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,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 accesibilidadaccesibilidad.

Desventajas: no se produce una transmisión de conocimiento del auditor al cliente (para ello se tienen que realizar cursos de formación).


¿Auditoria, test, test automático?• Ejemplo de informe de auditoría de accesibilidad• Preguntas usuales:• 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?p– ¿Los usuarios tienen un control total sobre la página?


¿Auditoria, test, test automático?• Test de accesibilidad

Usuarios con algún tipo de discapacidad realizan una g p pserie 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.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 diferentesnecesario 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


¿Auditoria, test, test automático?• Test de accesibilidad automático

Mediante un programa que verifica unMediante 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.

accesibilidad en la web: de wcag 1.0 a wcag...

Documents