La accesibilidad Web es un tema que se ha dejado de lado y el cual es de suma importancia para las personas con una discapacidad ya sea visual o auditiva, es por esto que se debe implementar una serie de características en la estructura HTML para garantizar una experiencia de usuario satisfactoria para todas las personas.

En muchos casos el desarrollo Web solo está aplicado para los usuarios sin discapacidad donde en muchas ocasiones no se agregan los ALT a las imágenes, los botones sin un texto no contienen su respectivo Aria-label, se asignan funciones a los elementos incorrectos y en algunos casos la paleta cromática puede perjudicar el contraste de los elementos.

Para solucionar estos inconvenientes es importante tener en cuenta las siguientes propiedades a la hora de desarrollar:

ALT: Esta propiedad se utiliza para definir una descripción a las imágenes, es importante ya que los lectores de pantalla lo pueden leer y de esta forma describir la imagen.

Roles: Este atributo se puede utilizar cuando se quiere dar más detalle a la hora de que un lector de página web interprete el contenido o cuando se utiliza un elemento para llevar a cabo una acción distinta a la establecida normalmente, como es el caso de una etiqueta <a> para abrir un Pop-up o llevar a cabo acciones en la página, en este caso la etiqueta <a> está llevando a cabo la acción de un botón por ende se debe asignar el role: button.

Existen muchos casos como este por ende se debe llevar a cabo un buen análisis para definir cuál de los roles disponibles se debe utilizar, para ver a detalle cada rol véase: la documentación de Firefox.

Aria-label: Se utiliza para indicar un texto el cual describe el elemento y es utilizado por los lectores de pantalla, esta propiedad sobre escribe los textos de los elementos y en caso de la imágenes el ALT por ende solo se recomienda utilizarlo en en elemento el cual no contenga ningún texto descriptivo.

El aria-label no debe ser usado de forma excesiva, sólo se debe utilizar cuando un elemento interactivo no contiene un texto descriptivo como puede ser el caso de un botón el cual funciona para cerrar un Pop-up, este contendrá una “X” por ende este no describe la acción que este ejecuta, es entonces que se debe utilizar aria-label. Ejemplo:

Si un botón o enlace contiene el texto adecuado no es necesario utilizarlo: 

En el caso de las imágenes es opcional utilizar, este reemplazará el atributo ALT, sin embargo este permite digitar una descripción más extensa debido a que el ALT está limitado a unos pocos caracteres.

Aria-HasPopup: Este atributo se debe utilizar en el caso de que un elemento abra un Pop-up, esto para que el lector de pantalla intérprete que ese elemento abre un componente emergente.

Contraste: Para los problemas de contraste es importante definir una paleta cromática reducida evitando el uso del negro (#000) y blanco al 100% (#fff), pero aplicando suficiente contraste figura-fondo de modo que los usuarios puedan realizar una lectura sin exponer su vista a un sobreesfuerzo.

Tab-index: Este atributo permite indicar el flujo que contendrá la página web al utilizar la navegación desde el teclado, es importante no utilizar valores que sean mayores a 0 y limitarse a utilizar:

• -1: Se utiliza para indicar que este elemento no es accesible desde la navegación del teclado.
• 0: Indica que este elemento es accesible desde la navegación del teclado.

Es importante tener claro que el focus generado de forma automática solo se aplica para elementos interactivos tales como etiquetas a, button, select, input y textarea, por ende no es necesario agregarlas a dichas etiquetas sin embargo si se debe agregar el tabindex=0 a las etiquetas p, h#, span, div e img que se consideren necesarios.

Importante tener en cuenta que las etiquetas “a” si no contienen un enlace definido estas no serán tomadas en cuenta en la navegación del teclado por ende si es necesario se debe agregar el tabindex=0 en caso de que se desee interactuar con este.

Conclusión:  En muchos casos al desarrollar las páginas web se tiene como único objetivo que estas funcionen de forma correcta y no se toman en cuenta todas las necesidades de los usuarios, por ende es de suma importancia utilizar estas propiedades para satisfacer y alcanzar el mayor público objetivo, si desea realizar pruebas de accesibilidad a su sitio web, no dude en contactar con nuestro equipo de expertos.