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

"Lees meer"

"Lees meer"

Lees meer. Lees meer. Lees meer. Lees meer. Lees meer.

Zelfgemaakte focusindicator die onzichtbaar is

Zelfgemaakte focusindicator die onzichtbaar is

Tab. Tab. Tab. Waar ben ik? Je navigeert met je toetsenbord door een website. Elke knop en link zou een zichtbare focus moeten hebben. Maar je ziet… niets. Of een vage lichtblauwe gloed.

Afbeelding als link zonder beschrijvend alt

Afbeelding als link zonder beschrijvend alt

Een winkelwagen-icoon. Klik erop en je gaat naar je winkelwagen. Logisch.