PDF de programación - Accesibilidad en el Diseo de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

Sergio Luján Mora ([email protected])

Departamento de Lenguajes y Sistemas Informáticos, Universidad de Alicante, España

The power of the Web is in its universality. Access by everyone regardless of
disability is an essential aspect.

El poder de la Web está en su universalidad. El acceso por cualquier
persona, independientemente de la discapacidad que presente es un
aspecto esencial.

Tim Berners-Lee, Director del W3C e inventor de la World Wide Web

Accesibilidad web
http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso
de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño
Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con
la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas,
incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la
edad.

[…]

Pero la accesibilidad Web beneficia también a organizaciones y a personas sin discapacidad. Por
ejemplo, un principio básico de la accesibilidad Web es la flexibilidad con el objetivo de satisfacer
diferentes necesidades, situaciones y preferencias. Esta flexibilidad va a beneficiar a todas aquellas
personas que utilizan la Web, incluyendo personas que no tienen ninguna discapacidad pero que,
debido a determinadas situaciones, tienen dificultades para acceder a la Web (por ejemplo, una
conexión lenta), también estaríamos hablando de aquellas personas que sufren una incapacidad
transitoria (por ejemplo, un brazo roto), y de personas de edad avanzada.



Errores más comunes
http://webaim.org/projects/screenreadersurvey2/



CAPTCHA

Contenido Flash

Enlaces o botones sin sentido

Imágenes sin texto alternativo o
descripciones no adecuadas

Formularios complejos o difíciles

Falta de accesibilidad mediante el teclado

Pantallas o partes de la pantalla que cambian
de forma inesperada



Encabezados ausentes o no adecuados

Demasiados enlaces o elementos de
navegación
Tablas de datos complejas



Falta de enlaces "saltar al contenido
principal" o "saltar navegación"
Funcionalidad de búsqueda inaccesible o
ausente



Guía breve para crear sitios web accesibles
http://www.w3.org/WAI/quicktips/qt.es.htm

1. Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento

visual.

2. Mapas de imagen: Use el elemento map y texto para las zonas activas.
3. Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
4. Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo,

evite "pincha aquí".

5. Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS

para la maquetación donde sea posible.

6. Figuras y diagramas: Descríbalos brevemente en la pagina o use el atributo longdesc.
7. Scripts, applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no son

accesibles.

8. Marcos: Use el elemento noframes y títulos con sentido.
9. Tablas: Facilite la lectura línea a línea. Resuma.
10. Revise su trabajo: Verifique. Use las herramientas, puntos de comprobación y pautas de

http://www.w3.org/TR/WCAG/.





Pautas de accesibilidad al contenido en la web 1.0
http://tinyurl.com/wcag10

http://tinyurl.com/wcag10-es

1. Proporcione alternativas equivalentes para el contenido visual y auditivo.

 Los textos alternativos al contenido visual o auditivo benefician a personas ciegas
y/o sordas y a aquellos usuarios que deciden anular la descarga de imágenes y/o
sonidos (velocidad de acceso a Internet limitada).

 Los equivalentes no textuales, como pueden ser dibujos o vídeos, benefician a

personas analfabetas o con dificultades en la lectura.

2. No se base sólo en el color.

 Los textos y gráficos deben comprenderse sin necesidad de ver los colores. El
cumplimiento de esta pauta beneficia a personas con dificultades para ver los
colores y a usuarios que utilizan pantallas monocromáticas.

3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.

 El control de la presentación de los contenidos se debe realizar con hojas de estilo

en vez de con elementos y atributos de presentación. Con el uso de marcadores
de presentación los usuarios que utilizan software especializado tendrán
dificultades para entender la estructura de la página.

4. Identifique el idioma usado.

 Esta pauta implica usar marcadores que faciliten la pronunciación o interpretación
de texto abreviado o extranjero. Se debe indicar el idioma predominante en cada
página y marcar aquellas expresiones que se encuentren en otra lengua. De esta
forma, los sintetizadores de voz son capaces de cambiar su pronunciación en
función del idioma siempre y cuando se usen los marcadores apropiados.

5. Cree tablas que se transformen correctamente.

 Las tablas sólo se utilizan para marcar información tabular (tablas de datos). El uso

de tablas con otros fines crea dificultades para los usuarios que usan lectores de
pantalla. De igual forma, las tablas mal estructuradas (por ejemplo, sin
encabezados <th>) dificultan la lectura a usuarios que no pueden visualizar la
información de forma global: ciegos con lectores de pantalla y/o dispositivos
braille, deficientes visuales que utilizan magnificadores de pantalla o usuarios con
dispositivos de pantalla pequeña.

6. Asegúrese de que las páginas que incorporen nuevas tecnologías se transformen

correctamente.

 Una página basada en tecnologías modernas tiene que ser accesible al

desconectarla o al visualizarla con navegadores antiguos. El usuario puede
desconectar las tecnologías más modernas para ganar en rapidez de descarga. Sin
embargo, los contenidos deben permanecer accesibles.



7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes.

 El movimiento de los objetos o páginas, su parpadeo o actualización automática

deben ser controlados por el usuario. Las personas con discapacidades cognitivas
o visuales no pueden leer textos en movimiento. De forma similar, algunos
discapacitados físicos no pueden interactuar con objetos móviles (limitaciones
motrices).

8. Asegure la accesibilidad directa de las interfaces incrustadas.

 Cuando un objeto incrustado (flash, applet) tiene su "propia interfaz", ésta (al igual

que la interfaz de su navegador) debe ser accesible. Si la interfaz del objeto
incrustado no puede hacerse accesible, debe proporcionarse una solución
alternativa accesible.

9. Diseñe para la independencia del dispositivo.

 Esta pauta significa que el usuario puede interactuar con la aplicación de usuario o

el documento con un dispositivo de entrada (o salida) preferido - ratón, teclado,
voz, puntero de cabeza (licornio) u otro. Si, por ejemplo, un control de formulario
sólo puede ser activado con un ratón u otro dispositivo de apuntamiento, alguien
que use la página sin verla, con entrada de voz, con teclado o quien utilice otro
dispositivo de entrada que no sea de apuntamiento, no será capaz de utilizar el
formulario.

10. Utilice soluciones provisionales.

 Las alternativas accesibles sólo son imprescindibles hasta que los antiguos

navegadores y las ayudas técnicas operen correctamente.

11. Utilice las tecnologías y pautas W3C.

 Cuando no se pueda usar una tecnología W3C o al usarla se obtengan materiales

que no se transformen correctamente, se debe proporcionar una versión
alternativa. Se recomiendan las tecnologías W3C por incluir características
accesibles incorporadas, estar desarrolladas en un proceso abierto consensuado y
porque se utilizan como base para crear contenidos accesibles.

12. Proporcione información de contexto y orientación.

 Esta información ayuda al usuario a comprender páginas o elementos complejos.

Se deben agrupar los elementos y ofrecer información contextual sobre la relación
entre elementos. Esta acción es fundamental para discapacitados cognitivos y
visuales.

13. Proporcione mecanismos claros de navegación.

 Estos mecanismos facilitan a todos los usuarios la búsqueda de aquella

información que necesitan (fundamental para discapacitados cognitivos y
visuales). Ejemplos: mapa web, ayuda, barras de navegación, etc.

14. Asegúrese de que los documentos sean claros y simples.

 La utilización de lenguaje claro y simple facilita la comunicación de información. El

acceso a la información escrita puede ser difícil para discapacitados cognitivos o





con dificultad de aprendizaje y para personas sordas o que hablan en una lengua
extranjera. La comprensión de un documento también depende de la
maquetación de la página y de los gráficos (que deben llevar un texto alternativo).

Características accesibles en HTML/XHTML
http://reference.sitepoint.com/html/accessibility

Tablas

 table: el atributo summary

 th/td: el atributo scope

 th/td: el atributo headers

Formularios



Los elementos fieldset y legend

 El elemento label

Imágenes

 El atributo alt

 El atributo longdesc

En general

 El título de la página: el elemento title



Los encabezados de la página: los elementos h1-h6



Las listas de elementos: los elementos ul/ol



Accesibilidad web para diseñadores
http://webaim.org/resources/designers/

 Planifica la estructura de encabezados: Asegúrate de que todo el contenido y el diseño se

ajusta a una estructura lógica.





 Ten en cuenta el orden de lectura: El orden de lectura debe ser el mismo que el orden

visual.

 Proporciona un buen contraste: Ten especial cuidado con los tonos claros de gris, naranja

y amarillo.

 Usa texto verdadero siempre que sea posible: El texto verda