El role ARIA debe ser apropiado para el elemento

Los elementos HTML vienen con semántica incorporada: un <button> es inherentemente un botón, un <ul> es inherentemente una lista, y así sucesivamente. Cuando asignas un role de WAI-ARIA a un elemento, estás sobrescribiendo esa semántica incorporada y diciéndole a las tecnologías de asistencia que traten el elemento de manera diferente. Sin embargo, no todas las sobrescrituras tienen sentido. Algunas combinaciones entran en conflicto con el comportamiento nativo del elemento, sus patrones de interacción esperados, o el manejo interno del elemento por parte del navegador. Por ejemplo, asignar role="button" a un elemento <ul> crea una contradicción: el navegador aún lo trata como una lista estructuralmente, pero los lectores de pantalla lo anuncian como un botón, resultando en un comportamiento confuso e impredecible.

Este problema afecta principalmente a usuarios que dependen de lectores de pantalla y otras tecnologías de asistencia. Estas herramientas dependen de información precisa de roles para comunicar qué es un elemento, cómo se comporta y cómo interactuar con él. Cuando las asignaciones de roles entran en conflicto con el elemento HTML subyacente, los lectores de pantalla pueden anunciar el tipo incorrecto de control, saltar contenido completamente, o presentar una interfaz de usuario que no coincide con lo que ven los usuarios videntes. Los usuarios ciegos, sordociegos, o que usan tecnologías de asistencia para discapacidades motoras se ven afectados.

Aunque esta regla se clasifica como una mejor práctica de Deque en lugar de un fallo directo de WCAG, se alinea con los principios detrás de WCAG 4.1.2 Name, Role, Value, que requiere que los componentes de interfaz de usuario expongan su rol correctamente a las tecnologías de asistencia. Los roles no coincidentes socavan este requisito. En el mejor caso, una combinación inválida de elemento-rol no tiene efecto; en el peor, puede deshabilitar la accesibilidad para secciones completas de una página.

Cómo solucionarlo

1. Consulta la especificación ARIA in HTML. La especificación ARIA in HTML define qué valores de role están permitidos para cada elemento HTML. Antes de asignar un rol, verifica que la combinación esté permitida.
2. Usa el elemento correcto para el trabajo. A menudo, la mejor solución es usar un elemento HTML nativo que ya tenga la semántica que necesitas, en lugar de sobrescribir un elemento diferente con un role. Por ejemplo, usa un <button> para comportamiento de botón en lugar de añadir role="button" a un <div>.
3. Reestructura cuando sea necesario. Si necesitas un rol específico, encuentra un elemento que esté permitido que lo lleve. Esto podría significar cambiar ligeramente la estructura de tu marcado.
4. No uses roles abstractos. Roles como widget, landmark, roletype, structure, y command son abstractos y nunca deben usarse directamente en el contenido. Existen solo como categorías conceptuales en la taxonomía ARIA.

Ejemplos

Incorrecto: rol no apropiado para el elemento

Un elemento <ul> asignado con role="button" — las listas no pueden ser botones:

<ul role="button">Name</ul>

Un elemento <button> asignado con role="heading" — los botones no deberían ser encabezados:

<button role="heading" aria-level="2">Welcome</button>

En ambos casos, el rol asignado entra en conflicto con la semántica nativa del elemento y el comportamiento esperado, causando que las tecnologías de asistencia reporten información inexacta.

Correcto: rol apropiado para el elemento

Un elemento <ul> asignado con role="menu" — este es un rol permitido para <ul>, y los elementos hijos usan roles compatibles:

<ul role="menu">
  <li role="none">
    <button role="menuitem">Start</button>
  </li>
  <li role="none">
    <button role="menuitem">Stop</button>
  </li>
</ul>

Aquí, role="menu" es una sobrescritura permitida para <ul>, role="none" elimina la semántica de elemento de lista del <li> (que no es significativa en un contexto de menú), y role="menuitem" está permitido en elementos <button>.

Correcto: usar elementos HTML nativos en lugar de sobrescrituras de roles

En lugar de forzar roles no coincidentes, usa elementos que ya tengan la semántica que necesitas:

<button type="button">Name</button>

<h2>Welcome</h2>

Los elementos HTML nativos proporcionan soporte de teclado incorporado, gestión de foco y semántica correcta sin necesidad de ARIA. Este es casi siempre el enfoque más simple y robusto.

Learn more:

Deque Reference

Deque University - How To Fix

→