Accesibilidad: breve introducción hacia una web inclusiva

Muchas veces al hablar de accesibilidad lo primero que pensamos es en hacer una sitio para personas con capacidad visual totalmente nula. Esto es correcto, pero solo en parte. ¿Por qué? Porque la accesibilidad consiste en que cualquier persona pueda usar e interactuar con nuestra web, sin depender de sus capacidades físicas.

En este artículo vamos a hablar sobre 4 puntos importantes en los que puedes trabajar para mejorar la accesibilidad de un sitio web:

1. Color y contraste

Trabajar sobre este punto significa lograr que el contraste de luminosidad entre el texto y el color del fondo sea lo suficientemente bueno para que el texto se pueda leer sin dificultad alguna.

Para medir si los textos son accesibles puedes usar las herramientas de desarrollador que provee Google Chrome.

Al posicionarte sobre un texto, Chrome te indica el de puntaje de contraste y con una marca verde si pasa accesibilidad.

Puntos a tener en cuenta:

• Revisa tus textos y ajusta el color o tamaño de los mismos.
• Puedes agregar sombras o fondos a los textos para generar más contraste.
• No uses únicamente el color para transmitir información. Por ejemplo: si quieres indicar que hay un error en un input, no solo pintes sus bordes de rojo, sino también agrega un icono o algún mensaje.

2. Navegación por teclado

Cualquier usuario de nuestro sitio debe poder navegar e interactuar con él solo con el teclado, es decir, sin mouse o trackpad.

Abre tu sitio y pulsa la tecla tab para ir pasando de elemento en elemento y vas a comprobar si todo lo que haces con el mouse, puedes hacerlo con el teclado.

Puntos a tener en cuenta:

• Nunca quites los estilos por defecto del focus. Si no te gustan, cámbialos por otros, pero nunca los quites.
• Sí tienes un modal, arma un array con los elementos focuseables y genera un loop entre ellos. Al cerrar el modal vuelve el focus al mismo elemento que lo abrió.
• Intenta diseñar la navegación por teclado.

3. HTML semántico

Debemos usar las configuraciones correctas y etiquetas apropiadas para el contenido apropiado.

Puntos a tener en cuenta:

• Definir el lenguaje correcto del documento es muy importante para los lectores de pantalla.
• Usar heading (h1, h2, h3, etc) de manera correcta, es decir, que el título sea grande no significa que siempre va a ser un h1.
• El atributo alt de la etiqueta <img> debe contener un texto descriptivo de la imagen, ya que esto es lo que leerá el screen reader. Si el texto se coloca todo en mayúsculas, el lector de pantalla leerá letra por letra, y si se deja vació, el lector de pantalla omitirá esta imagen.
• Usar las etiquetas <a> solo para navegaciones, no para acciones.
• Usar <button> para acciones (abrir un modal, play de un video, etc) y no para navegar.
• Evita bloquear el zoom en dispositivos móviles, piensa en mí, que ayer me recetaron anteojos nuevos 🤓.

4. Mejora día a día

Mejorar la accesibilidad de un sitio web no es algo que se logre de un día para otro, ni es algo que se hace una sola vez y ya. Debemos tomar la responsabilidad de mejorar continuamente la accesibilidad de nuestro sitio, ¡tus usuarios lo van a agradecer!

Para esto, les comparto una herramienta para analizar la accesibilidad de un sitio y una guía en la que puedes profundizar sobre estos y más temas de accesibilidad.

Eso es todo por ahora, nos vemos pronto 👋🏻.