Qué es la accesibilidad web
La accesibilidad consiste en el acceso a la información sin limitación alguna por razón de discapacidad u otro tipo de deficiencia. Son muchas las personas que acceden a la información de nuestras páginas desde contextos muy diferentes ya que…
- Pueden tener problemas de oído, visión, movilidad.
- Pueden tener dificultades de lectura o comprensión.
- Quizás no pueden utilizar el teclado o el ratón.
- Pueden tener una pantalla pequeña o una conexión lenta.
- ...
La accesibilidad no es de interés únicamente para las personas con discapacidad, sino que mejora el acceso a la web en general. Por ello, aunque suele recibir un tratamiento específico, prefiero considerar la accesibilidad como una parte de la experiencia de usuario.
Las reglas internacionales de accesibilidad
La WAI (Web Accessibility Initiative) es el grupo de trabajo específico de la W3C para los temas de accesibilidad. Establece a nivel internacional un conjunto de pautas o reglas básicas de accesibilidad que deben cumplir los sitios web para resultar accesibles.
Existen tres niveles de accesibilidad establecidos por la WAI: nivel A (el mínimo), nivel AA y nivel AAA (el máximo).
Muchos diseñadores y desarrolladores web que se interesan por las reglas de la WAI pueden verse apabullados por su gran número y su profusa documentación.
Formarse exhaustivamente en accesibilidad web es un camino largo e intenso al que hay que dedicarle tiempo y esfuerzo.
Sin embargo, sin tener que ser un experto en accesibilidad podemos aplicar unas sencillas reglas que mejorarán considerablemente la accesibilidad de nuestras webs.
Reglas básicas de accesibilidad
Inspirándome en el Accessibility Cheatsheet de Moritz Gießmann (que recomiendo tener siempre a mano), lo que pretendo en este artículo es proporcionar una pautas de accesibilidad muy básicas. No encaminadas a conseguir un nivel de accesibilidad estándar determinado (A, AA o AAA) sino orientadas a conseguir un mínimo de accesibilidad elemental que facilite el acceso a los usuarios de tus webs y aplicaciones.
A nivel general, las barreras de accesibilidad principales que nos podemos encontrar en los usuarios son las siguientes:
- Sordera
- Sordoceguera
- Movilidad (entendida como la imposibilidad de utilizar el ratón y/o el teclado)
- Cognitiva
- Visión reducida
- Daltonismo
Teniendo en mente estas barreras, a continuación enumero nueve pautas que ayudarán a superarlas.
1. Utiliza HTML semántico
El uso semántico de las etiquetas HTML ayuda a los lectores de pantalla1 a interpretar correctamente la estructura y contenidos de la página.
Define el atributo lang del elemento <html>, utiliza una estructura jerárquica de encabezados, listas para lo que son listas, utiliza etiquetas <header>, <nav>, <footer>, etc.
2. Proporciona texto alternativo para las imágenes
Todo contenido que no sea texto resulta invisible para los lectores de pantalla. Proporciona un texto alternativo significativo (por ejemplo, mediante el atributo alt) para aquellos elementos no textuales (imágenes, gráficos, CAPTCHAs, etc.) de la página.
3. Añade labels a los elementos de formulario
Los elementos de formulario deben llevar una etiqueta <label> correctamente relacionada que los nombre adecuadamente para que resulten identificables por los lectores de pantalla.
El atributo placeholder no es una alternativa válida.
4. Muestra dónde está el foco
Los usuarios que navegan con el teclado necesitan tener resaltado el elemento que tiene el foco (:focus). Además de que todos los elementos interactivos deben poder coger el foco y poderse recorrer con el teclado en un orden lógico.
Por ejemplo, un element <button> puede coger el foco, pero un elemento <span> no.
5. El color del texto debe contrastar con el color de fondo
Se estima que los usuarios con visión reducida son casi tres veces más numerosos que los usuarios con ceguera total. Por ello, el color de texto debe contrastar lo suficiente con el color del fondo para que resulte fácilmente legible.
El nivel de contraste debe ser de al menos 4.5:1 para textos pequeños o de 3:1 para textos grandes (de más de 14px en negrita o de más de 18px si no llevan negrita).
Existen varias herramientas para medir el nivel de contraste. Por ejemplo Color Contrast Checker.
6. No transmitas información solo mediante el color
Los usuarios con visión reducida o daltonismo pueden tener serias dificultades para distinguir los colores. Por ello no se debe transmitir ninguna información solo mediante el color. Debe ir apoyada por información gráfica o textual que permita interpretarla correctamente en caso de ausencia de color.
Una manera sencilla de comprobar esta pauta es imprimir (puede ser en formato PDF) la página en blanco y negro y verificar que todo el contenido se entiende correctamente. Una alternativa más precisa es utilizar una aplicación como Color Oracle, que muestra en tiempo real lo que ven las personas con discapacidades comunes de la visión del color.
7. Escribe enlaces descriptivos
Los lectores de pantalla disponen de atajos de teclado que permiten a los usuarios navegar de manera secuencial por los enlaces de un sitio web. Por tanto, deben tener significado por si mismos y no depender del contexto que les rodea.
8. Los enlaces deben distinguirse del texto circundante
Garantiza que los usuarios que no pueden distinguir fácilmente entre colores puedan saber cuándo el texto es un enlace. Para ello se necesita que los vínculos cuenten con algún elemento decorativo que los diferencie (como el clásico subrayado) o, si se distinguen únicamente mediante el color, se precisa una relación de contraste de color de al menos 3:1 para distinguir el color del texto del enlace del color del texto circundante.
9. No se debe desactivar la posibilidad de hacer zoom
La página no debe incluir el parámetro user-scalable=no en la etiqueta <meta name="viewport">, ya que desactiva la posibilidad de que el usuario pueda hacer zoom. Una funcionalidad esencial para los usuarios con visión reducida.
Además, esta misma etiqueta <meta name="viewport">, no debe incluir el parámetro maximum-scale. El cual limita la escala máxima del nivel de zoom. En caso de que se incluya el parámetro, no debería estar establecido a un valor inferior a 5.
Reglas no tan básicas de accesibilidad
Hasta aquí hemos revisado algunas reglas básicas que son realmente muy sencillas de implementar. De esas que casi cuesta tanto tenerlas en cuenta como ignorarlas. Las dos siguientes requieren por el contrario bastante más esfuerzo de implementación. Si bien su beneficio para algunos usuarios es enorme.
1. Proporciona subtítulos de vídeo y audio
Debes tener presente que, para los usuarios con sordera, sordoceguera o visión reducida, es la única manera de poder acceder a los contenidos de audio y vídeo.
Existen programas automáticos de reconocimiento de voz que pueden facilitar la labor de generar los subtítulos.
2. Utiliza etiquetas ARIA para añadir semántica al HTML
La especificación ARIA ha sido elaborada por la WAI para cubrir las carencias semánticas que tiene el HTML. Por ejemplo, en HTML no existe una etiqueta para definir semánticamente algo tan habitual como un menú emergente.
Mediante los atributos ARIA se pueden definir estos significados semánticos para los elementos del DOM de nuestra página web. De modo que resulten accesibles para los dispositivos de asistencia de los usuarios con discapacidad.
Proporcionar un canal para el feedback
Independientemente de todas las medidas técnicas que se adopten, es vital facilitar a los usuarios un canal mediante el cual puedan facilitarnos feedback sobre posibles problemas de accesibilidad y otro tipo de sugerencias sobre la usabilidad de las aplicaciones.
Cómo comprobar la accesibilidad
Existen multitud de herramientas y técnicas para la auditoría de accesibilidad. Algunas muy complejas. Pero manteniendo la filosofía de este artículo de que la accesibilidad puede implementarse, en gran parte, de manera sencilla, recomendaré algunas técnicas básicas.
- Haz zoom al 200%. Utiliza el zoom de tu navegador. ¿Todo el texto sigue estando visible?
- Navega mediante el teclado. Comprueba que puedes acceder a todos los rincones de tu web utilizando solo las teclas de tu teclado: ←↑↓→ TAB, SHIFT+TAB, ESC y ENTER.
- Apaga el monitor y navega con un lector de pantalla. Por ejemplo, Voiceover para Mac o NVDA para Windows.
- Ejecuta la auditoria de accesibilidad de Google Chrome. Está en la pestaña “Audits” de las DevTools (accede pulsando F12).
- Navega con CSS desactivado. Y comprueba si la estructura de tu página tiene sentido.
Bola extra: Google es un usuario discapacitado
Uno de los “usuarios” a los que beneficia enormemente la accesibilidad es la araña del buscador de Google.
Su robot de indexación es completamente sordo, ciego y no puede usar el ratón para navegar. Por lo que implementar las pautas de accesibilidad antes comentadas te reportará considerables beneficios SEO (Search Engine Optimization).
-
Los lectores de pantalla (screen readers en inglés) son un software que permite la utilización del sistema operativo y las distintas aplicaciones mediante el empleo de un sintetizador de voz que "lee y explica" lo que se visualiza en la pantalla, lo que supone una ayuda para las personas con graves problemas de visión o completamente ciegas. ↩