Introducción a la

Accesibilidad Web
Ricardo Borillo Domenech
borillo@uji.es
Índice

 Introducción.
 Referencias.
 Marco legislativo.
 Herramientas.
 Comprobación de la accesibilidad en un sitio
web.
 Principales barreras.
Introducción

¿Qué es la accesibilidad Web?

 Un sitio web es accesible cuando puede ser utilizado de forma
eficaz por el mayor número posible de personas,
independientemente de sus limitaciones personales.

“Diseño para todos” o “diseño universal”

 Su objetivo final es conseguir productos y entornos fáciles de
utilizar por el mayor número de personas, sin necesidad de
realizar unos diseños especiales o adaptados.
Introducción

La accesibilidad Web supone un enorme beneficio

especialmente para las personas con discapacidad
visual (nos centraremos en este tipo).

Accesibilidad Web para personas:

 Con discapacidades auditivas, físicas, cognitivas,
etc.
 Con una incapacidad transitoria.
 Mayores que han visto reducidas sus habilidades a
consecuencia de la edad.
Introducción

Herramientas de apoyo:
 Lector de pantalla
Interpreta la información de la pantalla del
ordenador y la proporciona a través de síntesis de
voz y línea braille.
Introducción

Herramientas de apoyo:
 Magnificador
Software cuya misión es aumentar el tamaño de los
elementos que aparecen en la pantalla del
ordenador.
Referencias

W3C (World Wide Web Consortium):

 Consorcio internacional que trabaja en la creación de
estándares Web. Su misión es ”Guiar la Web hacia su máximo
potencial a través del desarrollo de protocolos y pautas que
aseguren el crecimiento futuro de la Web”

WAI (Web Accessibility Initiative):

 Depende del W3C y su objetivo es facilitar el acceso de las
personas con discapacidad, desarrollando pautas de
accesibilidad, mejorando las herramientas para la evaluación y
abriendo nuevos campos en accesibilidad a través de la
investigación en este área.
Referencias

Pautas WCAG 1.0:

 Especificación desarrollada por el WAI, formada por 14 Pautas
Generales + 65 puntos de verificación (prioridades definidas en
tres niveles: tiene, debe o puede).
 Niveles de conformidad:
 A: Todos los puntos de verificación de prioridad 1 se
satisfacen.
 AA: todos los puntos de verificación de prioridad 1 y 2 se
satisfacen.
 AAA: todos los puntos de verificación de prioridad 1,2 y 3 se
satisfacen.
Referencias

Norma UNE 139803:2004:

 Norma española, basada en las WCAG 1.0 de la iniciativa WAI
del W3C.
 Establece 3 niveles de prioridad y se estructura en 7
categorías, a su vez divididas en requisitos, cada uno de los
cuales tiene asignado una prioridad en función de su
repercusión en la accesibilidad final.
 Existe una correspondencia directa entre los requisitos de esta
norma UNE y los puntos de verificación de las pautas WCAG
1.0 de la WAI.
Referencias

Pautas WCAG 2.0:

 Construidas sobre la experiencia y las aportaciones del público
relacionado con la accesibilidad.
 Son de aplicación en cualquier tecnología web (las WCAG 1.0
eran para HTML y CSS).
 Se organizan en 4 principios básicos o fundamentales:
Perceptibilidad, operabilidad, comprensibilidad y robustez.
 A su vez cada pauta se desarrolla en criterios de éxito (60 en
toal) o puntos de comprobación o verificación que determinan
el nivel de accesibilidad (A, AA, AAA).
Referencias

Pautas WCAG 2.0:

 Cada criterio de éxito puede enlazar con diversas técnicas.
 Tipos de técnicas:
 Suficientes: Si se sigue esta técnica se cumple con el
criterio para el elemento de que se trate.
 Complementarias o aconsejables: Ayudan a mejorar la
accesibilidad, pero que no garantizan el completo
cumplimiento de los criterios.
 Las técnicas incluidas en las WCAG 2.0 no se consideran
normativas ni obligatorias, sino que sólo recogen
recomendaciones de soluciones conocidas adaptadas a
diversas tecnologías, pero que no tienen por qué ser las únicas
posibles soluciones.
Referencias

WAI-ARIA:
 En la actualidad el uso de contenido Web dinámico ofrece
como resultado aplicaciones web más ricas e interactivas, pero
menos accesibles.
 ARIA (Accessible Rich Internet Applications), es una
