Accesibilidad Web

Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

 Deficiencia: pérdida o anormalidad de una
estructura o función psicológica, fisiológica o
anatómica
 Discapacidad: restricción o ausencia
(causada por una deficiencia) de la capacidad
de realizar una actividad normalmente
 Diversidad Funcional

1. ¿Por qué preocuparnos por la Accesibilidad
Web?
 Vuestras 4 razones + importantes (resumida en una
palabra cada una)
 ¿por qué?
2. Principales tipos de Diversidad Funcional que
afectan a la interacción con laWeb
 Detectarlas y agruparlas (e.g., grupo D.F. visual:
ceguera…)
 Ej. de barreras en la Web (e.g., imágenes sin texto
asociado…)
▪ Al menos 2 por grupo D.F.

…
aquella en la cual las tecnologías que facilitan
la creación, distribución y manipulación de
la información juegan un papel importante en
las actividades sociales, culturales y
económicas

Section 508
EU Commision on
eAccesibility
JIS X 8341-3-2004
Disability
DiscriminationAct
(1995)
State of Kansas
WebAccessibility
Requirements
Implementation
GuidanceVersion
2.0 (Agosto, 10)
WCAG,WAI-
ARIA (W3C)
Ley de Igualdad de
oportunidades y no
discriminación de las
personas con
discapacidad
Ley contratos sector
público (2007)
Ley acceso electrónico
a servicios públicos
+Personas mayores

Origen: EuroStat
Year +65
años
2010 17%
2020 20%
2030 25%
2040 31%
2050 36%
Situación en España (más pronunciada en e.g., Japón)
De las personas en edad de
trabajar 1 de cada 6!
tiene un trastorno de salud o
discapacidad no temporal.
Entre los 25 paises del estudio,
cerca de 45 millones de
personas
(EuroStat 2002)
Situación en EU

(Que afectan a la interacción con laWeb)

DF visual
ceguera
visión
parcial
daltonismo
DF auditiva
sordera
sordera
parcial
DF física
DF motora
DF del habla
trastornos
múltiples
del habla
DF cognitivas y
neurológicas
dislexia y
disgrafía
trastorno
por déficit
de atención
trastorno
intelectual
deterioro de
la memoria
trastorno de
salud
mental
trastornos
convulsivos
DF múltiple
Relacionadas
con el
envejecimiento

Hagamos el esfuerzo durante la presentación

 Daltonismo
 A la izquierda filtro
“protanopia” (verde-
rojo)
 A la derecha filtro
“tritanopia” (azul-
amarillo)
www.michelf.com/img/icon/sim-daltonism-512.jpg.

Glaucoma
Cataratas
http://www.stlukeseye.com/ , http://www.lowvisionclub.com/

Degeneración macular
Retinopatía diabética
http://www.stlukeseye.com/Conditions/MacularDegeneration.asp ,
http://www.stlukeseye.com/Conditions/DiabeticRetinopathy.asp

 imagenes
 sin texto alternativo
 imágenes complejas (e.g., gráficas de barras) no descritas de otro modo
 video
 no descrito en texto o en audio
 tablas
 sin sentido cuando se leen línea a línea (e.g., para maquetar)
 frames
 carecen de alternativa "NOFRAME"
 tienen nombres no útiles para su identificación
 formularios
 que no pueden recorrerse lógicamente con el teclado
 campos no etiquetados o mal etiquetados
 usar colores como única marca de texto enfatizado
 mal contraste entre fondo y texto (e.g., en moviles)
 documentos no estándar que dificultan la lectura
 herramientas de autor
 que no permiten el uso de teclado para todas sus acciones
 que no usan la API del S.O.

 Falta de subtítulos o transcripciones de audio
 Webcasts, podcasts,…
 Transcribir un podcast de 20 min = 4,5€!!
 Falta de imagenes relacionadas con el texto
en páginas llenas de contenido textual
 Puede reducir la comprensión en personas cuyo
lenguaje principal puede ser el de signos
 Lenguaje excesivamente complejo cuando no
es idispensable
 Estímulos auditivos sin alternativas

 Páginas con tiempo límite de respuesta
 Cuestionarios online en, e-learning,…
 Comunicación por chat,…
▪ todo lo que requiera interacción en “tiempo real” en personas
sin trastornos
 Formularios que no se navegan en un orden
