Text d'enllaç que té sentit fora de context

Com naveguen realment els usuaris de lectors de pantalla

Abans de parlar de com escriure text d’enllaç, ajuda entendre com utilitza la gent els enllaços quan no pot veure la pàgina.

Els lectors de pantalla ofereixen una drecera que la majoria d’usuaris que hi veuen no saben que existeix: prement una única tecla (normalment la lletra L a la majoria de lectors de pantalla) es passa per tots els enllaços de la pàgina, llegint-los un per un, fora de context. Els usuaris ho fan servir per escanejar una pàgina ràpidament, de la manera com l’ull d’un usuari que hi veu podria fullejar els encapçalaments i els botons de crida a l’acció.

Si la teva pàgina té dotze enllaços que diuen “Llegeix més”, aquesta llista no té sentit. L’usuari sent: “Llegeix més. Llegeix més. Llegeix més. Llegeix més…”. No pot saber a on porta cap d’ells.

Aquest és el problema fonamental que l’accessibilitat del text d’enllaç intenta resoldre: cada enllaç s’ha de descriure a si mateix, perquè el context desapareix quan navegues per enllaços.

Què diu WCAG

2.4.4 Propòsit de l’enllaç (en context) al Nivell A requereix que el propòsit de cada enllaç es pugui determinar només a partir del text de l’enllaç, o a partir del text de l’enllaç juntament amb el seu context circumdant (el paràgraf, l’element de llista, la cel·la de taula o l’encapçalament on es troba).

2.4.9 Propòsit de l’enllaç (només l’enllaç) al Nivell AAA va més enllà i requereix el propòsit de l’enllaç només a partir del text de l’enllaç sense dependre del context. Aspirar a això és una bona idea encara que només apuntis a la conformitat AA.

2.5.3 Etiqueta al nom (Nivell A) requereix que quan un enllaç o botó tingui una etiqueta de text visible, el nom accessible comenci amb aquest text. Un botó d’icona etiquetat “Més informació sobre accessibilitat” amb un aria-label de “Fes clic aquí” no compleix aquest criteri.

Errors habituals i què fer en lloc seu

”Fes clic aquí” i “Llegeix més”

Aquests són els errors d’accessibilitat d’enllaços més estesos a la web.

<!-- No compleix: sense significat fora de context -->
<a href="/blog/wcag-compliance">Llegeix més</a>

<!-- Compleix: es descriu a si mateix -->
<a href="/blog/wcag-compliance">Llegeix la nostra guia de conformitat WCAG 2.2</a>

La solució gairebé sempre és senzilla: substitueix la frase vaga per un text que descrigui la destinació o l’acció.

Enllaços genèrics amb “aquí”

“Fes clic aquí per descarregar l’informe” no compleix per la mateixa raó: la paraula de l’enllaç en si és només “aquí”.

<!-- No compleix -->
<p>Per veure els resultats complets, fes clic <a href="/report.pdf">aquí</a>.</p>

<!-- Compleix: el text de l'enllaç descriu què s'està enllaçant -->
<p>Descarrega l'<a href="/report.pdf">informe d'auditoria d'accessibilitat 2025 (PDF)</a>.</p>

Fixa’t en l’indicador de PDF entre parèntesis: aquesta és una bona pràctica per informar els usuaris que seguir l’enllaç obrirà un PDF en comptes d’una pàgina web.

Enllaços a la mateixa destinació amb text diferent, o destinacions diferents amb el mateix text

Tots dos creen confusió. Si cinc enllaços de navegació diuen “Més informació” però apunten a pàgines de servei diferents, els usuaris no poden preveure on aterraran. A la inversa, dos enllaços diferents que diuen “guia de conformitat WCAG” però van a pàgines diferents són igualment confusos.

Enllaços i botons només amb icona

Un enllaç o botó que conté només una icona —sense text visible— ha de tenir un nom accessible proporcionat mitjançant aria-label o aria-labelledby. Sense això, els lectors de pantalla anuncien el nom del fitxer de la imatge de la icona o res en absolut.

