Saltar al contenido

La accesibilidad en la web

· 8 minutos de lectura

Una laptop sobre una mesa.

Según el Informe mundial sobre la discapacidad1 publicado en el año 2011 estima que más de mil millones de personas viven con algún tipo de discapacidad. Alrededor del 15% de la población mundial.

La accesibilidad web es la práctica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.

Web Content Accessibility Guidelines (WCAG2) creadas por W3C son recomendaciones para crear contenido web más accesible, las cuales también han sido ratificadas por la ISO, como estándar ISO/IEC 40500:2012.

¿Por qué implementar accesibilidad en la web?

Una declaración de accesibilidad demuestra compromiso y proporciona detalles a los usuarios con discapacidades sobre las implementaciones que pueden usar y mejorar su experiencia en el sitio web.

  • Puede aumentar el SEO de nuestro sitio web
  • Para incluir a personas en situaciones de discapacidad.
  • Para mejorar la usabilidad de nuestros proyectos.
  • Porque en algunos países es la ley.

Principios WCAG

  1. Perceptible: Crear alternativas textuales para todo contenido no textual. Facilitar a los usuarios ver y oír el contenido, poder presentar el contenido de diferentes formas sin perder información o estructura.

  2. Operable: Que toda la funcionalidad esté disponible desde el teclado. Que sea navegable, dar el tiempo suficiente para leer en elementos dinámicos y dar opciones de tiempo.

  3. Comprensible: Ser legible, tamaños y contrastes de textos adecuados, hacer la página predecible, tener instrucciones claras.

  4. Robusto: Mantener compatibilidad con las aplicaciones de usuario actuales y futuras, navegadores y dispositivos, incluyendo las tecnologías asistivas y tener un buen performance.

Los criterios de WCAG comprende 3 niveles de conformidad:

  • A el nivel más bajo.
  • AA requiere cumplir los criterios del nivel A y AA
  • AAA el nivel más alto requiere cumplir los criterios del nivel AA y AAA.

Tecnologías asistivas

Las tecnologías asistivas sirven de ayuda para las personas con dificultades. Ayudan a realizar tareas regulares con el objetivo de mejorar su calidad de vida y su integración. Algunas de estas tecnologías son:

  • Lectores de pantalla
  • Extensiones que manipulan el CSS
  • Lupa de pantalla
  • Control de voz
  • Varilla bucal

HTML Semántico

Un buen HTML resuelve muchos aspectos de la accesibilidad con el uso correcto de etiquetas y atributos. Usar HTML semántico ayudará al navegador a incluir significado en el árbol de accesibilidad. Así los lectores de pantalla pueden entender el rol, propiedades y estado que tiene esa parte de nuestro código.

Chrome Accesibility

No recomendado:

Recomendado:

Imágenes

Usar el atributo alt en las imágenes le ayuda a los lectores de pantalla al momento de encontrarse con alguna imagen. Los que hace es leer el contenido de este atributo que será presentada al usuario como una descripción. También se mostrará este texto si es dado caso que la imagen no se encuentre disponible.

InformaciónNota: Otro aprovechamiento de accesibilidad con las imágenes puede ser tal y como se usa en este sitio web, al darle clic a una imagen se muestra una de mayor tamaño.

Uso de scope en tablas

El uso del scope ayuda a los lectores de pantalla a seguir el orden correcto.

Roles apropiados

Los siguientes elementos tienen la apariencia de botón pero con roles diferentes:

ancla

Hay que definir los roles de acuerdo a la función que realizarán. En este caso el primer "botón" tiene la funcionalidad de enlazar a otra página por lo que debería ser implementado como hipervínculo para que tome el rol de link.

Atributos Aria

Estos atributos se pueden añadir a cualquier etiqueta HTML para comunicar cambios especiales al DOM de nuestra aplicación. Roles propiedades y estados. Siempre es preferible usar un elemento HTML semántico correcto si es que existe en lugar de usar ARIA (accesible rich internet applications3).

  • Roles: Define el tipo general del objeto. Comunican a los navegadores cuáles son las interacciones que debería esperar y cómo se va a usar este objeto en nuestro proyecto. Se usan en situaciones muy específicas, es mejor depender del HTML semántico para comunicar los roles. Atributo: role.

  • Propiedades: Comunican atributos que son esenciales para el comportamiento o significado de un elemento, pero que suelen comunicar visualmente. Atributo: aria-label.

  • Estado: Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente aria-hidden="true" para que el lector de pantalla solo lea los elementos visibles en el estado actual de la página.

Estilos

Para tener más empatía con las personas con discapacidades visuales podemos emular a través de las dev tools de Google Chrome a través de las siguientes opciones:

Customize and control DevTools > More tools > Rendering > Emulate deficiencies

Emular visión

Color y contraste

Podemos utilizar las herramientas de Google Chrome DevTools para ver el contraste con el background y ver si cumplen con las especificaciones AA y AAA.

Herramienta de contraste

Focus

El enfoque da una guía visual al usuario sobre los elementos interactivos. Si un usuario solo navega con el teclado, tab para avanzar y shift+tab para retroceder, es importante que todos los elementos interactivos tengan un enfoque para guiar al usuario.

En este caso tal como sucede en todos los elementos interactivos de este sitio web se rodea el elemento con un delineado para dar a entender que se está seleccionando este elemento.

Es una técnica4 que permite navegar directamente al contenido principal. El primer elemento de la página sería este enlace. Con esto se logra que con cada cambio de página al navegar con el teclado no tener que pasar de nuevo por contenido repetitivo.


Tabindex

Es un atributo que indica si un elemento puede ser enfocado, y si participa en la navegación secuencial del teclado. Acepta tres valores:

Valor negativo(-1): El elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación, puede ser usado en carruseles donde elementos no son visibles.

Valor positivo (>0): Debe poder ser enfocado y su orden relativo es definido por el valor del atributo.

Valor de 0: Debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, sigue el orden de la estructura del HTML.


Añadir acciones con el teclado

Podemos añadir acciones con el teclado escuchando las teclas. Guía de códigos

Existen teclas intuitivas como por ejemplo al entrar en modales y salir con la tecla esc. Esto añade una característica más a nuestro sitio.

Precaución: El uso de KeyboardEvent.keyCode está deprecado5 y puede dejar de funcionar en un futuro, usar KeyboardEvent.key en su lugar

Test de accesibilidad

Los test de accesibilidad ayudan a resolver problemas comunes. Se pueden hacer a través de devtools con lighthouse o a través de otras plataformas.


Conclusiones

La accesibilidad mejora la calidad de nuestro sitio web y la experiencia de los usuarios. Es importante tener en mente la accesibilidad a la hora de estar desarrollando un sitio web para asegurarnos que todos puedan tener acceso al contenido.

Referencias

  1. Organización mundial de la salud (2011) Informe mundial sobre la discapacidad

  2. W3C Web Accessibility Initiative

  3. MDN Web Docs & MDN contributors KeyboardEvent.keyCode


Recibirás actualizaciones del blog con temas de programación

Descubre más sitios indie