lógico
 Falta de navegación por teclado (tab, etc.)
 Excesivos “clicks” de ratón (3 max)
 Navegadores y herramientas de autor:
 que no soportan alternativas de teclado al uso del
ratón

 asistente virtual que asiste por chat de voz
 charlas y presentaciones online que solo
pemiten la interacción por medio de voz
 videochat no acompañado de entrada de
texto alternativo
 e.g., chat textual
 en algunas ocasiones puede ser insuficiente (e.g.,
multiples diversidades funcionales)

 Dislexia y disgrafía
 Textos largos y excesivamente complejos sin necesidad
 Falta de gráficos que ayuden a la comprensión del texto
 Soporte incompleto a la multimodalidad
 Trastorno por déficit de atención
 Elementos que distraen (animaciones, sonido…) que no se pueden apagar
 Falta de claridad en la organización de un sitioWeb
 Diversidad Funcional intelectual
 Textos largos y excesivamente complejos sin necesidad
 Falta de gráficos que ayuden a la comprensión del texto
 Deterioro de la memoria
 Trastornos de salud mental
 Elementos que distraen (animaciones, sonido…) que no se pueden apagar
 Web pages with absolute font sizes that do not enlarge easily
 Trastornos convulsivos
 Uso de frecuencias visuales y auditivas que pueden disparar las convulsiones

 Impacto:
 Decremento en la
habilidad para fijar
objetivo en tareas
cercanas
 Cambios en la
percepción y
sensibilidad al color y
al contraste
 Frecuencia:
 16% en personas
65 - 74 years
 19% en personas
75 – 84 years
 46% en personas
85+ years
Developed with material fromW3C Web Accessibility Initiative (WAI) www.w3.org/WAI/
Traducción: Marino Linaje

 Impacto:
 El audio puede ser
difícil de discernir
 Los tonos más altos
se pueden perder
 Frecuencia:
 47% en personas
61 - 80 años
 93% en persona
81+ años

 Impacto:
 Dificultad en el uso
del ratón y teclado
▪ Difficultad para interactuar
con elementos pequeños.
 Tensión ante tareas
“no ergonómicas”
 Frecuencia:
(más habituales)
 Artritis
▪ + 50% en personas
+ 65 años
 Temblores
▪ Hasta 20% en people
+ 65 años
 Parkinson
▪ 4% en personas
+ 85 años

 Impacto:
La navegación, comprensión
y completado de tareas se ve
afectada por:
 Problemas de memoria a
corto plazo
 Dificultad de concentración
 Dificultad tratando con
grandes volúmenes de
información
 Frecuencia:
(más habituales)
 Demencia:
▪ 1.4% en personas
65 - 69 años
▪ 24% of people 85+ yrs
 Deterioro cognitivo leve:
▪ 20% en personas
+ 70 años

 Chats y otros sistemas sin alternativa modal
 TODO EN MAYÚSCULAS o en cursiva,… (para
indicar emociones)
 …
pero lo + importante es…

BARRERAS
=ACCESS4All

 Multi-modalidad
 Móviles (pantallas pequeñas, contextos de mucha luz…),
Web-TV, kioskos, navegadores GPS,…
 texto/audio/video redudante puede proporcionar:
 Diferentes estilos de aprendizaje; acceso a la información
a través de otros idiomas distinto del original
 Las hojas de estilo pueden proporcionar:
 Adecuación del contenido a pantallas de diferentes
tamaños (móviles),....
 Subtítulos a todo el audio/audio+video:
 Mejora la indexación de contenidos (pagerank,…)
 Al usuario le facilita la búsqueda de contenido

Miércoles Jueves Viernes Sábado
Despejado Lluvia Lluvia Muxo Caló
 Imaginemos que es una página de previsión
meteorológica
 ¿Qué tiempo hará el jueves?
Miércoles Jueves Viernes Sábado
<img src=“rain.jpg” alt=“Lluvia”/>

(Algunos ejemplos)

 ZoomText
 http://www.youtube.com/watch?v=_YpNrOkW0Mw
 Lectores de pantalla
 http://www.youtube.com/watch?v=noPhYemsp7c
 EjemploApoyo a D.F. motriz
 http://www.youtube.com/watch?v=kGt9yzWacuw

 El Software de Apoyo no está limitado a productos
 También puede ser un servicio!!!
 Y para todos!!!

