Diseñar contenido web de manera que sea accesible significa entender que distintos tipos de personas usuarias percibirán el contenido de diferentes maneras: no es lo mismo para alguien que percibe visualmente la pantalla que para alguien que usa tecnologías asistivas.
En este contexto aparece el atributo aria-hidden. El mismo se utiliza para esconder elementos de las tecnologías de apoyo. De esta manera podemos transmitir un mensaje que sea equivalente a la versión visual.
Cuándo no usar aria hidden
- Cuando necesitamos esconder elementos que aparecen ante algún evento o interacción. Por ejemplo, las opciones de un menú desplegable.
- Cuando tenemos textos que son necesarios para seguir pasos o instrucciones. Por ejemplo, los textos de ayuda de un input al momento de configurar una contraseña nueva.
- Cuando tenemos campos en un formulario que aparecen ante una respuesta específica. Por ejemplo, cuando marcamos un checkbox y nos aparece una nueva pregunta.
Cuándo sí usar aria hidden
- Cuando hay textos que están repetidos o funcionan como elementos de diseño, pero que al leerlos no aportan nada.
- Cuando tenemos íconos que son puramente decorativos y no hacen a la construcción del mensaje, como una flecha derecha al lado de un botón de “Ver más”.
- Cuando hay íconos que ya tienen texto equivalente, como el de lupa al lado del texto “Buscar” en un input de búsqueda. Esto es porque no tiene sentido que el screen reader lea 2 veces lo mismo.
- Cuando hay íconos de estado que están acompañados por un texto visible, como una cruz al lado de un estado “error”.
Aclaración importante
Si a una imagen le dejamos el atributo alt vacío el lector de pantalla ya la ignorará. Por eso el aria hidden no es necesario en estos casos. Distinto es el caso de los íconos.
El desafío de diseñar inclusivamente reside en encontrar las mejores herramientas para que las tecnologías asistivas puedan generar experiencias equivalentes dando la información necesaria. El atributo aria hidden es una herramienta más para ayudarnos a lograr este propósito. ¿A vos se te ocurren otros ejemplos de buenos usos de aria hidden?
