Nom accessible en comandes ARIA

Què és un nom accessible?

El nom accessible és el text que el lector de pantalla llegeix en veu alta quan l’usuari arriba a un element interactiu. Per a un botó, és el text que explica l’acció. Per a un enllaç, és el text que descriu la destinació.

El criteri WCAG 4.1.2 exigeix que tots els components d’interfície d’usuari tinguin un nom que la tecnologia d’assistència pugui llegir. Quan afegeixes role="link", role="button" o role="menuitem" a un element, estàs prometent als lectors de pantalla que aquell element és interactiu. Si no té nom, l’usuari arriba a un element que sap que pot accionar, però no sap per a què serveix.

Per què és important?

Imagina’t un usuari de lector de pantalla navegant amb teclat. El lector anuncia «enllaç» però no diu res més. L’usuari no sap on porta ni si li interessa. Ha de fer clic a cegues o saltar-se l’element i perdre contingut potencialment rellevant.

Això passa exactament amb elements com <a id="content" role="link"></a>: l’element existeix al DOM, és focusable, i el lector de pantalla l’anuncia com a «enllaç» — però no té cap text ni etiqueta que expliqui res.

Com corregir-ho

Hi ha tres maneres d’aportar un nom accessible a una comanda ARIA:

1. Text visible a l’interior de l’element — la més senzilla i la preferida:

<!-- ✅ El text interior actua com a nom accessible -->
<div role="button">Enviar formulari</div>
<div role="link">Llegir més sobre accessibilitat</div>

2. aria-label — quan no pots afegir text visible, per exemple, un botó amb només una icona:

<!-- ✅ aria-label proporciona el nom accessible -->
<div role="button" aria-label="Tancar finestra">✕</div>
<a role="link" aria-label="Anar a la secció de contacte"></a>

3. aria-labelledby — quan el nom ja existeix en un altre element de la pàgina:

<!-- ✅ aria-labelledby apunta a l'element que conté el nom -->
<h2 id="titol-seccio">Serveis d'accessibilitat</h2>
<div role="link" aria-labelledby="titol-seccio"></div>

Errors habituals

L’error més freqüent és l’ancoratge buit usat com a àncora de pàgina. És un patró molt comú en WordPress i constructors de pàgines per crear punts de navegació interna:

<!-- ❌ Àncora buida sense nom accessible -->
<a id="content" role="link"></a>

La solució més senzilla és eliminar el role="link" si l’element no és un enllaç real, sinó només un punt d’ancoratge:

<!-- ✅ Àncora de navegació sense rol interactiu -->
<a id="content"></a>

<!-- O millor, amb un element no interactiu -->
<div id="content"></div>

Un altre error habitual: aria-label buit o aria-labelledby apuntant a un element que no existeix o que no té text:

<!-- ❌ aria-label buit — no proporciona cap nom -->
<div role="button" aria-label=""></div>

<!-- ❌ aria-labelledby apunta a un element inexistent -->
<div role="menuitem" aria-labelledby="element-que-no-existeix"></div>