Wcag uitgelegd

Link opent in een nieuw venster zonder waarschuwing

Link opent in een nieuw venster zonder waarschuwing — WCAG 2.4.4 Linkdoel (in context) (post 4/14)

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.

Voor ziende muisgebruikers: mildly annoying. Voor toetsenbordgebruikers en schermlezergebruikers: verwarrend. De context is weg. Het vorige tabblad is vergeten.

En het icoontje dat aangeeft dat de link extern is? Dat is aria-hidden="true". De schermlezer ziet het niet.

<!-- Niet doen: geen indicatie -->
<a href="https://extern.nl" target="_blank">
  <svg aria-hidden="true" class="icoon-extern"></svg>
  Lees het artikel
</a>

<!-- Wel doen: tekst die het aangeeft -->
<a href="https://extern.nl" target="_blank">
  Lees het artikel (opent in nieuw venster)
</a>

<!-- Of: visueel verborgen tekst voor schermlezers -->
<a href="https://extern.nl" target="_blank">
  Lees het artikel
  <span class="sr-only">(opent in nieuw venster)</span>
  <svg aria-hidden="true" class="icoon-extern"></svg>
</a>

Overigens: overweeg of target="_blank" echt nodig is. In de meeste gevallen wil de bezoeker zelf bepalen of een link in een nieuw tabblad opent (Ctrl+klik of rechtermuisknop). Forceer het niet.

Related Posts

Kolommen die niet onder elkaar gaan

Kolommen die niet onder elkaar gaan

Sidebar links. Content rechts. Op een groot scherm: perfect. Bij 400% zoom: twee kolommen gepropt in 320 pixels. De sidebar neemt de helft in beslag. De content wordt zo smal dat je twee woorden per regel leest. Of je moet horizontaal scrollen.

Focus verdwijnt na het sluiten van een dialoogvenster

Focus verdwijnt na het sluiten van een dialoogvenster

Je klikt op “Verwijderen.” Een bevestigingspopup verschijnt. “Weet je het zeker?” Je drukt op “Annuleren.”

URL als linktekst

URL als linktekst

“h-t-t-p-s colon slash slash w-w-w dot example dot com slash rapport dash twee-duizend-vierentwintig dot p-d-f”