No se deben usar roles ARIA obsoletos

La especificación WAI-ARIA evoluciona con el tiempo. A medida que madura, ciertos roles se vuelven obsoletos porque se descubrió que eran redundantes, tenían poco soporte, o se servían mejor con otros mecanismos. Cuando usas un role obsoleto, confías en semánticas que las tecnologías de apoyo ya no se espera que soporten. Esto significa que el role puede ser completamente ignorado, malinterpretado, o causar comportamientos inesperados.

Los usuarios más afectados incluyen:

• Usuarios ciegos y sordociegos que dependen de lectores de pantalla para transmitir el propósito y estructura de los elementos en una página.
• Usuarios con limitaciones de movilidad que dependen de tecnologías de apoyo que usan roles ARIA para navegación e interacción.

Cuando un lector de pantalla encuentra un elemento con un role obsoleto, puede anunciarlo de forma genérica (por ejemplo, como un simple grupo o sección) o saltarse completamente el anuncio del role. Esto elimina el contexto significativo que ayuda a los usuarios a entender la estructura del contenido e interactuar con él de manera efectiva.

Criterios de éxito WCAG relevantes

Esta regla se relaciona con el Criterio de Éxito WCAG 4.1.2: Nombre, Función, Valor (Nivel A). Este criterio requiere que para todos los componentes de interfaz de usuario, el nombre, función y valor puedan determinarse programáticamente y que los cambios a estos estén disponibles para las tecnologías de apoyo. Usar un role obsoleto significa que la función no puede determinarse de manera confiable, lo cual viola este requisito.

Esto aplica a través de WCAG 2.0, 2.1, y 2.2 en Nivel A, así como EN 301 549 (directriz 9.4.1.2).

Cómo solucionarlo

1. Identifica roles obsoletos en tu código base. La regla de axe-core verifica todos los elementos con un atributo role contra la especificación WAI-ARIA actual.
2. Reemplaza roles obsoletos con alternativas compatibles. Actualmente, el role obsoleto principal señalado es:
   • directory: Reemplázalo con list, tree, o section dependiendo de la estructura del contenido. Si el directorio representa una lista plana de elementos (como una tabla de contenidos), usa list. Si representa una estructura jerárquica expandible, usa tree. Si es una agrupación general de contenido relacionado, usa section.
3. Prueba con tecnologías de apoyo después de hacer cambios para confirmar que el nuevo role transmite el significado deseado.

Mientras la especificación WAI-ARIA continúa evolucionando, roles adicionales pueden volverse obsoletos en futuras versiones. Mantén tu uso de ARIA actualizado consultando la especificación WAI-ARIA más reciente.

Ejemplos

Incorrecto: Usar el role obsoleto directory

<div role="directory">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</div>

El role directory está obsoleto. Las tecnologías de apoyo pueden no reconocerlo, dejando a los usuarios sin información semántica útil sobre este elemento.

Correcto: Usar un role compatible en su lugar

Si el contenido es una simple lista de enlaces (como una tabla de contenidos), usa list o confía en la semántica nativa de <ul>:

<nav aria-label="Table of contents">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</nav>

En este ejemplo, el elemento nativo <ul> ya proporciona el role list, y envolverlo en un <nav> con un aria-label da a los usuarios de tecnologías de apoyo un contexto claro sobre su propósito.

Correcto: Usar tree para contenido jerárquico

Si el contenido representa una estructura anidada expandible, usa el role tree con roles hijo apropiados:

<ul role="tree" aria-label="Site map">
  <li role="treeitem" aria-expanded="true">
    Section 1
    <ul role="group">
      <li role="treeitem">Subsection 1.1</li>
      <li role="treeitem">Subsection 1.2</li>
    </ul>
  </li>
  <li role="treeitem">Section 2</li>
</ul>

Correcto: Usar section para una agrupación general de contenido

Si el role obsoleto directory se usaba simplemente para agrupar contenido relacionado, un elemento <section> con un nombre accesible es un buen reemplazo:

<section aria-label="Staff directory">
  <ul>
    <li>Alex Johnson — Engineering</li>
    <li>Maria Garcia — Design</li>
    <li>Sam Lee — Marketing</li>
  </ul>
</section>

La clave es elegir un reemplazo que refleje con precisión la estructura y propósito del contenido, asegurando que las tecnologías de apoyo puedan transmitirlo de manera significativa a los usuarios.

Learn more:

Deque Reference

Deque University - How To Fix

→