Amagar, anul·lar i desactivar: aria-hidden, role="none", inert i aria-disabled

Tan important com afegir semàntica és saber retirar-la. Amagar al lector una icona decorativa, anul·lar la semàntica d'una taula feta servir per maquetar, deixar fora d'ús el fons d'una finestra modal o indicar que un botó encara no està disponible són operacions quotidianes, i cadascuna té la seva eina. Confondre-les produeix les parades de focus mudes i el contingut desaparegut que vam esmentar en explicar la regla 4. L'ocultació amb CSS es tracta al curs N3-C6; aquí ens centrem en el que fa cada mecanisme amb l'arbre d'accessibilitat, amb el focus i amb la interacció.

Tres preguntes per a cada mecanisme

Per triar bé, pregunta't de cada tècnica: es veu a la pantalla?, és a l'arbre d'accessibilitat (la percep el lector)? i es pot enfocar i fer servir?

aria-hidden: amagar només al lector

aria-hidden="true" retira l'element i tots els seus descendents de l'arbre d'accessibilitat, sense canviar res a la pantalla ni al teclat. Els seus usos legítims són concrets:

• Icones decoratives o redundants al costat d'un text que ja diu el mateix.
• Contingut duplicat: la miniatura i el titular d'una targeta que enllacen al mateix lloc, quan un dels dos enllaços es retira de l'ordre de tabulació amb tabindex="-1" i de l'arbre amb aria-hidden.
• Caràcters d'adorn (fletxes, pics dibuixats amb text, separadors «/»).

<!-- Correcte: la icona és decorativa, el nom el dona el text -->
<button type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24">…</svg>
  Baixa el certificat
</button>

<!-- Correcte: la fletxa és un adorn -->
<a href="/tramites">Mostra tots els tràmits <span aria-hidden="true">→</span></a>

I els seus límits, que convé saber de memòria:

• No el posis en res enfocable ni en un contenidor amb elements enfocables a dins (regla 4). Abans d'amagar un bloc, busca-hi enllaços, botons i camps a l'interior.
• No es pot «desfer» des de dins. Posar aria-hidden="false" en un descendent d'un element amagat no el torna a mostrar de manera fiable. Si una part s'ha de percebre, treu l'atribut del contenidor i posa'l només en el que vulguis amagar.
• Mai a <body> ni en grans zones de manera permanent: ARIA in HTML ho desaconsella expressament a <body>, i a la pràctica equival a deixar la pàgina buida per al lector.
• El text amagat continua servint per donar nom. Un element amb aria-hidden pot ser la destinació d'un aria-labelledby o aria-describedby; el seu text es fa servir igualment, com vas veure a la lliçó sobre rols i estats.

role="none" i role="presentation": treure el rol, no el contingut

Són sinònims (none es va afegir a ARIA 1.1 perquè és un nom més clar). Eliminen la semàntica de l'element, però el seu text i els seus descendents continuen a l'arbre. Es fan servir quan un element amb semàntica s'utilitza només per motius visuals: la taula de maquetació d'un butlletí per correu electrònic o d'un gestor de continguts antic, o la llista que només serveix per col·locar elements en fila.

Hi ha dues regles de funcionament que expliquen gairebé totes les sorpreses:

• Es propaga als fills obligatoris. <table role="presentation"> anul·la també la semàntica de les seves files i cel·les; <ul role="none">, la dels seus <li>. No afecta altres descendents: un enllaç dins d'una cel·la continua sent un enllaç.
• El navegador l'ignora si l'element és enfocable o té atributs ARIA globals (com aria-label o aria-describedby). En aquest cas exposa el rol implícit: un <button role="none"> continua sent un botó. És una protecció perquè res enfocable no quedi sense rol.

<table role="presentation" class="tarifas">
  <tr><th>Abonament</th><th>Preu</th><th>Validesa</th></tr>
  <tr><td>Jove</td><td>20 €</td><td>30 dies</td></tr>
</table>

inert: deixar fora de joc una zona sencera

L'atribut HTML global inert, disponible a tots els navegadors principals des del 2023, fa que l'element i tot el seu contingut no puguin rebre el focus ni clics, i l'exclou de l'arbre d'accessibilitat. És l'eina adequada per al fons d'una finestra modal construïda a mà, per a un menú lateral tancat que continua al DOM o per als passos d'un assistent que encara no estan actius.

<div id="pagina" inert>…capçalera, contingut, peu…</div>
<div role="dialog" aria-modal="true" aria-labelledby="titulo-aviso">
  <h2 id="titulo-aviso">La teva sessió caducarà aviat</h2>
  …
</div>

// En obrir
document.getElementById('pagina').inert = true;
// En tancar: imprescindible restaurar-lo
document.getElementById('pagina').inert = false;

Tres observacions. El diàleg ha d'estar fora del contenidor inert, o també quedarà inutilitzable. En tancar cal treure l'atribut, amb el mateix risc d'oblit que vam veure amb aria-hidden a la lliçó d'errors. I el contingut inert es continua veient normal: si la persona el veu però no el pot fer servir, indica-ho visualment (per exemple, enfosquint el fons). Si fas servir <dialog> amb showModal(), el navegador torna inert la resta de la pàgina automàticament; ho veuràs al curs N3-C5.

disabled davant d'aria-disabled

L'atribut natiu disabled treu el control de l'ordre de tabulació, impedeix els esdeveniments de clic, n'exclou el valor de l'enviament del formulari i l'exposa com a no disponible. Els components inactius queden exempts dels requisits de contrast d'1.4.3 Contrast (mínim). L'inconvenient: qui navega amb teclat no hi arriba mai, així que pot no descobrir que existeix ni per què no el pot fer servir.

aria-disabled="true" només canvia el que es comunica: el control continua sent enfocable i el lector l'anuncia com a no disponible, cosa que permet explicar-ne el motiu. A canvi, el bloqueig és responsabilitat teva: ARIA no impedeix el clic ni l'enviament.

<button type="submit" aria-disabled="true" aria-describedby="motivo">
  Confirma la cita
</button>
<p id="motivo">Tria un dia i una hora per continuar.</p>

boton.addEventListener('click', (evento) => {
  if (boton.getAttribute('aria-disabled') === 'true') {
    evento.preventDefault();
    anunciar('Tria un dia i una hora per continuar.');
  }
});

Abans d'inhabilitar, planteja't si cal. En molts formularis és millor deixar el botó d'enviament sempre actiu i, en prémer-lo, indicar què falta amb missatges d'error clars (3.3.1 Identificació d'errors). Per als camps el valor dels quals es pot llegir però no canviar, l'equivalent és readonly als camps natius o aria-readonly="true" en rols com textbox, gridcell o slider.

document.querySelectorAll('[aria-hidden="true"] :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]))')

Més informació: aria-hidden a WAI-ARIA 1.2 i l'atribut inert a MDN.

Resum

• Per a cada mecanisme, comprova tres coses: si es veu, si és a l'arbre d'accessibilitat i si es pot enfocar i fer servir.
• aria-hidden="true" amaga al lector sense tocar la pantalla ni el teclat: només per a adorns i repeticions, mai amb elements enfocables, i no es desfà des de dins.
• role="none" treu el rol però no el contingut, es propaga als fills obligatoris i s'ignora en elements enfocables o amb atributs ARIA globals.
• inert desactiva una zona sencera (focus, clics i arbre) i cal treure'l en acabar.
• disabled treu el control del recorregut del teclat; aria-disabled el manté descobrible, però obliga a bloquejar l'acció amb JavaScript.