Regla de accesibilidad: Los elementos solo deben usar atributos ARIA compatibles

Acerca de esta regla de accesibilidad

La especificación WAI-ARIA organiza los roles, estados y propiedades en una taxonomía estricta. Cada rol define tres categorías de atributos que puede usar:

Atributos requeridos — deben estar presentes para que el rol funcione correctamente.
Atributos compatibles — opcionalmente mejoran la semántica del rol.
Atributos heredados — provienen de roles de superclase en la jerarquía de roles ARIA.

Cualquier atributo ARIA que no entre en una de estas categorías no está permitido en ese rol. Esto se aplica igualmente a roles explícitos (establecidos con el atributo role) y roles implícitos que los elementos HTML llevan por defecto. Por ejemplo, <button> tiene un rol implícito de button, <input type="checkbox"> tiene un rol implícito de checkbox, y <h2> tiene un rol implícito de heading.

Cuando aparece un atributo no compatible en un elemento, el resultado es impredecible. Un lector de pantalla podría ignorarlo silenciosamente, o podría anunciar información contradictoria — por ejemplo, describir un encabezado como un control verificable. En el peor caso, las combinaciones inválidas de rol-atributo pueden romper la accesibilidad para secciones enteras de una página.

Quién se ve afectado

Este problema tiene un impacto crítico en personas que usan tecnologías de asistencia:

Usuarios de lectores de pantalla (usuarios ciegos y sordociegos) dependen de información precisa de rol y estado para entender e interactuar con el contenido. Los atributos ARIA conflictivos pueden causar que los elementos se anuncien como algo que no son.
Usuarios de control por voz dependen de semánticas correctamente expuestas para emitir comandos dirigidos a controles específicos. Los roles mal representados pueden hacer que los controles sean inalcanzables por voz.
Usuarios de dispositivos de conmutación y métodos de entrada alternativos dependen de herramientas que interpretan roles y atributos ARIA para identificar controles operables. Los atributos inválidos pueden hacer que los controles parezcan inoperables o que representen mal su propósito completamente.

Cuando los atributos ARIA entran en conflicto con el rol de un elemento, estos usuarios pueden encontrar controles que mienten sobre lo que hacen, estados que nunca se actualizan correctamente, o regiones enteras que se vuelven completamente inutilizables.

Criterios de éxito WCAG relevantes

Esta regla se relaciona con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1 y 2.2: Nombre, Rol, Valor (Nivel A), así como con la cláusula 9.4.1.2 de EN 301 549. Este criterio requiere que todos los componentes de interfaz de usuario expongan su nombre, rol y valor a las tecnologías de asistencia de una manera que pueda determinarse programáticamente. Usar atributos ARIA no compatibles en un rol viola este criterio porque introduce propiedades que entran en conflicto con el rol real del elemento, rompiendo el contrato entre la página y la tecnología de asistencia.

Cómo solucionar el problema

Identifica el rol del elemento. Busca un atributo role explícito. Si no hay ninguno presente, determina el rol ARIA implícito del elemento a partir de su etiqueta HTML. Por ejemplo, <input type="checkbox"> tiene un rol implícito de checkbox, y <nav> tiene un rol implícito de navigation.
Busca los atributos permitidos para ese rol en las definiciones de roles de la especificación WAI-ARIA. Cada página de rol lista sus estados y propiedades requeridos, estados y propiedades compatibles, y propiedades heredadas de roles de superclase.
Elimina o reubica cualquier atributo ARIA que no esté en la lista permitida. Si el atributo pertenece a un elemento diferente dentro de tu componente, muévelo allí.
Reconsidera el rol. A veces la solución correcta no es eliminar el atributo sino cambiar el rol del elemento a uno que soporte el atributo que necesitas. Si quieres un control conmutable, usa role="switch" o role="checkbox" en lugar de role="button".
Consulta la especificación ARIA en HTML para reglas de conformidad adicionales sobre qué atributos ARIA son apropiados en elementos HTML específicos, incluyendo restricciones sobre cómo se pueden nombrar los elementos.

Ejemplos

Incorrecto: atributo no compatible en un rol explícito

El atributo aria-checked no es compatible con role="textbox" porque una caja de texto no es un control verificable. Un lector de pantalla podría anunciar este elemento como tanto una entrada de texto como un control marcado.

<div role="textbox" aria-checked="true" contenteditable="true">
  Enter your name
</div>

Correcto: atributo no compatible eliminado

Elimina aria-checked ya que no tiene significado en una caja de texto. Usa aria-label para proporcionar un nombre accesible.

<div role="textbox" contenteditable="true" aria-label="Your name">
</div>

Incorrecto: atributo no compatible en un rol implícito

El elemento <h2> tiene un rol implícito de heading. El atributo aria-selected no es compatible con encabezados porque los encabezados no son elementos seleccionables.

<h2 aria-selected="true">Account Settings</h2>

Correcto: atributo no compatible eliminado del encabezado

Si no se necesita semántica de selección, elimina el atributo. Si necesitas comportamiento de selección, usa un elemento con un rol apropiado como tab.

<h2>Account Settings</h2>

Incorrecto: el rol no coincide con el comportamiento previsto

El desarrollador quiere un control conmutable pero usó role="button", que no soporta aria-checked.

<div role="button" aria-checked="true" tabindex="0">
  Dark mode
</div>

Correcto: rol cambiado a uno que soporte el atributo

Cambiar el rol a switch hace que aria-checked sea válido. El elemento permanece operable por teclado mediante tabindex="0".

<div role="switch" aria-checked="true" tabindex="0" aria-label="Dark mode">
  Dark mode
</div>

Incorrecto: atributo no compatible en un elemento HTML nativo

El elemento <a> tiene un rol implícito de link. El atributo aria-required no es compatible con enlaces porque los enlaces no son campos de formulario que acepten entrada.

<a href="/terms" aria-required="true">Terms of Service</a>

Correcto: atributo no compatible eliminado del enlace

Elimina aria-required del enlace. Si necesitas indicar que acordar con los términos es obligatorio, comunícalo a través de un control de formulario como una casilla de verificación.

<a href="/terms">Terms of Service</a>

Correcto: atributo compatible en un rol implícito coincidente

El atributo aria-expanded es compatible con el rol implícito button, haciendo esta combinación válida.

<button aria-expanded="false" aria-controls="menu-list">
  Menu
</button>
<ul id="menu-list" hidden>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

Learn more: