No se deben usar roles de 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, mal compatibles o mejor servidos por otros mecanismos. Cuando usas un role obsoleto, estás confiando en semánticas que las tecnologías de asistencia ya no están obligadas a soportar. Esto significa que el role puede ser completamente ignorado, mal interpretado 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 discapacidades motoras que dependen de tecnologías de asistencia que usan roles de 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) u omitir 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 conformidad WCAG relevantes

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

Esto se 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 actual de WAI-ARIA.
2. Reemplaza los roles obsoletos con alternativas compatibles. Actualmente, el role obsoleto principal señalado es:
   • directory: Reemplaza 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 asistencia después de hacer cambios para confirmar que el nuevo role transmite el significado pretendido.

A medida que 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 asistencia 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 las semánticas nativas 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 asistencia 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 hijos 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 usó 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 asistencia puedan transmitirlo de manera significativa a los usuarios.

Learn more:

Deque Reference

Deque University - How To Fix

→