Typ iets om te zoeken...

Wcag uitgelegd

Link met een enkel teken

Link met een enkel teken — WCAG 2.4.4 Linkdoel (in context) (post 10/14)

A. A. A.

Drie links. Om de tekstgrootte aan te passen. Klein, normaal, groot.

Een schermlezer hoort: “Link. A. Link. A. Link. A.” Drie identieke links. Welke doet wat?

<!-- Niet doen: enkel teken zonder context -->
<a href="?size=small">A</a>
<a href="?size=medium">A</a>
<a href="?size=large">A</a>

<!-- Wel doen: met aria-labels -->
<a href="?size=small" aria-label="Kleine tekstgrootte">A</a>
<a href="?size=medium" aria-label="Normale tekstgrootte">A</a>
<a href="?size=large" aria-label="Grote tekstgrootte">A</a>

Dit speelt ook bij:

  • Social media links met alleen een icoon (geen tekst)
  • Sluitknoppen met alleen een “X”
  • Navigatiepijlen met alleen < en >
  • Sterren-beoordelingen

Elk interactief element met een enkel teken of icoon verdient een beschrijvend label.

Zelf verder met dit onderwerp

Related Posts

Zoekbalk in een tabel die wordt afgesneden

Zoekbalk in een tabel die wordt afgesneden

Je hebt een tabel met data. Erboven: een zoekbalk om te filteren. De tabel mag horizontaal scrollen — dat is de uitzondering. Maar die zoekbalk?

Link opent in een nieuw venster zonder waarschuwing

Link opent in een nieuw venster zonder waarschuwing

Je klikt op een link. Een nieuw tabblad opent. Je drukt op de terugknop. Niets. Want je zit in een nieuw tabblad. Er is geen geschiedenis.

Paginering: "1", "2", "3"

Paginering: "1", "2", "3"

Link: “1”. Link: “2”. Link: “3”. Eén, twee, drie wat? Pagina’s? Producten? Stappen?