Web Accessibility 1920x538
January 7, 2019

Nivel: Inicial

Accesibilidad en la Web y su Importancia

WebAccesibilidad

Si alguna vez has escuchado la palabra accesibilidad pero no sabes qué significa, o inclusive sí sabes que significa pero no tienes mucha información sobre por qué es tan importante en la web y cómo implementarlo, este post es el ideal. Hablemos desde el comienzo…

¿Qué es la accesibilidad?

La Accesibilidad no es más que la manera de adaptar un espacio físico (o digital) para una persona con discapacidad (puede ser física, visual, auditiva, cognitiva u otras) con la finalidad de facilitarle el acceso para que pueda así disfrutar de los beneficios y/o comodidades que disfruta el resto de la sociedad.

Inclusión Social

Se trata de una labor de inclusión social ya que gran parte de lo que hacemos o creamos hoy en día está pensado para el usuario común, pero esta no es la realidad del mundo en el que vivimos, es por ello que debemos garantizar la igualdad de oportunidades y sin discriminación para las personas con discapacidad.

Silla Accesible para que personas con discapacidad física puedan subir las escaleras

Silla Accesible para que personas con discapacidad física puedan subir las escaleras

Hablemos con cifras

Alrededor de 1.000 millones de personas en el mundo tienen algún tipo de discapacidad, esto es aproximadamente 15% de la población mundial. En Colombia, alrededor del 2,45% de la población (1.178.703). Esto nos deja un poco que pensar sobre la cantidad de usuarios que quizás no están siendo incluidos en los mismos beneficios que otros.

¿Por qué implementarlo en la Web?

Bueno, además de las razones anteriormente señaladas con respecto a la inclusión social, también es importante decir que hoy en día una web con accesibilidad es un requerimiento indispensable en algunos gobiernos, es decir, que una empresa con presencia digital puede recibir penalización si no cumple al menos con los requerimientos básicos de accesibilidad en su web. Otra razón muy importante es que empresas cómo Google le están apostando a esta implementación, de hecho tienen un curso muy bueno en Udacity que al final de este post lo agregaré, además de varios proyectos o iniciativas que promueven esta implementación.

¿Cómo hacer nuestra Web accesible?

Existe una documentación bastante completa sobre cómo (a nivel de código y testing) se puede implementar la accesibilidad en la web. Es una lista de pautas y técnicas que promueve la WAI (Web Accessibility Initiative), se conoce como el standard para la accesibilidad en la web y es basado en éste standard que debes guiarte para implementar la accesibilidad.

Algunas pautas y técnicas

Toda la página web debe ser leída a través de un Screen Reader

El Screen Reader es un programa o software que se encarga de leer todo el texto de la página web, esto permitirá que las personas con discapacidad visual puedan conocer el contenido de nuestra web y cómo navegar en ella (cuando hablo de navegar, me refiero a como recorrer toda la página sin el uso del mouse, es decir, usando solo el teclado). ¿Cómo se logra esto?, prácticamente todas las etiquetas HTML como h1, h2… son leídas por el Screen Reader, pero cuando se trata de imágenes en este caso debes añadir el atributo alt con un texto en las etiquetas de tipo <img>. También existen atributos en HTML como aria-label que te permiten agregan un texto en el cual puedes añadir información para que la persona con discapacidad visual entienda lo que hace un determinado componente y como se puede navegar en él, por ejemplo: Un slider, como puede el usuario navegar al siguiente slide o navegar al anterior haciendo uso solo de las teclas. Algunos ejemplos de Screen Readers son: Voice Over para Macbook, NVaccess y ChromeVox.

Ejemplo de VoiceOver

Ejemplo de VoiceOver

Nuestra Web debe ser semántica

Es decir, su lectura debería ser de izquierda a derecha y de arriba a abajo, por lo que al navegar en la página web el focus o lectura debería comenzar en el header de la misma y terminar en el footer. Esto se logra escribiendo un código semántico y ordenado a través de HTML.

Ejemplo de trazado en HTML

Ejemplo de trazado en HTML

Debe soportar prueba de Contraste

Esto significa que al invertir los colores de nuestra web, debería ser posible leer su contenido sin dificultad. Esta implementación por supuesto viene de la mano con los diseñadores de nuestra web, ya que son los que definen los colores o la marca de colores en primera instancia. Esta prueba permite que personas con daltonismo (dificultad para distinguir algunos colores) puedan acceder al sitio web. Para hacer esta prueba se puede utilizar un plugin para chrome, el cual puedes instalarlo aquí.

Prueba de contraste con la extensión de Chrome Contrast Analyzer

Prueba de contraste con la extensión de Chrome Contrast Analyzer

Todas las imágenes deben llevar el atributo alt

Las imágenes se pueden dividir entre Decorativas y No decorativas. Una imagen decorativa puede ser un ícono o simplemente una imagen que no aporte importancia al leer el contenido de la página web, para este caso el atributo alt de estas imágenes debe ir vacío, esto permitirá que el screen reader ignore la imagen ya que es irrelevante a la hora de navegar en la web. Por ejemplo:

Alt para imágenes decorativas

Alt para imágenes decorativas

En caso contrario sucede si la imagen no es decorativa, es decir, que sí aporta información importante para el lector, esto puede ser por ejemplo, una imagen del logo de la empresa, las imágenes de los sliders, entre otros. Para éste caso si se debe colocar información relevante en el atributo alt. Por ejemplo:

Alt para imágenes no decorativas

Alt para imágenes no decorativas

El focus de cada elemento debe verse igual en todos los navegadores

Cuando me refiero al focus, me refiero a ese cuadro que bordea un elemento clickeable al posicionarnos sobre él a través de la navegación por teclado, este focus viene con un diseño predeterminado en cada navegador (Chrome, Safari, Firefox). Para seguir las recomendaciones de la WAI este focus debería verse igual en todos los navegadores para evitar confusiones al usuario. Para lograr esto simplemente debemos declarar a nivel global de nuestro CSS la etiqueta :focus con el estilo que deseamos. Ejemplo:

Código CSS para definir el focus global

Código CSS para definir el focus global

Este ha sido un breve resumen de cómo implementar la accesibilidad en la web y de su importancia, si tienes dudas, sugerencias o simplemente quieres saber un poco más sobre Accesibilidad puedes escribirme un correo y con gusto te responderé.

Finalmente les dejo algunas referencias:

Si te ha gustado este post no olvides compartir!. Exitos para todos y feliz inicio de año!

Repositorio del proyecto

Escrito por

Mayra Rodríguez

Google Developer Expert for Angular & Web Technologies

hello@mayracript.com
Recientes
Tweets