Vistes en arbre i graelles de dades (tree, grid i treegrid)

Les aplicacions de gestió (el gestor documental d'un ajuntament, l'ERP d'una empresa, el campus virtual d'una universitat) són plenes de dues estructures que un web informatiu gairebé mai no necessita: jerarquies que es despleguen, com un arbre de carpetes, i taules en què es treballa cel·la a cel·la, com un full de càlcul. L'APG (s'obre en una finestra nova) té tres patrons per a aquestes estructures: tree (vista en arbre), grid (graella de dades) i treegrid (graella amb files jeràrquiques). Són els ginys compostos més exigents: apliquen tot el que vas veure a «Ginys compostos», però en dues dimensions. A la lliçó anterior vas veure que una taula que es llegeix, encara que tingui botons, ha de continuar sent una <table> normal; aquí veuràs què cal fer quan de debò es treballa a dins.

Primer, la decisió

Si tens…	Fes servir	Exemple
Dades que es llegeixen, amb enllaços o botons per fila	<table> nativa	Llistat d'expedients amb «Mostra» i «Baixa»
Una jerarquia sense columnes en què es tria o s'obre un node	tree	Carpetes del gestor documental, arbre de categories d'una botiga al panell d'administració
Cel·les que es recorren, se seleccionen o s'editen una per una	grid	Full d'assistència d'un curs, quadrant de torns
Files que es despleguen i, a més, tenen columnes	treegrid	Pressupost amb capítols i partides, fils de correu
Navegació del lloc amb diversos nivells	<nav> amb llistes i botons disclosure	Menú principal de la seu electrònica

L'última fila és important. L'APG inclou un exemple d'arbre fet servir com a navegació, però per a la majoria de llocs el patró disclosure de la lliçó de menús és més senzill, més conegut i no exigeix aprendre un teclat nou. Un arbre que només conté enllaços a pàgines és, gairebé sempre, una llista imbricada d'enllaços.

Vista en arbre (tree)

Un arbre té tres rols: tree al contenidor, treeitem a cada node i group al contenidor dels fills d'un node. Els nodes amb fills porten aria-expanded; les fulles (nodes sense fills), no.

<ul role="tree" aria-label="Carpetes de l'expedient 2025/0412">
  <li role="treeitem" aria-expanded="true" aria-labelledby="n-doc"
      aria-selected="false" tabindex="0">
    <span id="n-doc">Documentació aportada</span>
    <ul role="group">
      <li role="treeitem" aria-selected="true" tabindex="-1">Sol·licitud signada.pdf</li>
      <li role="treeitem" aria-expanded="false" aria-labelledby="n-pla"
          aria-selected="false" tabindex="-1">
        <span id="n-pla">Plànols</span>
        <ul role="group" hidden>…</ul>
      </li>
    </ul>
  </li>
</ul>

L'aria-labelledby dels nodes amb fills apunta a la seva pròpia etiqueta perquè el seu nom accessible no inclogui el text de tots els seus descendents. Si l'arbre permet triar diversos nodes, el contenidor porta aria-multiselectable="true"; si els nodes tenen caselles, es fa servir aria-checked en lloc d'aria-selected. I si carregues els fills només en desplegar, afegeix-hi aria-level, aria-setsize i aria-posinset perquè el lector pugui dir «nivell 2, 3 de 12» encara que la resta no sigui al DOM.

Tecla	Efecte a l'arbre
Fletxa avall / Fletxa amunt	Node visible següent o anterior, sense obrir ni tancar res
Fletxa dreta	En un node tancat, l'obre; en un d'obert, va al seu primer fill; en una fulla, no fa res
Fletxa esquerra	En un node obert, el tanca; en un fill, puja al node pare
Inici / Fi	Primer node / últim node visible
Retorn	Executa l'acció del node (obrir el document, filtrar per la categoria)
Lletres / *	Escriptura anticipada; l'asterisc, opcional, desplega tots els germans del node actual

Graella de dades (grid)