especificación del W3C que define cómo hacer accesibles
contenidos y aplicaciones web con contenido dinámico.
Ejemplo:
 Un usuario de JAWS y entra en una página web con una
sección dinámica que se actualiza constantemente con noticias
(región activa). Si esta región está marcada con una etiqueta
ARIA, JAWS anunciará los cambios que se producen, sino no.
Marco legislativo

Ley 34/2002, de 11 de julio de 2002, de

Servicios de la Sociedad de la Información y
Comercio Electrónico (LSSICE):
 Las Administraciones Públicas adoptarán las medidas
necesarias para que la información disponible en sus
respectivas páginas de Internet pueda ser accesible a
personas con discapacidad y de edad avanzada de
acuerdo con los criterios de accesibilidad al contenido
generalmente reconocidos antes del 31 de diciembre de
2005. Asimismo, podrán exigir que las páginas de Internet
cuyo diseño o mantenimiento financien apliquen los
criterios de accesibilidad antes mencionados.
Marco legislativo

Ley 51/2003, de 2 de diciembre de 2003, de

Igualdad de Oportunidades, No
Discriminación y Accesibilidad Universal de
las personas con discapacidad (LIONDAU):
 Esta Ley establece la obligación gradual y progresiva de
que todos los entornos, productos y servicios deben ser
abiertos, accesibles y practicables para todas las
personas.
Marco legislativo

Real Decreto 1494/2007:

 En la disposición adicional quinta se regulan los Criterios
de accesibilidad aplicables a las páginas de internet de las
administraciones públicas o con financiación pública y se
establecen los plazos de cumplimiento.
 La información disponible en las páginas de Internet de las
administraciones públicas deberá ser accesible a las
personas mayores y personas con discapacidad, con un
nivel mínimo de accesibilidad que cumpla las prioridades 1
y 2 de la Norma UNE 139803:2004.
Marco legislativo

Ley 56/2007, de 28 de diciembre, de Medidas de

Impulso de la Sociedad de la Información:
 A partir del 31 de diciembre de 2008, las páginas de Internet de las Administraciones
Públicas satisfarán, como mínimo, el nivel medio de los criterios de accesibilidad al
contenido generalmente reconocidos. Excepcionalmente, esta obligación no será
aplicable cuando una funcionalidad o servicio no disponga de una solución
tecnológica que permita su accesibilidad.
 Las Administraciones Públicas exigirán que tanto las páginas de Internet cuyo diseño
o mantenimiento financien total o parcialmente como las páginas de Internet de
entidades y empresas que se encarguen de gestionar servicios públicos apliquen los
criterios de accesibilidad antes mencionados. En particular, será obligatorio lo
expresado en este apartado para las páginas de Internet y sus contenidos de los
Centros públicos educativos, de formación y universitarios, así como, de los Centros
privados que obtengan financiación pública.
 Las páginas de Internet de las Administraciones Públicas deberán ofrecer al usuario
información sobre su nivel de accesibilidad y facilitar un sistema de contacto para
que puedan transmitir las dificultades de acceso al contenido de las páginas de
Internet o formular cualquier queja, consulta o sugerencia de mejora.
Herramientas

 Validadores de la sintaxis del código.

 Validadores automáticos de
accesibilidad.
 Evaluación de color y contraste.
 Barras de herramientas.
Herramientas

Validadores de la sintaxis del código:

 Se requiere un código bien formado en las páginas web.
 La web está llena de páginas definidas incorrectamente
pero que se visualizan de una forma correcta en los
navegadores.
Aplicaciones para la revisión de la sintaxis:
 Validador (X)HTML de W3C:
http://validator.w3.org/
 Validador de CSS de W3C:
http://jigsaw.w3.org/css-validator/
Herramientas

Validadores automáticos de accesibilidad:

 Analizan las páginas en base al cumplimiento de estándares de
pautas de accesibilidad.
 No suplen la necesidad de realizar una revisión manual
Validadores:

TAW:
 Herramienta de evaluación automática de accesibilidad de habla
hispana más extendida (familia de herramientas).
 Incluye una versión beta que permite también revisar el contenido de
una página web en base a las nuevas pautas WCAG 2.0.
Herramientas

