Errors habituals amb ARIA i com detectar-los

Després d'auditar centenars de llocs es repeteixen sempre els mateixos errors d'ARIA. No són errors exòtics: són còpies de fragments de codi sense entendre la promesa que fan, atributs posats «per si de cas» i estats que s'obliden d'actualitzar. Aquesta lliçó els cataloga, explica què sent la persona usuària en cada cas i dona el mètode per detectar-los abans que arribin a producció.

Els errors més repetits

1. Rols redundants o no vàlids

<button role="button">…</button>
<nav role="navigation">…</nav>
<div role="boton">…</div>
<span role="text">…</span>

Els dos primers són inofensius però inútils. El tercer fa servir un rol que no existeix (els rols estan en anglès i s'escriuen exactament com a l'especificació), així que el navegador l'ignora. El quart fa servir un rol que no forma part d'ARIA 1.2 i que té un suport inconsistent. Un rol no vàlid equival a no tenir rol.

2. Rol sense comportament

<div role="button" onclick="abrir()">Obre el panell</div>

El lector anuncia «Obre el panell, botó». La persona intenta prémer Retorn: no passa res, perquè l'element ni tan sols rep el focus. És la violació simultània de les regles 1 i 3. La correcció és fer servir <button>; si no és possible, afegir tabindex="0" i el gestor de Retorn i Espai.

3. Estats que no s'actualitzen

aria-expanded="false" escrit a l'HTML i mai canviat per JavaScript; aria-selected="true" a totes les pestanyes alhora; aria-checked que no segueix el clic. La persona sent «contret» amb el panell obert. Fes que el CSS depengui de l'atribut perquè aquests oblits també es vegin a la pantalla.

4. aria-hidden en elements enfocables o en contingut visible important

<a href="/perfil" aria-hidden="true">El meu perfil</a>
<main aria-hidden="true">…</main> <!-- oblidat després de tancar un modal -->

El primer cas produeix una parada de Tab muda. El segon és un clàssic dels modals fets a mà: en obrir-lo s'amaga la resta de la pàgina i en tancar-lo ningú no la restaura, de manera que el contingut principal desapareix per sempre per al lector. Fes servir inert o <dialog> i comprova l'estat després de tancar.

5. Referències trencades

aria-labelledby="titulo" quan no hi ha cap element amb id="titulo", o aria-controls apuntant a un id que va canviar en una refactorització. El nom queda buit o es perd la relació, i ningú no se n'adona perquè visualment no canvia res. En aplicacions amb components reutilitzables, a més, els id fixos es dupliquen quan el component apareix dues vegades a la pàgina; genera identificadors únics per instància.

6. Atributs en elements que no els admeten

<div aria-label="Notícies">…</div>
<p aria-expanded="true">…</p>
<input type="text" aria-checked="true">

ARIA defineix quins estats i propietats admet cada rol. aria-expanded no té sentit en un paràgraf, aria-checked no s'aplica a un quadre de text i aria-label en un div sense rol s'ignora. Les eines automàtiques detecten la majoria d'aquestes combinacions.

7. aria-label que contradiu el text visible

<button aria-label="Submit form">Envia la sol·licitud</button>

El control per veu no reconeix «prem Envia la sol·licitud» perquè el nom és un altre; incompleix 2.5.3 Etiqueta en el nom. També és freqüent l'aria-label que s'ha quedat en anglès després de traduir la interfície, o que descriu la icona («lupa») en lloc de l'acció («Cerca»).

8. Regions actives que no anuncien o que anuncien de més

Creades amb el missatge a dins, en contenidors enormes, totes assertive, o aria-live al contenidor d'una llista que es repinta sencera amb cada tecla. Ho vam veure a la lliçó anterior; i l'ocultació mal feta (aria-hidden oblidat, role="presentation" en taules de dades) a la lliçó sobre amagar, anul·lar i desactivar.

9. Jerarquies trencades

role="tab" sense tablist, role="option" solts sense listbox, role="menuitem" en enllaços de navegació normals (que, a més, canvia el teclat esperat: en un menu es navega amb fletxes, no amb Tab). Fes servir role="menu" només per a menús d'aplicació de tipus escriptori, mai per a la navegació del lloc.

10. ARIA per «ajudar» el lector a llegir text

aria-label en paràgrafs per «llegir-los millor», role="text", aria-live en el contingut estàtic, tabindex="0" en encapçalaments. El lector ja llegeix tot el contingut; aquests afegits només generen soroll i parades sense funció.

Com detectar-los

Eines automàtiques

axe DevTools, WAVE, Lighthouse i l'inspector d'accessibilitat de Firefox detecten de manera fiable: rols no vàlids, atributs no permesos per al rol, valors incorrectes (aria-expanded="yes"), referències a id inexistents, id duplicats, rols sense la jerarquia pare requerida, elements enfocables amb aria-hidden, controls sense nom i rols redundants. És la part «sintàctica» del problema, i convé executar-la a cada compilació (ho veurem al curs de frameworks).

El que només detecta una persona

Cap eina no sap si aria-expanded s'actualitza en prémer, si el nom «Cerca» descriu realment el que fa el botó, si el role="alert" era necessari o si el menu hauria de ser una nav. Per a això:

1. Inspecciona l'arbre d'accessibilitat a les eines del navegador mentre interactues: el rol, el nom i els estats han de canviar com esperes.
2. Escolta amb un lector de pantalla (NVDA amb Chrome o Firefox és la combinació més representativa a Espanya) cada component en repòs, en enfocar-lo, en activar-lo i en tancar-lo. El que sentis ha de coincidir amb el que veus.
3. Prova amb control per veu (Accés per veu de Windows 11 o Control per veu de macOS) dient «prem» seguit del text visible dels controls: detecta els aria-label dessincronitzats.
4. Revisa el codi buscant aria- i, per a cada aparició, localitza la línia de JavaScript que l'actualitza. Si no n'hi ha i és un estat, és un error.

<div class="acordeon">
  <div class="cabecera" role="button" aria-expanded="false" onclick="toggle(1)">Terminis</div>
  <div id="panel1" aria-hidden="true">…</div>
</div>

<div class="acordeon">
  <h3><button type="button" aria-expanded="false" aria-controls="panel1">Terminis</button></h3>
  <div id="panel1" hidden>…</div>
</div>

boton.addEventListener('click', () => {
  const abierto = boton.getAttribute('aria-expanded') === 'true';
  boton.setAttribute('aria-expanded', String(!abierto));
  panel.hidden = abierto;
});

Resum

• Els errors típics: rols redundants o no vàlids, rol sense comportament, estats no actualitzats, aria-hidden en elements enfocables o en contingut visible, referències trencades, atributs no admesos, aria-label contradictori, regions actives mal creades, jerarquies trencades i ARIA sobre text estàtic.
• Les eines automàtiques detecten la sintaxi: rols, atributs i referències no vàlids.
• Només una persona detecta la semàntica: estats que no canvien, noms enganyosos, rols inadequats.
• Mètode: inspeccionar l'arbre mentre interactues, escoltar amb lector de pantalla, provar amb control per veu i buscar qui actualitza cada aria-.