Una graella és una taula convertida en giny compost: tota ella és una sola parada de Tab i les fletxes es mouen de cel·la en cel·la. Es pot construir sobre una <table> amb role="grid", que conserva l'estructura de files i capçaleres, o amb elements genèrics i els rols row, columnheader, rowheader i gridcell.

<table role="grid" aria-label="Assistència, curs d'accessibilitat" aria-rowcount="86">
  <thead>
    <tr aria-rowindex="1">
      <th scope="col" aria-sort="ascending">Cognoms</th>
      <th scope="col">Nom</th>
      <th scope="col">Sessió 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, sessió 1"></td>
    </tr>
  </tbody>
</table>

El teclat de l'APG per a graelles de dades: fletxes per moure's per les cel·les; Inici i Fi a la primera i l'última cel·la de la fila; Ctrl+Inici i Ctrl+Fi a la primera i l'última cel·la de la graella; Re Pàg/Av Pàg, opcionals, per saltar diverses files. Si la graella permet seleccionar, l'APG proposa Maj+Espai per a la fila i Ctrl+Espai per a la columna.

Cel·les amb controls: navegar i editar

La part delicada són les cel·les amb alguna cosa a dins (un camp editable, una casella, diversos botons). Les fletxes no poden servir alhora per moure's per la graella i per moure el cursor dins d'un camp. L'APG ho resol amb dos modes: en el mode de navegació, les fletxes recorren cel·les; Retorn o F2 entren a la cel·la (el focus passa al control o s'activa l'edició) i Escape torna a la navegació, retornant el focus a la cel·la. Si una cel·la conté un únic control simple, com la casella de l'exemple, el focus pot anar directament al control en arribar a la cel·la.

Graelles amb milers de files

Les graelles de les aplicacions de gestió solen renderitzar només les files visibles (virtualització). Sense més informació, el lector de pantalla diu «fila 3 de 20» quan n'hi ha 1.250. aria-rowcount a la graella indica el total i aria-rowindex a cada fila la seva posició real; aria-colcount i aria-colindex fan el mateix amb les columnes amagades. Si la graella és només de lectura, declara-ho amb aria-readonly="true".

Graella en arbre (treegrid)

El treegrid combina les dues idees: files amb columnes que, a més, poden tenir files filles. En un pressupost municipal, cada capítol és una fila amb el seu import que es desplega en partides; en un client de correu, cada fil es desplega en els seus missatges. Les files desplegables porten aria-expanded i aria-level. El teclat depèn del que tingui el focus: si és una fila sencera, Fletxa dreta la desplega i Fletxa esquerra la plega o puja al pare; si és una cel·la, les fletxes esquerra i dreta es mouen entre cel·les. És el patró més complex de l'APG; implementa'l només si la jerarquia i les columnes són imprescindibles alhora. Sovint, una taula simple per capítol amb encapçalaments és suficient.

Com comprovar-ho

• Amb teclat, recorre l'arbre obrint i tancant amb fletxes i comprova que Fletxa esquerra des d'un fill puja al pare.
• Amb lector de pantalla, cada node ha d'anunciar el seu nom (només el seu), el seu estat (expandit o contret, si té fills), el seu nivell i la seva posició.
• A la graella, prova Ctrl+Inici, Ctrl+Fi, l'entrada en una cel·la editable amb Retorn o F2 i la sortida amb Escape.
• En graelles virtualitzades, baixa fins a la meitat i comprova que el lector anuncia el número de fila real.
• Compara la teva implementació amb els patrons de l'APG: Tree View, Grid i Treegrid.

Resum

• Tria el patró per l'estructura: <table> per llegir, tree per a jerarquies, grid per treballar per cel·les, treegrid per a jerarquies amb columnes.
• Un arbre fa servir tree, treeitem i group; aria-expanded va només als nodes amb fills.
• Una graella és una sola parada de Tab, amb navegació per cel·les i un mode d'edició que s'obre amb Retorn o F2 i es tanca amb Escape.
• En dades virtualitzades, aria-rowcount i aria-rowindex donen al lector les posicions reals.
• role="grid" en una taula de consulta empitjora l'accessibilitat si no se n'implementa el teclat.