Funcionamiento de TAW:
 Introducir una dirección URL en TAW (http://www.tawdis.net/)
 El sistema analiza la página y genera un informe con
información sobre el resultado del análisis.
 El informe muestra una visualización de la página analizada
insertando iconos de alerta sobre las ubicaciones de la página
en las cuales detecta problemas de accesibilidad.
 Estos iconos representan los tres niveles de prioridad.
 También muestra los problemas a revisar manualmente (signo
de interrogación).
Herramientas

Otras alternativas a TAW:

 HERA:
http://www.sidar.org/hera/

 WAVE (Web Accessibility Evaluation Tool):

http://wave.webaim.org/

 Achecker (Web Accessibility Checker):

http://achecker.ca/checker/index.php

 Etre:
http://www.etre.com/tools/accessibilitycheck/

 Stanford Web Accessibility Checker:

http://www.stanford.edu/group/accessibility/cgi-bin/accessibilitychecker/checker/index.php
Herramientas

Evaluación de color y contraste:

 Para usuarios de baja visión es un requisito de accesibilidad
conseguir un buen contraste entre el fondo y el texto.
http://dev.sencha.com/deploy/ext-4.0.0/examples/themes/index-access.html

Colour Contrast Analyser:

 Comprueba las combinaciones de color de primer plano y color
de fondo.
http://www.visionaustralia.org.au/info.aspx?page=628
 Se considerará como válida la combinación de color de primer
plano y fondo siempre y cuando supere los umbrales mínimos.
Herramientas

Barras de herramientas:
 Facilitan la revisión de accesibilidad:
 Web Accessibility Toolbar (Internet Explorer):
http://www.visionaustralia.org.au/info.aspx?page=614
 Firefox Accessibility Extension:
https://addons.mozilla.org/es-ES/firefox/addon/1891
 Internet Explorer Developer Toolbar:
http://bit.ly/mv9OY1
Comprobación de la accesibilidad

 Definir el alcance de páginas a comprobar:

 Si hay muchas, seleccionar las más
representativas.
 Análisis automático de accesibilidad.
 Análisis manual de accesibilidad. Necesario:
 Conocer las directrices de accesibilidad.
 Saber cómo utilizan los usuarios las ayudas
técnicas (magnificador, revisor de pantalla,…).
 Tener alguna experiencia en diseño y desarrollo de
páginas web.
Comprobación de la accesibilidad

 Posibles problemas en la revisión con ayudas

técnicas: Lector de Pantalla y Magnificador:
 Oir contenidos no visibles en la pantalla.
 Errores tipográficos y de acentuación.
 Secuencia correcta de lectura que no cambia el
significado del contenido.
 Poder consultar y operar con los contenidos de la
página desde el teclado del ordenador.
 Contenidos alternativos introducidos para los
elementos no textuales adecuados.
Comprobación de la accesibilidad

 Utilizar distintos navegadores de Internet

 Revisar el uso del color en la página:
 Averiguar si se brinda información basándose
únicamente en el color.
 Revisar el contraste entre fondo y texto o imágenes
que contienen texto.
 Revisar las páginas con las imágenes
deshabilitadas.
Principales barreras

 Acceder al contenido u operar con la aplicación web desde el teclado

del ordenador.
 Ausencia de textos alternativos para elementos no textuales
(imágenes, botones gráficos, objetos programados, etc).
 Formularios y tablas de datos complejos y difíciles de interpretar.
 Utilización inadecuada de elementos estructurales en las páginas.
 Falta de estructuración en sus contenidos. Ausencia de encabezados
de sección.
 Sitios con pobre contraste de color o con información basada en el
color.
 Actualización automática de contenidos sin intervención del usuario.
 Presencia de Captchas en los que no se aporta solución accesible.
Enlaces de interés

 Guía de estándares Web:

http://www.inteco.es/Accesibilidad/Formacion_6/Manuales_y_Guias/guia_estandares

 Guías Prácticas de Comprobación de la

Accesibilidad Web:
http://www.inteco.es/Accesibilidad/Formacion_6/Manuales_y_Guias/guias_comprobacion

 Guía de Accesibilidad en Flash:

http://www.inteco.es/Accesibilidad/Formacion_6/Manuales_y_Guias/guia_accesibilidad_flash

 Guía de Accesibilidad en documentos PDF:

http://www.inteco.es/Accesibilidad/Formacion_6/Manuales_y_Guias/guia_accesibilidad_en_pdf
Fin

¿Preguntas?