Relacions entre elements: referències per id i propietats de relació

L'HTML expressa moltes relacions per imbricació (un <li> pertany a la llista que el conté) o amb atributs natius (<label for>, headers a les taules). Quan la relació no es pot expressar així, perquè el text d'ajuda és lluny del camp, la llista de suggeriments es pinta al final del document o el ressaltat es mou per una llista sense que es mogui el focus real, ARIA ofereix propietats de relació. A la lliçó sobre rols i estats vas veure com es compon un nom amb aria-labelledby; aquí repassem el conjunt de relacions, com funcionen les referències per id en què es basen i quin suport real té cadascuna.

Com funcionen les referències per id

Gairebé totes les propietats de relació apunten a altres elements mitjançant el seu id. Unes admeten un sol identificador (aria-activedescendant, i a ARIA 1.2 també aria-errormessage i aria-details) i d'altres una llista separada per espais (aria-labelledby, aria-describedby, aria-controls, aria-owns). Les regles són senzilles, però s'incompleixen constantment:

• L'identificador ha de ser únic al document. Si hi ha dos elements amb el mateix id, el navegador en farà servir un (normalment el primer) i el resultat dependrà de l'ordre en què es va pintar la pàgina.
• La destinació ha d'existir quan el navegador calcula la relació. Una referència a un id inexistent no dona cap error visible: simplement no hi ha nom, ni descripció, ni relació.
• Els identificadors distingeixen majúscules i minúscules: ayuda-DNI i ayuda-dni són diferents.
• Les referències no travessen el Shadow DOM. En un component web amb shadow root (l'arbre encapsulat d'un component personalitzat), un aria-labelledby de l'interior no pot apuntar a un id del document principal, ni a l'inrevés. Si treballes amb components web, el text del nom o de la descripció ha de viure dins del mateix arbre que el control.
• Els components reutilitzables necessiten identificadors per instància. Un camp que es pinta dues vegades a la mateixa pàgina amb id="ayuda" fix trenca les dues relacions. Genera identificadors únics (a React, per exemple, amb useId).

<!-- Component «camp amb ajuda» fet servir dues vegades al mateix formulari -->
<label for="campo">Telèfon</label>
<input id="campo" aria-describedby="ayuda">
<p id="ayuda">Nou xifres, sense prefix</p>

<label for="campo">Correu electrònic</label>
<input id="campo" aria-describedby="ayuda">
<p id="ayuda">T'hi enviarem el justificant</p>

Les propietats de relació, una per una

aria-activedescendant: el focus que no es mou

En un cercador de municipis amb autocompletació, la persona escriu en un camp de text i, amb les fletxes, recorre els suggeriments. El focus real no pot sortir del camp, perquè llavors deixaria de poder escriure. La solució és aria-activedescendant: el camp conserva el focus i el seu atribut indica, mitjançant l'id, quina opció està activa en cada moment. El lector anuncia aquesta opció com si tingués el focus.

<label for="municipio">Municipi</label>
<input id="municipio" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="true"
       aria-controls="sugerencias" aria-activedescendant="mun-3">
<ul id="sugerencias" role="listbox" aria-label="Suggeriments">
  <li id="mun-1" role="option">Cartagena</li>
  <li id="mun-2" role="option">Lorca</li>
  <li id="mun-3" role="option" aria-selected="true">Múrcia</li>
</ul>

Perquè funcioni, el codi té quatre obligacions:

1. Actualitzar aria-activedescendant amb cada fletxa i buidar-lo (o treure'l) quan la llista es tanca.
2. Donar un id únic a cada opció i apuntar només a elements que existeixin i que siguin descendents de l'element amb focus o, en un combobox, opcions de la llista que controla.
3. Dibuixar amb CSS el ressaltat de l'opció activa, perquè el navegador no ho fa: sense això s'incompleix 2.4.7 Focus visible per a qui veu la pantalla.
4. Desplaçar la llista perquè l'opció activa quedi a la vista.

L'alternativa és el roving tabindex (moure el focus real entre els elements, amb tabindex="0" a l'actiu i -1 a la resta), que vas veure al curs N3-C3. Fes servir aria-activedescendant quan el focus s'hagi de quedar en un camp de text i el roving tabindex en els altres casos; els patrons complets es desenvolupen al curs N3-C5.

Posició i mida en conjunts

El lector calcula «element 3 de 20» comptant els elements que hi ha al DOM. Si la llista està paginada o virtualitzada (només existeixen al DOM les files visibles), aquest recompte és fals. ARIA permet declarar la posició i el total reals:

• aria-setsize i aria-posinset: mida del conjunt i posició de l'element, en llistes, opcions, pestanyes, elements d'arbre o articles d'un feed. Si el total és desconegut, ARIA 1.2 admet aria-setsize="-1".
• aria-level: nivell d'imbricació en arbres i en encapçalaments construïts amb role="heading".
• aria-rowcount, aria-rowindex, aria-colcount i aria-colindex: files i columnes reals d'una taula o graella de la qual només es pinta una part.

<ul aria-label="Tràmits">
  <li aria-posinset="41" aria-setsize="1250">…</li>
  <li aria-posinset="42" aria-setsize="1250">…</li>
</ul>

Descripcions: quant i què

Que aria-describedby tingui un bon suport no vol dir que admeti qualsevol cosa. La descripció es llegeix després del nom, el rol i l'estat, aplanada en un únic text: sense encapçalaments, sense llistes i sense enllaços operables. Per això:

• Mantén-la breu: format esperat, una restricció, el missatge d'error.
• No apuntis a blocs llargs (les condicions d'ús completes): es llegiran sencers cada vegada que el camp rebi el focus, i la persona no hi podrà navegar.
• No apuntis a contingut interactiu: l'enllaç que contingui es llegirà com a text, però no es podrà activar des d'allà.
• Si necessites diverses peces (ajuda i error), fes servir una llista d'identificadors en l'ordre en què vols que es llegeixin: aria-describedby="error-dni ayuda-dni".

Consulta la definició formal de cada propietat a l'especificació, per exemple la d'aria-activedescendant a WAI-ARIA 1.2.

Resum

• Les relacions ARIA es basen en referències per id: únics, existents, amb les majúscules exactes i dins del mateix arbre de Shadow DOM.
• aria-labelledby, aria-describedby i aria-activedescendant tenen un bon suport; aria-controls, aria-owns, aria-details, aria-errormessage i aria-flowto el tenen limitat o desigual.
• aria-activedescendant manté el focus al camp i assenyala l'opció activa, però el ressaltat visual i el desplaçament són responsabilitat teva.
• En llistes paginades o virtualitzades, aria-setsize i aria-posinset (i els seus equivalents per a files i columnes) donen la posició real.
• Les descripcions han de ser breus, sense contingut interactiu i en l'ordre de lectura desitjat.