(Como técnicos, responsables de planificación de proyectosWeb,…)

Tres pilares fundamentales:
1. Claridad de contenido
 ‘muy importante’ 88%
2. Buena navigación
3. Enlaces claros y autoexplicativos
http://www.out-law.com/default.aspx?page=6314
(208 usuarios de internet con alguna discapacidad en UK)

 En los desarrollos:
 Seguir estándares (siempre que se pueda)
 Separar contentido, presentación y
comportamiento
 Utilizar markup semántico (Cabeceras, listas..) 
Los lectores de pantalla saben interpretarlos!
 Auditorías:
1. Fallos típicos en las auditorías (si la hay)
2. Uso de herramientas automatizadas
3. Revisión manual

 suelen ser planificadas sobre el terreno
 i3 (informales, incompletos e inexactos)
 Técnicas habituales:
 Al website se le pasan una serie de test
automatizados
▪ Se pueden pasar por alto errores graves (websites modernos)
 Lista de requisitos técnicos, se prueba [i3] elWebsite
con software de apoyo mediente test a medida
▪ No repetibles (son a medida y no planificados)
▪ A veces se repite la misma comprobación de manera
innecesaria

 Herramientas de escritorio  web
 parsean el marcado del documento para chequear
problemas potenciales de accesibilidad
 Las más avanzadas:
 usan “spiders” para recorrer todo el website
desde la página
 permiten automatizar la repetición de tests y sus
reportes

VENTAJAS
 Gran volumen de páginas
en un corto periodo de
tiempo
 Reportes automáticos
 Amplio nº de tareas
repetitivas y sistemáticas
que realizan correctamente
 Las más avanzadas:
 Incluir o excluir guías
específicas de accesibilidad
DESVENTAJAS
 Elementos que deberían
pasar el test y fallan, e.g.:
 <label> no dispobile para
un <input> tipo ‘hidden’
 La mayoría usan “spiders”
que tienden a fallar en:
 Autenticación
 Flujo guiado por formularios
 Páginas que usan JavaScript
para renderizar el contenido.

• WebAccessibilityToolbar
• WAVE (Tb. Como Extension Firefox)
• Deque WorldSpace
• Functional Accessibility Evaluator (FAE)
• HiSoftware Cynthia Says
• TotalValidator
• Paciello GroupWAT
• Web Accessibility Inspector
• Hera-XP
• W3CValidator
• TAW…

 No pueden
chequear
todos los
requisitos
funcionales de
leyes o
estándares
(e.g.,
Secc. 508 o
WCAG 2.0 )

 Puede ser más inteligente (o no  )
 Un error se propaga
rápidamente
Localizado se arregla
en un solo lugar

VENTAJAS
 Localizar errores no
automatizables [hoy día]
 Encontrar errores 
recomendar soluciones
 Configurar Soft/Hard
 Usar Software de apoyo en
simulaciones de color,
zoom,…
DESVENTAJAS
 Depende de la expertise
 Costoso en recursos
 Especialmente tiempo
 A veces se revisan
innecesariamente cosas ya
revisadas de manera
automática
 A veces involuntariamente

 Fundacionctic  representanteW3C en
España
 certificación está basada en la norma UNE
139803:2004 desarrollada en colaboración con el
European Software Institute y AENOR
▪ tiene por referencia las especificaciones delW3CWCAG
1.0

Determinar ámbito de
evaluación y objetivo
a cubrir
• (e.g., Sección 508,…)
• Seleccionar páginas representativas (+ visitadas, variedad en layout y funcionalidad)
• Si dinámicas: evaluar plantillas y contenido por separado y después en representativas
• Identificar and preparar la evaluación automática y semi-automatica del website entero (o sección)
Usar herramientas de
accesibilidad Web
• Validar marcado (sintáxis y estilo) usando todos los validadores aplicables sobre representativas
• Usar al menos dos herramientas de accesibilidadWeb sobre representativas y al menos una sobre el
website entero
Evaluar manualmente
páginas
representativas
• Aplicar la lista de revisión al conjunto de páginas representativas

