Los elementos solo deben usar atributos ARIA permitidos

La especificación WAI-ARIA define qué atributos están permitidos, requeridos o prohibidos para cada rol. Cuando usas un atributo prohibido en un rol, estás dependiendo de una combinación que las tecnologías de asistencia no están diseñadas para soportar. El resultado es que la información que pretendías comunicar — como una etiqueta o descripción — puede ser eliminada silenciosamente.

Esto crea un problema serio para los usuarios que dependen de tecnologías de asistencia, incluyendo personas ciegas, sordociegas, o con problemas de movilidad. Los lectores de pantalla pueden ignorar el atributo prohibido, dejando al usuario sin contexto. Algunas tecnologías de asistencia pueden intentar compensar, llevando a un comportamiento inconsistente o confuso entre diferentes herramientas y navegadores.

Un ejemplo común es usar aria-label en un elemento con role="presentation" o role="none". Estos roles explícitamente le dicen a las tecnologías de asistencia que ignoren la semántica del elemento, por lo que etiquetarlo con aria-label es contradictorio. Similarmente, los roles semánticos a nivel de texto como code, insertion, deletion, strong, emphasis, subscript, superscript, y paragraph prohíben aria-label y aria-labelledby porque estos roles representan contenido de texto en línea que no debería llevar un nombre accesible separado de su contenido de texto.

Criterios de éxito WCAG relacionados

Esta regla se relaciona con el Criterio de Éxito WCAG 4.1.2: Nombre, Rol, Valor (Nivel A), que requiere que para todos los componentes de interfaz de usuario, el nombre, rol y estados/propiedades puedan ser determinados programáticamente. Usar atributos ARIA prohibidos viola este criterio porque la información del nombre o estado pretendida no puede ser comunicada de forma fiable a las tecnologías de asistencia.

Cómo solucionarlo

Cuando axe marque un atributo ARIA prohibido, considera estos enfoques:

1. Elimina el atributo prohibido — Si la información que transmite no es esencial, simplemente elimínalo.
2. Cambia el rol del elemento — Cambia a un rol que permita el atributo que necesitas. Por ejemplo, si necesitas aria-label, no uses role="none".
3. Proporciona la información como texto visible — En lugar de depender del atributo prohibido, incluye la información directamente en el contenido de la página donde todos los usuarios puedan acceder a ella.
4. Mueve el atributo a un elemento diferente — Coloca el atributo en un elemento padre o hijo que tenga un rol que lo soporte.

Ejemplos

Incorrecto: aria-label en un elemento con role="presentation"

El rol presentation le dice a las tecnologías de asistencia que ignoren el elemento. Añadir aria-label contradice esto y será ignorado.

<div role="presentation" aria-label="Navigation section">
  <a href="/home">Home</a>
  <a href="/about">About</a>
</div>

Correcto: usar un rol que soporte aria-label

Si el elemento necesita un nombre accesible, usa un rol que permita etiquetado, como navigation.

<nav aria-label="Navigation section">
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

Incorrecto: aria-label en un rol semántico a nivel de texto

Los roles como code, strong, emphasis, insertion, y deletion prohíben aria-label y aria-labelledby.

<span role="code" aria-label="JavaScript variable declaration">
  const x = 10;
</span>

Correcto: usar texto visible en su lugar

Proporciona contexto a través del contenido de texto circundante en lugar de un atributo prohibido.

<p>
  The following JavaScript variable declaration
  <code>const x = 10;</code>
  assigns the value 10 to x.
</p>

Incorrecto: aria-labelledby en role="none"

<h2 id="section-title">Features</h2>
<table role="none" aria-labelledby="section-title">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Correcto: eliminar el rol conflictivo o el atributo prohibido

Si la tabla necesita ser etiquetada, elimina role="none" para que mantenga su semántica nativa de tabla.

<h2 id="section-title">Features</h2>
<table aria-labelledby="section-title">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Si la tabla es verdaderamente presentacional y no necesita una etiqueta, elimina el atributo aria-labelledby en su lugar.

<table role="none">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C: ARIA in HTML

→

W3C Reference

WAI-ARIA Overview

→

W3C Reference

WAI-ARIA 1.1

→