Introducción a la accesibilidad web

Martin Baldassarre y Claudio Segovia

Conceptos

Accesibilidad

Proporcionar flexibilidad para acomodarse a las necesidades de cada usuario y sus preferencias.

Accesibilidad Web

• Wikipedia:
  Capacidad de acceso a la Web y a sus contenidos por todas las personas, independientemente de la discapacidad (física, intelectual o técnica) que presenten.
• Paula Maciel:
  Que los contenidos sean configurables por el usuario, controlables por el usuario, comprensibles para el usuario y compatibles con el dispositivo o aplicación que tenga el usuario.
• Consorcio W3:
  Acceso de todos a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

Diseño centrado en el usuario

Filosofía y proceso de diseño en el que las necesidades, los deseos y las limitaciones del usuario final de una interfaz o documento toman una atención y relevancia considerable en cada nivel del proceso de diseño.

Principios del diseño universal

1. Igualdad de uso: El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades.
2. Flexibilidad: El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.
3. Simple e intuitivo: El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración del usuario.
4. Información fácil de percibir: El diseño debe ser capaz de inrtercambiar información con usuario, independientemente de las condiciones ambientales o las capacidades sensoriales del mismo.
5. Tolerante a errores: El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas.
6. Escaso esfuerzo físico: El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7. Dimensiones apropiadas: Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad.

Beneficios del diseño para todos

Algunos beneficios

• Incrementar la cuota de mercado y alcance de audiencia
  • Mejorar la usabilidad para los visitantes no-discapacitados y los discapacitados
  • Soporte para niveles de baja alfabetización
  • Mejorar los listados de los motores de búsqueda y el descubrimiento de recursos
  • Soporte para la Web Semántica
  • Contenido reutilizable por múltiples formatos o dispositivos
  • Incrementa el soporte para la internacionalización
  • Asistencia al acceso de los usuarios con reducido ancho de banda
• Mejorar la Eficiencia
  • Reduce el mantenimiento del sitio
  • Mejoras del motor de búsqueda del sitio
  • Reutilización de contenido
  • Gestiona la carga del servidor
  • Gestiona el ancho de banda del servidor
• Demostrar responsabilidad social
• Reducir la responsabilidad legal

Guía breve para crear sitios web accesibles

Pautas

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 de tipo cliente y texto para las zonas activas.
3. Multimedia. Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.
4. Enlaces hipertextuales. 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. Gráficas y esquemas. Resuma o use el atributo longdesc.
7. Scripts, applets y plug-ins. Ofrezca contenido alternativo si las funciones nuevas no son accesibles.
8. Marcos (Frames). Use el elemento noframes y títulos con sentido.
9. Tablas. Disponga que puedan leerse línea a línea. Resuma.
10. Revise su trabajo. Verifique. Use las herramientas, lista de comprobación y pautas de www.w3.org/TR/WCAG.

Aplicación práctica de la Guía Breve de Accesibilidad: http://www.inclusiondigital.net/compren/

Barreras de accesibilidad

Definición de barrera

Obstáculo que impide o dificulta la realización de una determinada tarea o actividad, afectando de esta manera a la plena integración social de esa persona.

Tipos de barreras

Existen dos tipos de barreras de accesibilidad:

• Presentes en el entorno físico (en la naturaleza).
• Creadas artificialmente por la sociedad (psicológicas, culturales, arquitectónicas, urbanísticas, de comunicación e información).

Relacionadas con la discapacidad del usuario

• Ceguera, que navegan con lectores de pantalla o navegadores parlantes como JAWS, PwWebSpeak, Orca, Home Page Reader o terminales Braille, entre otros.
• Problemas de visión (daltonismo, miopía, etc.) que usan magnificadores de pantalla o navegan en ambientes con deficiente iluminación.
• Problemas de audición, o que no tiene placas de sonido, o parlantes, o que navegan en ambientes muy ruidosos (fábricas, escuelas, en la calle, etc.) o muy silenciosos (bibliotecas, hospitales, en compañía de bebés o enfermos, etc.).
• Problemas motrices, que le impidan usar el mouse (o ratón) y/o el teclado, o que no tengan mouse (terminales UNIX, telefonía móvil, PDA’s, iPhone, smartphones, Blackberry, etc.) o teclado (WebTV, terminales callejeros o kioscos informáticos, etc.).
• Problemas cognitivos (dislexia, diversos grados de retraso mental o con limitaciones de aprendizaje). También hay personas que tiene un nivel intelectual “normal” en diversos aspectos pero presentan problemas en aspectos concretos, como por ejemplo, los que tienen mucha capacidad verbal pero baja inteligencia numérica o espacial.
• Personas que, debido a su edad, no poseen todas sus capacidades (físicas y/o mentales) en su mejor nivel.
• Problemas debido a su educación formal, con analfabetismo, o con pocos años de formación, o que hablen un idioma diferente.

Relacionadas con la infraestructura del usuario

• Computadoras antiguas, como monitores monocromos, poca memoria RAM para ejecutar software "pesado", poco espacio en disco rígido que le impida actualizar software o tener un archivo de intercambio (swap) grande, procesador antiguo que impide ejecutar algunas instrucciones que exigen las últimas versiones de software, etc.
• Software antiguo (como MS-DOS, PC-DOS, DR-DOS, Windows 3.1, OS/2 Warp, etc.).
• Software muy moderno.
• Hardware no estándar, como WebTV, teléfonos celulares, iPhone, smartphones, palmtops, terminales Braille, terminales UNIX, PDA’s , Blackberry, etc.
• Conexiones lentas.
• Conexiones costosas.
• Conexiones y equipos ajenos, como los que navegan desde locutorios, telecentros, cibercafés, máquinas de amigos o desde el trabajo, etc., y que, por lo tanto, no pueden cambiarles la configuración o agregarles componentes, sean de software o hardware.

Herramientas

Validadores automáticos

• TAW (Test de Accesibilidad a la Web) http://www.tawdis.net
• HERA (Hojas de Estilo para la Revisión de la Accesibilidad) http://www.sidar.org/hera
• Examinator http://www.accesible.com.ar/examinator/
• Cinthia Says http://www.contentquality.com/
• Total Validator http://www.totalvalidator.com/validator/ValidatorForm
• WAVE http://wave.webaim.org/
• OCAWA (Operational Control and Analysis for Web Accessibility -Control Operacional y Análisis para la Accesibilidad Web-) http://www.ocawa.com

Revisores

• De HTML y XHTML del Consorcio W3 http://validator.w3.org/
• De CSS del Consorcio W3 http://jigsaw.w3.org/css-validator/
• De RSS y Atom del Consorcio W3 http://validator.w3.org/feed/
• De enlaces rotos del Consorcio W3 http://validator.w3.org/checklink
• De Schema de XML del Consorcio W3 http://www.w3.org/2001/03/webdata/xsv
• De RDF del Consorcio W3 http://www.w3.org/RDF/Validator/

Simuladores

• Graybit http://graybit.com/main.php
• Lynx Viewer http://www.delorie.com/web/lynxview.html
• Photosensitive Epilepsy Analysis Tool (PEAT) http://trace.wisc.edu/peat/
• Prueba de Frecuencia de Parpadeo para imagenes GIF http://tools.webaccessibile.org/test/check.aspx
• Readability index calculator http://www.standards-schmandards.com/exhibits/rix/index.php
• WebAIM Low Vision Simulation http://www.webaim.org/simulations/lowvision.php

Extensiones de Firefox

• HTML Validator https://addons.mozilla.org/firefox/249/
• Web Developer https://addons.mozilla.org/firefox/60/
• Fang Screen Reader https://addons.mozilla.org/firefox/402/
• Yellowpipe Lynx Viewer Tool https://addons.mozilla.org/firefox/1944/

Metodología de revisión

Una posible metodología puede ser...

1. Revisar la página con, al menos, un validador automático de accesibilidad.
2. Revisar manualmente los posibles problemas de accesibilidad que no puedan ser testeados por los validadores automáticos.
3. Navegar la página con distintos navegadores, desde diversos sistemas operativos (incluyendo navegadores visuales, parlantes, textuales, WebTV, teléfonos celulares, PDA’s, etc.) y desde distintos hardware.
4. Revisar el uso del color en la página.
5. Navegar la página con las imágenes deshabilitadas.
6. Navegar la página con el sonido desconectado.
7. Navegar la página con Javascript deshabilitado.
8. Navegar la página con applets de Java deshabilitado.
9. Navegar la página sólo con el teclado, sin el mouse.
10. Revisar el código de la página para ver si es válido.
11. Navegar la página con conexiones lentas.
12. Navegar la página con computadoras antiguas.
13. Por último, pero (obviamente) no menos importante, pedirle a personas con diversos problemas de discapacidad (visuales, motrices, cognitivos) que naveguen la página.

Problemas de accesibilidad

Brindar textos alternativos

• Imágenes, y todos los elementos no textuales en general.
• Applets u otros objetos programados.
• Scripts (Javascript, Vbscript).
• Arte ASCII.
• Videos y presentaciones multimedia.

Usos y abusos de color

• Daltónicos.
• Usuarios con monitores monocromos.
• PDA’s con bajas definiciones de color.

Desconocimiento de lenguajes de marcado

• Uso de unidades de medida absolutas en vez de relativas (en texto, tablas, marcos, etc.).
• Uso de tablas en vez de hojas de estilo para maquetar.
• Uso de imágenes en vez de MathML.

