Web accessibility and its importance

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.

Accesibilidad 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.

2. 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.

3. 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
4. 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 imagen decorativa
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 imagen no decorativa
5. 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
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:
ESTADISTICAS 2015 - Discapacidad Colombia
Portal Colombiano especializado en la obtención y difusión de información sobre la discapacidad en Colombia,
www.discapacidadcolombia.com
Web Accessibility | Udacity
Get hands-on experience making web applications accessible. You'll understand when and why users need accessibility…
www.udacity.com
Home
The Website of the World Wide Web Consortium's Web Accessibility Initiative.
www.w3.org
Si te ha gustado este post no olvides compartir!.
Exitos para todos y feliz inicio de año!