Enllaços descriptius

El problema dels texts genèrics

Els lectors de pantalla permeten als usuaris demanar una llista de tots els enllaços de la pàgina. Quan aquella llista conté «Clica aquí, Clica aquí, Llegir més, Llegir més, Aquí, Aquí», és completament inútil. L’usuari no sap on porta cada enllaç sense llegir el context que l’envolta.

El criteri WCAG 2.4.4 exigeix que el propòsit de cada enllaç pugui ser determinat pel text de l’enllaç sol, o bé pel text de l’enllaç combinat amb el context del programa. L’ideal és que el text de l’enllaç sigui descriptiu per si sol, sense necessitat de context.

Exemples de bons i mals textos d’enllaç

— MAL: genèric i sense context —
<a href="/serveis">Clica aquí</a>
<a href="/blog/article">Llegir més</a>
<a href="/contacte">Aquí</a>

— BÉ: descriptiu i autosuficient —
<a href="/serveis">Veure els nostres serveis d'accessibilitat</a>
<a href="/blog/article">Llegir l'article sobre declaració d'accessibilitat</a>
<a href="/contacte">Contactar amb webaccessible.cat</a>

El cas del ‘Llegir més’ en blogs

El text «Llegir més» és un dels errors més habituals en blogs i llistes d’articles. Visualment té sentit perquè apareix al costat del títol i la descripció de l’article. Però per a un lector de pantalla que navega per links, és ambigu.

Les solucions son:

1. Canviar el text per un de descriptiu: «Llegir l’article sobre [títol]»
2. Afegir text visualment ocult dins l’enllaç:
   <a href="/article">Llegir més
<span class="sr-only">sobre com fer una declaració d'accessibilitat</span>
</a>
3. Usar aria-label a l’enllaç:
   <a href="/article" aria-label="Llegir més sobre com fer una declaració d'accessibilitat">
Llegir més
</a>

Enllaços buits o sense text

Un error diferent però relacionat: els enllaços sense cap text. Sovint apareixen en icones de xarxes socials o en logos que son links. Un <a href="https://instagram.com/empresa"><img src="instagram.svg"></a> sense alt text a la imatge és un enllaç sense nom accessible.

La solució: afegir alt text descriptiu a la imatge o aria-label a l’enllaç:

<a href="https://instagram.com/empresa" aria-label="Segueix-nos a Instagram">
<img src="instagram.svg" alt="">
</a>

Com detectar els errors

L’eina d’autoevaluació de webaccessible.cat detecta automàticament links sense nom accessible (link-name). Per als textos genèrics com «Clica aquí», la detecció automàtica és més difícil —l’eina veu que hi ha text, però no pot saber si és descriptiu. La revisió manual és imprescindible.

Una manera fàcil de revisar: activa el lector de pantalla del teu ordinador i navega pels links de la pàgina. Si la llista de links té sentit sense context, vas bé.