<!-- No compleix: s'anuncia com a "enllaç, gràfic" o el nom del fitxer SVG -->
<a href="/social/twitter">
  <svg><!-- icona de twitter --></svg>
</a>

<!-- Compleix: aria-label proporciona el nom accessible -->
<a href="/social/twitter" aria-label="QualiBooth a Twitter">
  <svg aria-hidden="true"><!-- icona de twitter --></svg>
</a>

L’atribut aria-hidden="true" al SVG evita que els lectors de pantalla anunciïn el títol o el contingut del SVG; com que l’enllaç en si ja té una etiqueta, el contingut de la icona és redundant.

Utilitzar aria-label per complementar el text visible

Quan una pàgina té diversos enllaços de “Descarrega” i no pots canviar el text visible (una restricció de disseny), aria-label pot ampliar el nom accessible:

<!-- El text visible és "Descarrega" però el nom accessible és la cadena completa -->
<a href="/report-2025.pdf" aria-label="Descarrega l'informe d'accessibilitat 2025 en PDF">
  Descarrega
</a>

Un advertiment aquí: WCAG 2.5.3 requereix que el nom accessible comenci amb el text visible. “Descarrega l’informe d’accessibilitat 2025 en PDF” comença amb “Descarrega”: bé. “Informe d’accessibilitat 2025 — Descarrega el PDF” no ho fa: malament.

Enllaços que s’obren en una pestanya nova

Obrir una pestanya nova sense avisar desorienta els usuaris, particularment els que tenen discapacitats cognitives o els usuaris de lectors de pantalla que potser no s’adonen del que ha passat. Indica el comportament de pestanya nova al text de l’enllaç o amb una nota visualment amagada.

<!-- Assenyala el comportament de pestanya nova visualment i a la tecnologia d'assistència -->
<a href="https://example.com" target="_blank">
  Veure informe d'exemple
  <span class="sr-only">(s'obre en una pestanya nova)</span>
</a>

Quan el text d’enllaç funciona sense ser obvi

El context pot proporcionar legítimament el significat que falta sota WCAG 2.4.4. Un enllaç de “Descarrega” és acceptable si es troba en una cel·la de taula la capçalera de columna de la qual diu “Informe anual” i la capçalera de fila de la qual diu “2025”. El context fa que el propòsit sigui clar.

Això és diferent d’un enllaç de “Llegeix més” al final d’un paràgraf independent. El paràgraf proporciona context, però “Llegeix més” continua sense complir perquè el text de l’enllaç podria aplicar-se a qualsevol paràgraf: no identifica de manera única la destinació.

Enllaços d’imatge

Quan el contingut de l’enllaç és una imatge en comptes de text, l’atribut alt de la imatge es converteix en el nom accessible de l’enllaç. El text alternatiu hauria de descriure la destinació de l’enllaç, no la imatge en si.

<!-- L'alt descriu la destinació de l'enllaç, no l'aparença de la imatge -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Serveis d'auditoria d'accessibilitat">
</a>

Si la imatge és purament decorativa i va acompanyada de text visible al mateix enllaç, la imatge hauria de tenir alt="" per evitar anunciar el mateix text dues vegades.

Una auditoria ràpida que pots fer tu mateix

Obre la teva pàgina i mostra la llista d’enllaços utilitzant el teu lector de pantalla (o instal·la l’extensió de navegador gratuïta HeadingsMap o WAVE per veure els enllaços extrets del context). Llegeix la llista sencera. Si no pots saber a on va cada enllaç només a partir del text, necessita feina.

La solució més habitual és afegir un <span class="sr-only"> (visualment amagat, accessible per als lectors de pantalla) amb context addicional, o simplement reescriure completament el text de l’enllaç. Reescriure sempre és preferible: sovint millora la usabilitat per a tothom, no només per als usuaris de lectors de pantalla.

Per a una revisió exhaustiva dels enllaços del teu lloc i altres criteris WCAG, les nostres auditories manuals d’accessibilitat cobreixen el propòsit de l’enllaç com a part d’una revisió més àmplia feta per provadors que utilitzen tecnologia d’assistència cada dia.