Examinar
páginas usando
navegador
gráfico
• Examinar representativo con navegador gráfico: seleccionar al menos 3 configuraciones diferentes:
diferentes navegadores, versiones y plataformas y hacer los siguientes ajustes
Examinar las
páginas con
navegadores
específicos
• Examinar representativo con un navegador de texto y otro de voz y comprobar:
• Contenido y funcionalidad equivalentes y presentadas en un orden correcto
Leer y evaluar el
contenido de las
páginas
• Sobre el grupo representativo examinar: ¿es el texto claro y simple para el proposito del website?

 Resumir y documentar lo encontrado
 Resumir cualquier problema y buenas prácticas
identificada para cada tipo de página y URL, así
como el método por el que fueron identificados
Recomendar pasos a seguir, e.g.,:
▪ Reparar las barreras de accesibilidad
▪ Explotar los aspectos positivos del sitio
 Mantenimiento y monitorización
 Incluir usuarios en la evaluación del website

http://www.nics.gov.uk/acc/developers/intro/accessibilityprimer_4.html

PERCEPTIBLE
Alternativa textual a
contenido no textual
Subtítulos y
alternativas para
audio/video
Contenido adaptable y
disponible para prod.
apoyo
Suficiente contraste
para hacer contenido
fácil de ver y oir
ROBUSTO
Maximizar
la compatibilidad con
navegadores y ayudas
técnicas
OPERABLE
Accesible por
teclado
Evitar tareas con
tiempo límite
Evitar causar
convulsiones
Ayudar a navegar
y localizar
contenido
COMPRENSIBLE
Textos legibles y
comprensibles
Apareción y
funcionamiento
previsible
Ayudar usuarios a
corregir y
eliminar fallos

WCAG 1.0
 2.2 Ensure that foreground
and background color
combinations provide
sufficient contrast when
viewed by someone having
color deficits…
 Más clara para
tecnologías relacionadas
con HTML en muchos
aspectos
WCAG 2.0
 1.4.3The visual
presentation of text and
images of text has a
contrast ratio of at least
4.5:1…
 Aplicable a muchas
tecnologías
- actuales, futuras, no-W3C

Concepto Web 1.0 Web 2.0
Quiénes publican Los productores de los sitios productores y usuarios
Información Centralizada Dispersa en miles de sitios
Publicidad Sólo grandes presupuestos Cualquier persona
Dueño de la inform. El sitio web Los usuarios
Tecnología HTML 4.0 XHTML y CSS
Disponibilidad Al final de cada proyecto Beta perpetuo
Posibilidad de usar Ninguna Sitios con APIs
servicios de otros

 WCAG 2 difícil de
comprender y evaluar
 No sirve para las RIA
 Evaluación limitada a “capturas” estáticas de
la página
 Webapp corre en cliente y servidor
 No testea la estructura/comportamiento de
los nuevos componentes ricos
 No es sencillo auditar la accesibilidad de un
código JS (ofuscaciones y minificaciones…)
 No se están realizando
evaluaciones a lo largo
del ciclo de desarrollo!

 Estructuras más
semánticas para las
zonas funcionales (role)
 Mejora de la navegación
mediante el teclado
(tabindex )
 Controles complejos
más accesibles (rol,
state, aria-valuenow…)
 Identificar contenido
actualizado de forma
dinámica (aria-live).
$(document).ready(function() {
$('#logo').attr('role', 'banner');
$('#nav').attr('role', 'navigation');
$('#searchform').attr('role', 'search');
$('#main').attr('role', 'content');
$('#footer').attr('role', 'contentinfo');
$('.required').attr('aria-required', 'true');
});

 Principal problemática de JS:
 algunos navegadores [especiales] no tienen
soporte para JS o bien está deshabilitado
(seguridad,…)
▪ No es cierto que todos los usuarios discapacitados lo
tengan deshabilitado, las últimas estadísticas hablan de
75% activo
 Desarrollos que proporcionan funcionalidad en JS
no disponible de otro modo
 Este motivo origina que cierta páginas Web
no sean accesibles por todos los
navegadores

 No incluir JS directamente en el
documento.
 Entender JS como mejora, no como
necesidad.
 asegurar que la página funciona sin JS activado
 Revisar la disponibilidad de un objeto
antes de acceder a él.

EN HTML 4 EN HTML5
Datalist
Input type="number"

Marino LinajeTrigueros mlinaje@unex.es

Accesibilidad Web

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Accesibilidad Web

Similar a Accesibilidad Web (20)

Accesibilidad Web