Vistas en árbol y rejillas de datos (tree, grid y treegrid)

Las aplicaciones de gestión (el gestor documental de un ayuntamiento, el ERP de una empresa, el campus virtual de una universidad) están llenas de dos estructuras que una web informativa casi nunca necesita: jerarquías que se despliegan, como un árbol de carpetas, y tablas en las que se trabaja celda a celda, como una hoja de cálculo. La APG (se abre en una ventana nueva) tiene tres patrones para ellas: tree (vista en árbol), grid (rejilla de datos) y treegrid (rejilla con filas jerárquicas). Son los widgets compuestos más exigentes: aplican todo lo que viste en «Widgets compuestos», pero en dos dimensiones. En la lección anterior viste que una tabla que se lee, aunque tenga botones, debe seguir siendo una <table> normal; aquí verás qué hacer cuando de verdad se trabaja dentro de ella.

Primero, la decisión

Si tienes…	Usa	Ejemplo
Datos que se leen, con enlaces o botones por fila	<table> nativa	Listado de expedientes con «Ver» y «Descargar»
Una jerarquía sin columnas en la que se elige o se abre un nodo	tree	Carpetas del gestor documental, árbol de categorías de una tienda en el panel de administración
Celdas que se recorren, se seleccionan o se editan una a una	grid	Hoja de asistencia de un curso, cuadrante de turnos
Filas que se despliegan y además tienen columnas	treegrid	Presupuesto con capítulos y partidas, hilos de correo
Navegación del sitio con varios niveles	<nav> con listas y botones disclosure	Menú principal de la sede electrónica

La última fila es importante. La APG incluye un ejemplo de árbol usado como navegación, pero para la mayoría de los sitios el patrón disclosure de la lección de menús es más sencillo, más conocido y no exige aprender un teclado nuevo. Un árbol que solo contiene enlaces a páginas es, casi siempre, una lista anidada de enlaces.

Vista en árbol (tree)

Un árbol tiene tres roles: tree en el contenedor, treeitem en cada nodo y group en el contenedor de los hijos de un nodo. Los nodos con hijos llevan aria-expanded; las hojas (nodos sin hijos), no.

<ul role="tree" aria-label="Carpetas del expediente 2025/0412">
  <li role="treeitem" aria-expanded="true" aria-labelledby="n-doc"
      aria-selected="false" tabindex="0">
    <span id="n-doc">Documentación aportada</span>
    <ul role="group">
      <li role="treeitem" aria-selected="true" tabindex="-1">Solicitud firmada.pdf</li>
      <li role="treeitem" aria-expanded="false" aria-labelledby="n-pla"
          aria-selected="false" tabindex="-1">
        <span id="n-pla">Planos</span>
        <ul role="group" hidden>…</ul>
      </li>
    </ul>
  </li>
</ul>

El aria-labelledby de los nodos con hijos apunta a su propia etiqueta para que su nombre accesible no incluya el texto de todos sus descendientes. Si el árbol permite elegir varios nodos, el contenedor lleva aria-multiselectable="true"; si los nodos tienen casillas, se usa aria-checked en vez de aria-selected. Y si cargas los hijos solo al desplegar, añade aria-level, aria-setsize y aria-posinset para que el lector pueda decir «nivel 2, 3 de 12» aunque el resto no esté en el DOM.

Tecla	Efecto en el árbol
Flecha abajo / Flecha arriba	Nodo visible siguiente o anterior, sin abrir ni cerrar nada
Flecha derecha	En un nodo cerrado, lo abre; en uno abierto, va a su primer hijo; en una hoja, no hace nada
Flecha izquierda	En un nodo abierto, lo cierra; en un hijo, sube al nodo padre
Inicio / Fin	Primer nodo / último nodo visible
Intro	Ejecuta la acción del nodo (abrir el documento, filtrar por la categoría)
Letras / *	Escritura anticipada; el asterisco, opcional, despliega todos los hermanos del nodo actual

Rejilla de datos (grid)

Una rejilla es una tabla convertida en widget compuesto: toda ella es una sola parada de Tab y las flechas se mueven de celda en celda. Puede construirse sobre una <table> con role="grid", que conserva la estructura de filas y cabeceras, o con elementos genéricos y los roles row, columnheader, rowheader y gridcell.

