Los nodos ARIA treeitem deben tener un nombre accesible

El rol treeitem representa un elemento dentro de un widget jerárquico tree, comúnmente utilizado para exploradores de archivos, menús de navegación anidados o listas de categorías desplegables. Cuando un treeitem carece de un nombre accesible, los lectores de pantalla anuncian algo como “elemento de árbol” sin más contexto, haciendo imposible que los usuarios que dependen de tecnología asistiva distingan un elemento de otro o entiendan la estructura del árbol.

Este problema afecta principalmente a los usuarios de lectores de pantalla, pero también puede impactar a los usuarios de software de control por voz que necesitan referenciar elementos por nombre para interactuar con ellos.

Esta regla se relaciona con el Criterio de Éxito 4.1.2 de WCAG 2.1 (Nombre, Rol, Valor), que requiere que todos los componentes de interfaz de usuario tengan un nombre que pueda ser determinado programáticamente. También apoya al Criterio de Éxito 1.3.1 (Información y Relaciones), asegurando que la información transmitida a través de la estructura esté disponible para todos los usuarios.

Cómo solucionarlo

Puedes dar a un treeitem un nombre accesible de varias maneras:

1. Contenido de texto interno — Coloca texto descriptivo directamente dentro del elemento.
2. aria-label — Añade un atributo aria-label con una cadena descriptiva.
3. aria-labelledby — Referencia el id de otro elemento que contenga el texto de la etiqueta.
4. Atributo title — Usa el atributo title como último recurso (menos confiable entre tecnologías asistivas).

El nombre accesible debe ser conciso y describir claramente el propósito o contenido del elemento.

Ejemplos

Incorrecto: treeitem sin nombre accesible

<ul role="tree">
  <li role="treeitem"></li>
  <li role="treeitem"></li>
</ul>

Los lectores de pantalla anuncian estos elementos como “elemento de árbol” sin etiqueta distintiva.

Incorrecto: treeitem con solo un hijo no textual y sin etiqueta

<ul role="tree">
  <li role="treeitem">
    <span class="icon-folder"></span>
  </li>
</ul>

Si el span renderiza solo un icono CSS y no contiene texto, el treeitem aún no tiene nombre accesible.

Correcto: treeitem con contenido de texto visible

<ul role="tree">
  <li role="treeitem">Documents</li>
  <li role="treeitem">Photos</li>
  <li role="treeitem">Music</li>
</ul>

Correcto: treeitem con aria-label

<ul role="tree">
  <li role="treeitem" aria-label="Documents">
    <span class="icon-folder"></span>
  </li>
  <li role="treeitem" aria-label="Photos">
    <span class="icon-folder"></span>
  </li>
</ul>

Correcto: treeitem con aria-labelledby

<ul role="tree">
  <li role="treeitem" aria-labelledby="item1-label">
    <span class="icon-folder"></span>
    <span id="item1-label">Documents</span>
  </li>
  <li role="treeitem" aria-labelledby="item2-label">
    <span class="icon-folder"></span>
    <span id="item2-label">Photos</span>
  </li>
</ul>

Correcto: elementos treeitem anidados con nombres accesibles

<ul role="tree">
  <li role="treeitem" aria-expanded="true">
    Documents
    <ul role="group">
      <li role="treeitem">Resume.pdf</li>
      <li role="treeitem">Cover Letter.docx</li>
    </ul>
  </li>
  <li role="treeitem" aria-expanded="false">
    Photos
  </li>
</ul>

Cada treeitem en el árbol — incluyendo los anidados — debe tener un nombre accesible. Al construir widgets de árbol, también asegúrate de proporcionar interacción de teclado adecuada (teclas de flecha para navegación, Enter/Espacio para activación) y uso correcto de aria-expanded en elementos padre que contengan grupos hijo.

Learn more:

Deque Reference

Deque University - How To Fix

→