Quan redactem enllaços en una pàgina web, poques vegades pensem com els interpreta una persona amb discapacitat visual que navega amb un lector de pantalla. Frases com fes clic aquí o més informació poden semblar inofensives, però per a moltes persones representen una barrera.
En aquest article aprendràs com escriure enllaços accessibles, descriptius i comprensibles, alineats amb les pautes d’accessibilitat web (WCAG) i amb les bones pràctiques de UX Writing.
Com navega un lector de pantalla pels enllaços?
Els usuaris de lectors de pantalla, com ara JAWS, NVDA o VoiceOver, poden accedir a una llista de tots els enllaços d’una pàgina, sense context. En aquesta llista, només es llegeix el text d’ancoratge de cada enllaç.
Què passa si tothom diu “fes clic aquí”?
Exactament: no hi ha manera de saber on porten. Per exemple:
- “Fes clic aquí”
- “Més info”
- “Veure més”
Així és impossible entendre el propòsit dels enllaços. Això trenca amb el criteri 2.4.4 de les WCAG, que estableix que el propòsit de cada enllaç ha de poder determinar-se pel seu text, sol o en conjunt amb el context immediat.
Per què “fes clic aquí” és una mala pràctica?
- No és descriptiu: No indica cap a on porta l’enllaç.
- Depèn del context visual: Les persones sense visió no poden “veure” allò que envolta l’enllaç.
- És problemàtic per a la navegació per teclat o pantalla tàctil: El terme “clic” és específic de ratolí.
- No ajuda el SEO ni l’escaneig ràpid del contingut.
- Redueix la usabilitat i accessibilitat general del lloc.
En resum: és una pràctica obsoleta i inclusivament excloent.
Aleshores… Com escriure enllaços accessibles?
La regla general és senzilla:
El text de l’enllaç ha de descriure clarament la destinació o l’acció esperada.
Alguns consells clau:
- Usa verbs actius i precisos.
- No repetiu la URL com a text de l’enllaç.
- Evita frases genèriques com “aquí”, “això”, “llegir més”.
- Si l’enllaç és dins d’una imatge o botó, afegeix un atribut alt o aria-label descriptiu.
Abans i Després: Exemples d’enllaços accessibles
| ABANS (NO ACCESSIBLE) | DESPRÉS (ACCESSIBLE) |
|---|---|
| Fes clic aquí | Descarrega la guia completa d’accessibilitat web |
| Més informació | Coneix com funciona un lector de pantalla |
| Llegeix això | Consulta les pautes WCAG oficials |
| Veure vídeo | Mira el vídeo sobre disseny inclusiu |
| Això us pot interessar | Descobreix bones pràctiques d’enllaços accessibles |
Tip Pro: I si l’enllaç està en una imatge o botó?
- Quan utilitzeu una imatge com a enllaç, us heu d’assegurar que l’atribut alt descrigui l’acció. Per exemple:
- Si utilitzeu un botó (per exemple, a React o amb JavaScript), podeu utilitzar aria-label:
Així, un lector de pantalla llegirà el que deu, no simplement “imatge”, “botó”, o pitjor encara: res.
Recursos recomanats
- Documentació WCAG 2.4.4 – Propòsit de l’enllaç (en context)
- Extensió WAVE per auditar accessibilitat web
- Guia d’accessibilitat de WebAIM
- axe DevTools per a Chrome i Firefox
Bones Pràctiques Finals per a Enllaços Web Accessibles
- Revisa els teus enllaços amb lectors de pantalla o eines com WAVE.
- Assegureu-vos que tots els enllaços tinguin propòsit clar fora de context.
- Si utilitzeu enllaços en sèrie (per exemple, en llistes), varia el text d’ancoratge.
- Integra els enllaços de forma natural a la redacció (no al final com “llegir més”).
- Afegeix enllaços semàntics en HTML () i no amb
o simulats.