El usuario puede no hablar como uno

• iIdentificar los cambios de idioma en una página.
• Aabreviaturas y acrónimos deben tener una aclaración de su significado que permita informar a las personas que lo desconozcan.
• Definir el idioma principal en la página.

Mal uso de tablas

Captura de pantalla de un sitio hecho con tablas.

El uso de "Lo último" (1)

Captura de pantalla de un sitio hecho con Flash.

El uso de "Lo último" (2)

Captura de pantalla de un sitio hecho con Flash.

Que el tiempo lo maneje el usuario

• Imágenes parpadeantes o destellantes pueden provocar ataques fotosensitivos a personas que sufren epilepsia.
• Contenidos con movimiento pueden provocar confusión en usuarios con problemas de discapacidad visual o cognitiva si no se les ofrece un mecanismo para detener dicho movimiento.
• Páginas que se actualizan automáticamente generan problemas a personas con problemas de discapacidad de lectura, cognitiva o de aprendizaje, a las personas que usan lectores de pantalla o navegadores parlantes y a ciertas personas de edad avanzada que han perdido una parte de la velocidad de lectura.

Uno mismo no es ejemplo de universalidad

Se debe ofrecer independencia de dispositivo, como por ejemplo:

• No todos navegan con mouse.
  • Orden lógico de tabulación.
  • Atajos de teclado.

Ventanas emergentes

Captura de pantalla de una ventana emergente en un sitio.

Uso accesible de formularios (1)

Formulario sin opciones accesibles.

Uso accesible de formularios (2)

Formulario con opciones accesibles.

Marcos (Frames)

Usando marcos...

1. Se deshabilita la opción de "volver atrás" del navegador, algo que genera confusión en los usuarios que no pueden ver la pantalla.
2. Navegadores antiguos pueden no "comprender" las etiquetas frame y frameset, que definen los marcos, por lo que la estructura de la página "se desarmará".
3. Muchas páginas con marcos ofrecen la opción de abrir ventanas nuevas (o “emergentes”), generando conflictos a usuarios de navegadores parlantes o lectores de pantalla o que tengan configurado su navegador (por razones de seguridad) para que no abra este tipo de ventanas nuevas.
4. Los marcos no son aplicables a dispositivos pequeños como los teléfonos celulares.

Información adicional: Metadatos

• Metadatos del encabezado del archivo (<head>).
• Identificación clara de destino de enlaces.
• Ofrecer tabla de contenidos o mapa de sito.
• Ofrecer un marcado sintáctico (títulos, listas, párrafos, enfatizados, etc.) que permita una mejor navegación al usuario no vidente.
• Ofrecer alternativas a abreviaturas y acrónimos.

Detalle de metadatos en una página con buen marcado.

Lenguaje claro

Para usuarios con problemas de discapacidad cognitiva, de aprendizaje o de atención, con navegación por celulares, como las que no hablan nuestro idioma tendrán problemas con las páginas web que no tengan un lenguaje claro y sencillo, se pide:

• Cuidar que los títulos y el texto de los enlaces sean lo más claros y exactos posibles.
• Especificar el tema de las oraciones o párrafos al principio de los mismos.
• Limitar cada párrafo a una idea principal.
• Evitar los giros idiomáticos, las expresiones y vocabularios no familiares.
• Si se emplean palabras familiares con significados especiales, proporcionar explicaciones de las mismas.
• Evitar la voz pasiva (Carmen es amada por Luis, que sin voz pasiva sería: "Luis ama a Carmen".).
• Evitar estructuras complejas en las oraciones.
• En los enlaces usar frases concisas pero con suficiente significado para ser entendidas aún fuera de contexto.
• Revisar la ortografía.

Alternativas al texto

• Iconizar.
• Ofrecer videos de lenguas de señas.

En resúmen

Algunas frases cortas

• Tengamos en cuenta al otro
• No dar por sentado nada
• Esforcémonos en pensar alternativas
• La accesibilidad es un camino, no un fin

Recordemos dos cositas:

• "La accesibilidad es un derecho, no un privilegio." (William Loughborough)
• "El poder de la Web está en su universalidad. Que todo el mundo pueda acceder, a pesar de la discapacidad, es un aspecto esencial." (Tim Berners-Lee, Director del W3C e inventor de la "World Wide Web")

Muchas gracias

Martín Baldassarre
martinb@sidar.org
mbaldassarre@gmail.com
Claudio Segovia
claudiosegovia@sidar.org
claudiosegovia@gmail.com
Libro "Accesibilidad e Internet": http://www.inclusiondigital.net/albergue/accesibilidad.pdf
Archivo adicional de referencias [Acrobat] [Open Office] [Word]