¿Qué son los atributos ARIA?

No es un secreto que tener un sitio web accesible es fundamental para el éxito de cualquier negocio online. En el blog de Torresburriel Estudio hemos tratado en muchas ocasiones el tema de la usabilidad (por no decir siempre) y la importancia de una buena estrategia UX. Estas son claves para que Google nos favorezca en sus resultados de búsqueda, mejorando nuestro posicionamiento y visibilidad.

Pero, ¿qué ocurre con aquellas personas que tienen alguna discapacidad y encuentran dificultades para acceder a nuestros contenidos en comparación con las personas sin estas limitaciones?

En esta entrada, vamos a descubrir qué son los atributos ARIA y cómo pueden ayudar a que tu empresa y proyectos sean más accesibles y visibles.

¿Qué son los atributos ARIA?

ARIA es el acrónimo de «Accessible Rich Internet Applications» (Aplicaciones Ricas de Internet Accesibles), una iniciativa de la W3C para mejorar la accesibilidad web. Se utilizan para hacer que los sitios web sean más accesibles para personas con discapacidades, mejorando la experiencia de aquellos que usan lectores de pantalla u otras tecnologías de asistencia.

Ver también: Pruebas de accesibilidad web 

A veces, simplemente escribir HTML semántico no es suficiente. Aquí es donde las etiquetas ARIA juegan un papel muy importante. Estas etiquetas enriquecen nuestro HTML, especialmente cuando usamos elementos dinámicos generados con JavaScript. Sin embargo, es importante puntualizar que los elementos que ya tienen un valor semántico no deberían usar atributos que reiteren su función, tal y como dice la regla número 1 del uso de ARIA. 

Es importante recordar que ARIA no compite con la semántica de HTML, sino que la complementa. Fue creado para que podamos comunicar cambios específicos en nuestras aplicaciones a las tecnologías asistenciales. La mayoría de los navegadores y lectores de pantalla más populares ya lo implementan.

¿Por qué deberías implementar los atributos ARIA?

Si todavía tienes dudas sobre la incorporación de los atributos ARIA, te aseguramos que vale la pena. Aquí te presentamos algunas de sus ventajas:

• Información detallada para tecnologías asistenciales: los atributos ARIA proporcionan información detallada para que las tecnologías de asistencia puedan interpretar y presentar el contenido de manera más precisa.
• Mejora en la navegación: facilitan la navegación en sitios web para personas con algún tipo de discapacidad, lo que puede mejorar significativamente el tráfico orgánico de tu web. Al hacer tu sitio más accesible, te abres a un público más amplio. Ver también: Buenas prácticas UX para diseñar un menú de navegación
• Fácil implementación: implementar ARIA es sencillo y no requiere procedimientos técnicos complejos. Una vez que entiendas su lógica y funcionalidad, puedes incorporarlos rápidamente para mejorar la experiencia del usuario de manera notable.
• Aumento de la audiencia: al hacer tu sitio web accesible para personas con discapacidades, amplías tu base de usuarios potenciales. Esto puede traducirse en un aumento de tráfico y clientes, beneficiando directamente a tu negocio.
• Mejora de la imagen de marca: mostrar un compromiso con la accesibilidad y la inclusión puede mejorar la percepción de tu marca. Los usuarios valoran las empresas que demuestran responsabilidad social y se esfuerzan por ser inclusivas.

Atributos ARIA

Los atributos ARIA juegan un papel fundamental en la mejora de la accesibilidad web, haciendo que los sitios sean más amigables para personas con discapacidades. Los atributos ARIA se dividen en tres categorías principales: roles, propiedades y estados. A continuación, exploramos cada uno de estos componentes y cómo contribuyen a una mejor experiencia de usuario.

Roles ARIA

En la mayoría de los casos, es ideal utilizar HTML semántico nativo para describir la estructura y función de los elementos de una página web. Sin embargo, cuando el HTML semántico no es suficiente, los roles ARIA llenan esos vacíos cruciales.

• Elementos nuevos o conceptuales: los roles ARIA pueden describir elementos que todavía no tienen un soporte completo en los navegadores o que no son reconocidos por los lectores de pantalla. Por ejemplo, <button role=»tab»>Tab</button>.
• Corrección de HTML no semántico: si el HTML se ha implementado incorrectamente, los roles ARIA pueden corregirlo. Por ejemplo, <div role=»button»>Button</div>.

