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 la Web 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 oneAccesibility

JIS X 8341-3-2004

DisabilityDiscrimination Act

(1995)

State of Kansas Web Accessibility

Requirements Implementation

Guidance Version 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 la Web)


DF visual

ceguera

visiónparcial

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últipleRelacionadas

con el envejecimiento


Hagamos el esfuerzo durante la presentación



http://www.webaim.org/simulations/screenreader.php

Daltonismo A la izquierda filtro

“protanopia” (verde-rojo)

A la derecha filtro“tritanopia” (azul-amarillo)

www.michelf.com/img/icon/sim-daltonism-512.jpg. Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

http://www.michelf.com/img/icon/sim-daltonism-512.jpg�





Glaucoma

Cataratas

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


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


http://www.stlukeseye.com/Conditions/MacularDegeneration.asp�

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



http://www.webaim.org/simulations/distractability-sim.html

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 sitio Web

Diversidad Funcional intelectual Textos largos y excesivamente complejos sin necesidad Falta de gráficos que ayuden a la comprensión del texto Falta de claridad en la organización de un sitio Web

Deterioro de la memoria Falta de claridad en la organización de un sitio Web

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 fijarobjetivo en tareascercanas 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 from W3C Web Accessibility Initiative (WAI) www.w3.org/WAI/Traducción: Marino Linaje

http://www.w3.org/WAI/�



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óny completado de tareas se veafectada 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,… (paraindicar 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”/>Marino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

(Algunos ejemplos)


Zoom Text http://www.youtube.com/watch?v=_YpNrOkW0Mw

Lectores de pantalla http://www.youtube.com/watch?v=noPhYemsp7c

Ejemplo Apoyo a D.F. motriz http://www.youtube.com/watch?v=kGt9yzWacuw


http://www.youtube.com/watch?v=_YpNrOkW0Mw�

http://www.youtube.com/watch?v=kGt9yzWacuw&feature=related�

http://www.youtube.com/watch?v=noPhYemsp7c�

http://www.youtube.com/watch?v=kGt9yzWacuw&feature=related�

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 proyectos Web,…)


Tres pilares fundamentales:

1. Claridad de contenido ‘muy importante’ 88%

2. Buena navigación ‘muy importante’ 65%

3. Enlaces claros y autoexplicativos ‘muy importante’ 63%

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 automatizadas3. 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] el Website 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 escritorioweb 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áginasen un corto periodo de tiempo

Reportes automáticos Amplio nº de tareas

repetitivas y sistemáticasque realizan correctamente

Las más avanzadas: Incluir o excluir guías

específicas de accesibilidad

DESVENTAJAS

Elementos que deberíanpasar 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.


• Web Accessibility Toolbar

• WAVE (Tb. Como Extension Firefox)

• Deque WorldSpace

• Functional Accessibility Evaluator (FAE)

• HiSoftware Cynthia Says

• Total Validator

• Paciello Group WAT

• Web Accessibility Inspector

• Hera-XP

• W3C Validator

• TAW…


http://webaccessibility.gmu.edu/validators.html�

No puedenchequeartodos los requisitosfuncionales de leyes o estándares(e.g., Secc. 508 o WCAG 2.0 )


Puede ser más inteligente (o no )

Un error se propagarápidamenteLocalizado se arreglaen un solo lugar


VENTAJAS

Localizar errores no automatizables [hoy día]

Encontrar erroresrecomendar 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 representante W3C 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 del W3C WCAG

1.0


http://ct.ctic.es/web/export/sites/default/es/CTICalDia/concursos/documentos/UNE_139803x2004.pdf�

http://ct.ctic.es/web/export/sites/default/es/CTICalDia/concursos/documentos/UNE_139803x2004.pdf�



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 accesibilidad Web sobre representativas y al menos una sobre el

website entero

Evaluar manualmentepáginas

representativas

• Aplicar la lista de revisión al conjunto de páginas representativas


Examinarpáginas usando

navegadorgráfico

• Examinar representativo con navegador gráfico: seleccionar al menos 3 configuraciones diferentes: diferentes navegadores, versiones y plataformas y hacer los siguientes ajustes

Examinar laspáginas con

navegadoresespecí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 identificadosRecomendar 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.htmlMarino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

PERCEPTIBLE

Alternativa textual a contenido no textual

Subtítulos y alternativas para

audio/video

Contenido adaptable y disponible para prod.

apoyo

Suficiente contrastepara hacer contenido

fácil de ver y oir

ROBUSTO

Maximizarla compatibilidad con navegadores y ayudas

técnicas

OPERABLE

Accesible porteclado

Evitar tareas con tiempo límite

Evitar causarconvulsiones

Ayudar a navegary localizarcontenido

COMPRENSIBLE

Textos legibles y comprensibles

Apareción y funcionamiento

previsible

Ayudar usuarios a corregir y

eliminar fallosMarino Linaje - Universidad de Extremadura - Homeria Open Solutions S.L.

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 paratecnologías relacionadascon HTML en muchosaspectos

WCAG 2.0

1.4.3 The visual presentation of text and images of text has a contrast ratio of at least 4.5:1…

Aplicable a muchastecnologí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 APIsservicios 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 realizandoevaluaciones 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 Linaje Trigueros [email protected]


Documents

Accesibilidad Web