"Bekijk aanbiedingen groter dan groter dan"

“Bekijk aanbiedingen »”

Ziet er prima uit. Dat pijltje geeft richting. Je weet dat je ergens naartoe gaat.

Een schermlezer leest: “Bekijk aanbiedingen groter dan groter dan.”

Het >> teken is geen pijl. Het is het wiskundige symbool voor “groter dan”. En een schermlezer leest het voor zoals het heet.

<!-- Niet doen -->
<a href="/aanbiedingen">Bekijk aanbiedingen >></a>
<!-- "Bekijk aanbiedingen groter dan groter dan" -->

<!-- Wel doen: geen decoratieve tekens -->
<a href="/aanbiedingen">Bekijk aanbiedingen</a>

<!-- Of: visueel pijltje dat verborgen is -->
<a href="/aanbiedingen">
  Bekijk aanbiedingen
  <span aria-hidden="true"> &rarr;</span>
</a>

aria-hidden="true" verbergt het pijltje voor schermlezers. Het is zichtbaar op het scherm maar wordt niet voorgelezen.

Andere tekens die verrassend worden voorgelezen:

• | — “verticale balk”
• & — “en-teken” of “ampersand”
• / — “schuine streep”
• • — “opsommingsteken”

Vermijd decoratieve tekens in linktekst. Gebruik CSS of aria-hidden voor visuele toevoegingen.