Los roles ARIA especifican claramente la función de un elemento, lo que ayuda a las tecnologías de asistencia a interpretarlo correctamente. La sintaxis para aplicar un rol es simple:

role=”nombre del rol”

Propiedades y estados ARIA

Las propiedades y estados ARIA proporcionan información adicional que complementa los roles. Estos atributos enriquecen la interacción del usuario y aseguran que los lectores de pantalla y otras tecnologías de asistencia puedan comunicar cambios y estados de manera eficaz.

• Propiedades ARIA: tienden a ser más estáticas a lo largo del ciclo de vida de la aplicación. Un ejemplo sería aria-labelledby, que relaciona un elemento con su etiqueta.
• Estados ARIA: son dinámicos y cambian en respuesta a la interacción del usuario, como aria-checked, que indica si una casilla está marcada.

Las propiedades y estados ARIA se clasifican en varias categorías para cubrir diferentes aspectos de la accesibilidad:

1. Atributos de widgets: proveen detalles sobre la interacción con widgets específicos.
2. Atributos de regiones vivas: informan sobre áreas de la página que pueden cambiar dinámicamente, como actualizaciones en tiempo real.
3. Atributos de arrastrar y soltar: hacen que las operaciones de arrastrar y soltar sean accesibles.
4. Atributos de relación: definen relaciones entre distintos elementos en la página, como el vínculo entre una etiqueta y su campo de formulario.

¿Cómo utilizarlos?

Los atributos ARIA funcionan al añadir metadatos al contenido web, lo que permite que las tecnologías de asistencia ayuden al usuario de manera más efectiva. Aunque la lista de atributos ARIA es extensa, no es necesario utilizarlos todos para mejorar la accesibilidad de tu sitio web. A continuación, destacamos algunos de los atributos más importantes y cómo usarlos correctamente:

• aria-describedby: establece una relación entre un elemento y otro elemento o grupo de elementos que proporciona información adicional sobre el primero 
• aria-expanded: indica si un elemento expandible está expandido o no, como en menús o secciones colapsables.
• aria-haspopup: señala si un elemento tiene un popup (menu, listbox, tree, dialog…)
• aria-hidden: indica si un elemento no es visible o debería ser ignorado por las tecnologías de asistencia.
• aria-label: proporciona una etiqueta para un elemento que no es suficientemente descriptivo por sí solo.
• aria-live: informa a las tecnologías de asistencia sobre áreas de la página que pueden actualizarse dinámicamente.
• aria-checked: indica el estado de elementos que se pueden marcar, como casillas de verificación.
• aria-controls: relaciona un elemento con otro que controla, como un botón que controla una caja de diálogo.
• aria-required: indica que un campo es obligatorio.
• aria-disabled: señala que un elemento está inactivo y no se puede interactuar con él.

Reglas básicas para el uso de atributos ARIA

Para asegurar que los atributos ARIA se utilicen de manera efectiva y no se conviertan en un obstáculo, es fundamental seguir algunas reglas básicas sobre su uso: 

• Compatibilidad de etiquetas HTML: no todas las etiquetas HTML admiten roles, estados o propiedades ARIA. Algunas etiquetas ya tienen roles implícitos que no necesitan ser redefinidos. Además, agregar ciertos roles o estados a etiquetas específicas puede no tener sentido semántico.
• Relaciones de herencia: algunos atributos ARIA deben ser utilizados en conjunto con otros atributos en elementos hijos o padres. Es crucial seguir estas relaciones de herencia para asegurar una accesibilidad efectiva.
• Especificación ARIA: ARIA es una especificación estándar que debe seguirse estrictamente. No se deben inventar nuevos atributos ARIA añadiendo prefijos aria-* a elementos que no están definidos en la especificación.
• Impacto en elementos hijos: algunos atributos ARIA pueden afectar no sólo al elemento al que se aplican, sino también a todos sus elementos hijos. Por ejemplo, el rol presentation puede suprimir la semántica implícita de todos los elementos hijos del elemento al que se aplica.

Como habréis podido comprobar en esta entrada del blog, la implementación adecuada de los atributos ARIA es clave para mejorar la accesibilidad web. Es fundamental educarse sobre su uso y aplicarlos correctamente en todos los desarrollos. 

En un mundo cada vez más digitalizado, cada paso hacia la accesibilidad no solo enriquece la experiencia web, sino que también fortalece nuestro compromiso con un internet más inclusivo y accesible para todos.

---

Foto de portada de Ben Kolde en Unsplash.