target=”_blank”: wanneer gebruik je het wel en wanneer niet?

Links kunnen een target-attribuut hebben dat bepaalt wat er gebeurt als je erop klikt. Een van de mogelijke waarden is _blank: daarmee vertel je de browser dat de link in een nieuw venster of tabblad moet openen, afhankelijk van de instellingen van de gebruiker.

Lang werd target niet als geldige code gezien, maar veel ontwikkelaars gebruikten het toch. Sinds HTML5 mag het weer. Maar zou je het ook willen? In dit artikel zet ik vijf redenen op een rij om het niet te doen, en drie situaties waarin het wel zinvol kan zijn.

Niet doen: omdat je het zelf handig vindt

Leuk of niet, _blank verandert het standaardgedrag van een link. Standaard opent een link in hetzelfde venster, alsof er target="_self" op staat. Misschien heb jij een voorkeur voor een nieuw tabblad, maar voor de meeste gebruikers is het standaardgedrag prima. Ze zijn eraan gewend, en wie een nieuw tabblad wil, kan dat zelf kiezen met Ctrl- of Cmd-klik of de middelste muisknop. Als jij die keuze afdwingt, ontneem je ze die controle.

Niet doen: omdat je wilt dat bezoekers op je site blijven

Wil je dat bezoekers op je site blijven, zorg dan dat ze een reden hebben om te blijven. Je zou zelfs kunnen zeggen dat het een vorm van arrogantie is: mijn site is zo belangrijk dat hij altijd open moet blijven staan.

Niet doen: omdat het een externe link is

Interne links openen gewoon, externe links in een nieuw tabblad: dat hoor je vaak, alsof het een vaste afspraak is. Dat is het niet. Deze reden hangt sterk samen met de vorige twee, en je breekt er bewust het verwachte gedrag mee op het moment dat een bezoeker je site verlaat.

Niet doen: omdat het een link naar een pdf is

Moderne browsers openen een pdf gewoon in het browservenster, en met de terugknop ben je net zo snel weer op je pagina.

Niet doen: omdat je klant het wil

Ik snap het als je deze discussie niet met je klant wilt aangaan, je energie is ook maar beperkt. Je kunt het bijvoorbeeld zo uitleggen:

Standaard opent een link in hetzelfde venster. Er zijn goede redenen om daarvan af te wijken en daar praten we graag over, maar voor de meeste links doen we het niet. We willen bezoekers niet frustreren door ze onze voorkeuren op te dringen; we willen dat ze zich prettig voelen op de site.

Wel doen: de gebruiker speelt media af

Bijvoorbeeld muziek, een video of een podcast. Klikt de bezoeker op een link en gaat hij daarna terug, dan stopt het afspelen. Hier kun je ervoor kiezen om de link in een nieuw tabblad te openen.

Wel doen: de gebruiker is bezig op de pagina

Een bezoeker vult een formulier in en halverwege staat een link naar voorbeelden of voorwaarden. Opent die link in hetzelfde venster, dan kan het formulier leeg zijn als hij terugkeert. Een nieuw tabblad voorkomt dat.

Wel doen: een technische uitzondering

Soms dwingt de omgeving je ertoe, bijvoorbeeld in webapplicaties, e-mailclients of ingesloten widgets waarin een gewone link niet goed werkt.

Als je het gebruikt: doe het netjes

Kies je toch voor _blank, let dan op twee dingen:

• Vertel het de bezoeker. Volgens de webrichtlijnen (WCAG) moet vooraf duidelijk zijn dat een link in een nieuw venster opent, bijvoorbeeld met de tekst “(opent in nieuw tabblad)” of een herkenbaar icoon met een tekstalternatief. Vooral voor mensen met een schermlezer is het anders verwarrend dat de terugknop niet meer werkt.
• Voeg rel=”noopener” toe bij externe links. Zonder dat attribuut kon de geopende pagina vroeger via window.opener jouw pagina omleiden naar een phishingsite. Moderne browsers doen dit tegenwoordig automatisch, maar rel="noopener" erbij zetten kan geen kwaad.

<a href="https://www.voorbeeld.nl" target="_blank" rel="noopener">
  Voorbeeldsite (opent in nieuw tabblad)
</a>

Dit artikel is gebaseerd op When to use target=”_blank” van CSS-Tricks.