Geef aan als een link in een nieuwe tab opent
Het is onhandig als je de ingevulde informatie van een formulier kwijt raakt als je een link opent. In formulieren is het daarom handiger dat links niet openen in hetzelfde browser-venster.
In de HTML kan dit met het attribuut target="_blank" in de link.
Een link openen in een nieuwe tab is geen standaard browser gedrag. Maak duidelijk hoe deze speciale links in formulieren werken, zodat de gebruiker bijvoorbeeld weet waarom de terugknop het niet doet. Voor screenreadergebruikers is dit extra belangrijk.
Daarnaast: alle gebruikers moeten dezelfde informatie krijgen, dus er moet ook een visuele indicatie zijn dat de link in een nieuwe tab opent.
Het aangeven kan op verschillende manieren: via een icoontje, via tekst en via een aria-label. Zo kun je voor ziende gebruikers een icoontje gebruiken en voor screenreadergebruikers visueel verborgen tekst.
Zorg dat de informatie over het openen van een nieuwe tab in de linktekst zelf is opgenomen. Dan wordt deze voorgelezen zodra de link focus krijgt. Als de tekst buiten (achter) de link staat bestaat de kans dat een screenreadergebruiker deze info mist.
Hiermee volg je de WCAG-richtlijn 3.2 Voorspelbaar: maak het uiterlijk en de bediening van webpagina's voorspelbaar.
Technieken voor een link openen in een nieuwe tab of venster
Alle informatie als zichtbare tekst in de linktekst plaatsen heeft de voorkeur, vanwege de eenvoud en eenduidigheid. Niet iedereen snapt alle icoontjes.
Doen
Alle informatie als zichtbare tekst in de link plaatsen.
<a href="#" class="utrecht-link utrecht-link--html-a" target="_blank">Lees het privacybeleid (opent in een nieuwe tab)</a>.
Doen
Zichtbaar icoontje plus onzichtbare, maar uitgesproken tekst voor screenreaders.
<a href="#" class="utrecht-link utrecht-link--html-a nlds-icon-ext" target="_blank">Lees het privacybeleid<span class="sr-only">, opent in een nieuwe tab</span></a>.
Doen
Zichtbaar icoontje plus een aria-label voor screenreaders.
<a href="#" class="utrecht-link utrecht-link--html-a nlds-icon-ext" target="_blank" aria-label="Lees het privacybeleid (opent in een nieuwe tab)">Lees het privacybeleid</a>
Niet doen
Informatie over het openen in een nieuwe tab alleen aan screenreadergebruikers geven.
<a href="#" class="utrecht-link utrecht-link--html-a" target="_blank" aria-label="Lees het privacybeleid (opent in een nieuwe tab)">Lees het privacybeleid</a>.
Niet doen
Informatie over het openen in een nieuwe tab voor iedereen weglaten.
<a href="#" class="utrecht-link utrecht-link--html-a" target="_blank">Lees het privacybeleid</a>.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.