Rols, estats i propietats; nom i descripció accessibles (4.1.2)

El criteri 4.1.2 Nom, funció i valor (A) és el cor de l'accessibilitat de qualsevol component: per a tot element d'interfície, el nom i la funció (rol) s'han de poder determinar per programa; els estats, les propietats i els valors que la persona pot modificar s'han de poder llegir i canviar per programa; i les tecnologies de suport han de rebre la notificació dels canvis. ARIA és el vocabulari amb què expressem tot això quan l'HTML no hi arriba. En aquesta lliçó ordenem aquest vocabulari.

Rols: què és l'element

El rol respon a la pregunta «què és això?». ARIA 1.2 defineix desenes de rols agrupats en categories:

• Rols de giny: button, checkbox, radio, switch, slider, tab, menuitem, option, combobox, textbox, link…
• Rols compostos, que contenen ginys: tablist, menu, listbox, radiogroup, tree, grid.
• Rols d'estructura: heading (amb aria-level), list, listitem, table, row, cell, img, group, presentation/none.
• Rols de landmark: banner, navigation, main, complementary, contentinfo, search, form, region.
• Rols de regió activa: alert, status, log, timer, marquee.
• Rols de finestra: dialog, alertdialog.

Gairebé tots tenen un equivalent HTML amb rol implícit (<button> és button, <h2> és heading de nivell 2, <nav> és navigation). Escriure el rol explícit sobre l'element natiu equivalent (<button role="button">) és redundant i inútil; les eines el marquen com a avís.

Alguns rols exigeixen una estructura concreta: un tab ha d'estar dins d'un tablist; un option, dins d'un listbox; un row, dins d'un table o grid; un menuitem, dins d'un menu o menubar. Si trenques aquesta jerarquia, el lector no sap interpretar el component.

Estats i propietats: com està i amb què es relaciona

Els atributs aria-* es divideixen en dos grups. Els estats canvien amb la interacció i cal actualitzar-los amb JavaScript:

Les propietats descriuen característiques i relacions més estables:

• Nom i descripció: aria-label, aria-labelledby, aria-describedby.
• Relacions: aria-controls (quin element controla), aria-owns (fills lògics fora del DOM), aria-activedescendant (quin descendent té el focus virtual).
• Rang i valor: aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext per a controls lliscants, barres de progrés i mesuradors.
• Comportament: aria-haspopup, aria-modal, aria-multiselectable, aria-required, aria-readonly, aria-level, aria-posinset, aria-setsize.
• Visibilitat: aria-hidden (que WAI-ARIA 1.2 (s'obre en una finestra nova) classifica, en realitat, com a estat).

<button type="button" role="switch" aria-checked="false" id="notif">
  Notificacions per correu
</button>

const sw = document.getElementById('notif');
sw.addEventListener('click', () => {
  const activo = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!activo));
});

Nom i descripció accessibles

Recordem del curs d'HTML l'ordre de càlcul del nom: aria-labelledby, aria-label, font nativa, title. Hi afegim ara matisos importants:

• aria-labelledby pot fer referència a diversos id i els concatena en ordre, inclòs el mateix element. És útil per compondre noms: aria-labelledby="boton-leer titulo-tarjeta" dona «Llegeix-ne més Pressupostos 2025»; si inverteixes l'ordre dels id, el nom serà «Pressupostos 2025 Llegeix-ne més».
• L'element referenciat pot estar amagat amb hidden o aria-hidden; el seu text es fa servir igualment per al nom. Això permet textos només per al nom sense mostrar-los.
• aria-label i aria-labelledby no funcionen de manera fiable en elements sense rol o amb rols genèrics (div, span) ni en alguns rols de text, com paragraph (el de p), code o strong, que prohibeixen expressament el nom. Posar aria-label en un <div> sense rol no serveix de res a la pràctica.
• La descripció (aria-describedby) és informació secundària: el lector l'anuncia després del nom, el rol i l'estat, sovint després d'una pausa, i alguns usuaris la desactiven. No posis mai a la descripció res que sigui imprescindible per entendre el control.
• Els rols de giny només admeten nom a partir del contingut en alguns casos (button, link, tab, menuitem, option, checkbox…). Un textbox, combobox o slider necessita aria-label, aria-labelledby o un <label>.

<div aria-label="Resultats de la cerca">…</div>
<span aria-label="Preu">189 €</span>

Notificar els canvis

L'última part de 4.1.2 diu que les tecnologies de suport han de rebre la notificació dels canvis d'estat. Això passa automàticament quan modifiques els atributs ARIA o les propietats natives (checked, disabled, value) de l'element que té el focus: el navegador genera l'esdeveniment d'accessibilitat corresponent. El que no es notifica és un canvi purament visual: canviar una classe CSS per pintar un botó com a «actiu» sense tocar aria-pressed deixa el lector sense informació. La regla és senzilla: cada estat visual ha de tenir un estat programàtic que l'acompanyi, i l'ideal és que el CSS depengui de l'atribut ([aria-pressed="true"]) i no d'una classe paral·lela.

Resum

• El rol diu què és l'element; gairebé sempre l'aporta l'HTML natiu, i els rols explícits han de respectar la jerarquia que exigeix ARIA.
• Els estats (aria-expanded, aria-checked, aria-selected, aria-current…) canvien amb la interacció i s'han d'actualitzar amb JavaScript; les propietats descriuen relacions i rangs.
• aria-label i aria-labelledby només funcionen en elements amb rol; no els facis servir en text normal.
• La descripció és secundària; el que és imprescindible va al nom o al contingut.
• Fes que el CSS depengui de l'atribut ARIA perquè l'estat visual i el programàtic no se separin mai.