Escriu text descriptiu als enllaços

Què comprova aquesta auditoria

Inspecciona cada <a href> de la pàgina i calcula el nom accessible (text visible, aria-label o text alt d’una <img> filla). La comprovació falla quan:

El nom és buit (un <a><svg/></a> sense text ni etiqueta).
El nom és una frase genèrica: “clica aquí”, “aquí”, “llegeix més”, “saber-ne més”, “més”, “això”.
El mateix nom genèric apunta a URL diferents en llocs diferents de la pàgina; un usuari de lector de pantalla que llista tots els enllaços sent “clica aquí, clica aquí, clica aquí” sense manera de distingir-los.

Per què importa

Els usuaris de lector de pantalla naveguen llistant enllaços. A NVDA: Insert+F7. A VoiceOver: Ctrl+Option+U → Enllaços. L’usuari veu el text de l’enllaç fora de context, en ordre alfabètic, i en tria un. “Llegeix més” no li dona res.

Els usuaris vidents també llegeixen per sobre. Estudis d’eye-tracking (Nielsen Norman i tota replicació) mostren que els usuaris escanegen primer el text dels enllaços i salten la prosa de l’entorn. Els enllaços descriptius funcionen com a senyals d’orientació.
Posicionament de cerca. El text d’àncora dels enllaços interns és un dels pocs senyals textuals en què Google encara confia. Un enllaç “Clica aquí” a la teva pàgina de preus malbarata l’espai; “Preus de MetricSpot” no.
Citació en IA. ChatGPT, Perplexity i les AI Overviews de Google citen el text d’àncora quan mostren un enllaç en una citació. “Clica aquí” produeix una citació sense cap previsualització del que conté l’enllaç.

Com solucionar-ho

Fes que el text de cada enllaç descrigui el seu destí, fins i tot quan es llegeix fora de context.

No facis això:

<p>Per saber-ne més sobre els preus, <a href="/pricing/">clica aquí</a>.</p>

Fes això:

<p>Consulta els nostres <a href="/pricing/">plans de preus i prova gratuïta</a>.</p>

Enllaços amb només icona, utilitza aria-label:

<a href="https://twitter.com/metricspot" aria-label="MetricSpot a X">
  <svg aria-hidden="true">…</svg>
</a>

L’aria-hidden="true" al SVG impedeix que el contingut accessible de la icona s’escapi; l’aria-label proporciona el nom. Sense això, els lectors de pantalla anuncien “enllaç” amb les dades de path que puguin extreure.

Targetes “Llegeix més” (llistes d’entrades de blog). La solució és estendre l’àncora per cobrir tota la targeta o incloure el títol de l’entrada:

<!-- Malament: tots els "Llegeix més" són idèntics -->
<article>
  <h3>Per què els teus CWV s'enfonsen</h3>
  <p>Tres patrons que veiem…</p>
  <a href="/blog/cwv/">Llegeix més</a>
</article>

<!-- Millor: el títol esdevé l'enllaç -->
<article>
  <h3><a href="/blog/cwv/">Per què els teus CWV s'enfonsen</a></h3>
  <p>Tres patrons que veiem…</p>
</article>

<!-- O: context visualment amagat afegit -->
<a href="/blog/cwv/">Llegeix més<span class="sr-only"> sobre Core Web Vitals</span></a>

Diversos enllaços idèntics a destins diferents. Si tens diversos botons “Edita” en una taula, afegeix el context de la fila de forma invisible:

<a href="/users/42/edit">Edita<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Edita<span class="sr-only"> Alex Diaz</span></a>

Linters. eslint-plugin-jsx-a11y inclou una regla anchor-has-content. Afegeix una regla personalitzada que prohibeixi el text d’àncora literal “clica aquí” / “llegeix més”, tots dos són banderes vermelles el 100% del temps.

Preguntes freqüents

És acceptable “Llegeix més →” si està visualment associat amb un encapçalament?

Els usuaris vidents l’associen amb el titular de sobre; els usuaris de lector de pantalla el senten aïllat. O fas que el titular sigui l’enllaç (millor) o afegeixes <span class="sr-only"> sobre [títol de l'entrada]</span> per mantenir el disseny visual i afegir el context.

I les icones d’enllaç extern?

La icona és decorativa; o l’amagues amb aria-hidden="true" o inclous “(enllaç extern)” com a text visualment amagat. No confiïs només en la icona per als usuaris de lector de pantalla.

Obrir un enllaç en una pestanya nova compta com a descriptiu?

No, target="_blank" és un comportament, no un nom. Si vols que els lectors de pantalla ho anunciïn, inclou “(s’obre en una pestanya nova)” com a text visible o sr-only. A molts usuaris no els agrada el comportament inesperat de pestanya nova; si l’has d’utilitzar, indica-ho.