<table role="grid" aria-label="Asistencia, curso de accesibilidad" aria-rowcount="86">
  <thead>
    <tr aria-rowindex="1">
      <th scope="col" aria-sort="ascending">Apellidos</th>
      <th scope="col">Nombre</th>
      <th scope="col">Sesión 1</th>
    </tr>
  </thead>
  <tbody>
    <tr aria-rowindex="21">
      <td tabindex="0">García López</td>
      <td tabindex="-1">Ana</td>
      <td tabindex="-1"><input type="checkbox" tabindex="-1"
          aria-label="Ana García López, sesión 1"></td>
    </tr>
  </tbody>
</table>

El teclado de la APG para rejillas de datos: flechas para moverse por celdas; Inicio y Fin a la primera y última celda de la fila; Ctrl+Inicio y Ctrl+Fin a la primera y última celda de la rejilla; Re Pág/Av Pág, opcionales, para saltar varias filas. Si la rejilla permite seleccionar, la APG propone Mayús+Espacio para la fila y Ctrl+Espacio para la columna.

Celdas con controles: navegar y editar

La parte delicada son las celdas con algo dentro (un campo editable, una casilla, varios botones). Las flechas no pueden servir a la vez para moverse por la rejilla y para mover el cursor dentro de un campo. La APG lo resuelve con dos modos: en el modo de navegación, las flechas recorren celdas; Intro o F2 entran en la celda (el foco pasa al control o se activa la edición) y Escape vuelve a la navegación, devolviendo el foco a la celda. Si una celda contiene un único control simple, como la casilla del ejemplo, el foco puede ir directamente al control al llegar a la celda.

Rejillas con miles de filas

Las rejillas de las aplicaciones de gestión suelen renderizar solo las filas visibles (virtualización). Sin más información, el lector de pantalla dice «fila 3 de 20» cuando hay 1.250. aria-rowcount en la rejilla indica el total y aria-rowindex en cada fila su posición real; aria-colcount y aria-colindex hacen lo mismo con columnas ocultas. Si la rejilla es de solo lectura, decláralo con aria-readonly="true".

Rejilla en árbol (treegrid)

El treegrid combina las dos ideas: filas con columnas que, además, pueden tener filas hijas. En un presupuesto municipal, cada capítulo es una fila con su importe que se despliega en partidas; en un cliente de correo, cada hilo se despliega en sus mensajes. Las filas desplegables llevan aria-expanded y aria-level. El teclado depende de qué tenga el foco: si es una fila entera, Flecha derecha la despliega y Flecha izquierda la pliega o sube al padre; si es una celda, las flechas izquierda y derecha se mueven entre celdas. Es el patrón más complejo de la APG; impleméntalo solo si la jerarquía y las columnas son imprescindibles a la vez. A menudo, una tabla simple por capítulo con encabezados es suficiente.

Cómo comprobarlo

• Con teclado, recorre el árbol abriendo y cerrando con flechas y comprueba que Flecha izquierda desde un hijo sube al padre.
• Con lector de pantalla, cada nodo debe anunciar su nombre (solo el suyo), su estado (expandido o contraído, si tiene hijos), su nivel y su posición.
• En la rejilla, prueba Ctrl+Inicio, Ctrl+Fin, la entrada en una celda editable con Intro o F2 y la salida con Escape.
• En rejillas virtualizadas, baja hasta la mitad y comprueba que el lector anuncia el número de fila real.
• Compara tu implementación con los patrones de la APG: Tree View, Grid y Treegrid.

Resumen

• Elige el patrón por la estructura: <table> para leer, tree para jerarquías, grid para trabajar por celdas, treegrid para jerarquías con columnas.
• Un árbol usa tree, treeitem y group; aria-expanded va solo en los nodos con hijos.
• Una rejilla es una sola parada de Tab, con navegación por celdas y un modo de edición que se abre con Intro o F2 y se cierra con Escape.
• En datos virtualizados, aria-rowcount y aria-rowindex dan al lector las posiciones reales.
• role="grid" en una tabla de consulta empeora la accesibilidad si no se implementa su teclado.