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

Acerca de esta regla de accesibilidad

La especificación WAI-ARIA organiza 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 — mejoran opcionalmente 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 por igual a roles explícitos (establecidos con el atributo role) y roles implícitos que los elementos HTML tienen 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 marcable. En el peor de los casos, combinaciones inválidas de rol-atributo pueden romper la accesibilidad para secciones completas de una página.

Quién se ve afectado

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

Usuarios de lectores de pantalla (usuarios ciegos y sordociegos) dependen de información precisa de roles y estados para entender e interactuar con el contenido. Los atributos ARIA en conflicto pueden hacer que los elementos se anuncien como algo que no son.
Usuarios de control por voz dependen de semántica correctamente expuesta para emitir comandos dirigidos a controles específicos. Los roles mal representados pueden hacer que los controles sean inaccesibles 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 tergiversar completamente su propósito.

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 completas que se vuelven completamente inutilizables.

Criterios de éxito de 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 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. Verifica si hay 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 admita 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 los elementos pueden nombrarse.

Ejemplos

Incorrecto: atributo no compatible en un rol explícito

El atributo aria-checked no es compatible con role="textbox" porque un cuadro de texto no es un control marcable. 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 un cuadro 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 la semántica de selección no es necesaria, 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 admite aria-checked.

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

Correcto: rol cambiado a uno que admite 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 aceptar los términos es obligatorio, comunícalo a través de un control de formulario como un checkbox.

<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 button implícito, 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: