Link

Visueel voorbeeld:

Lorem ipsum

Html-voorbeeld:

              
<a href="">Lorem ipsum</a>

Externe link

Links naar pagina's buiten de huidige website.

Aandachtspunten:

  • Als er een link naar een externe site geplaatst wordt dient dit ook visueel kenbaar gemaakt te worden naar de gebruiker toe. Zodat de gebruiker weet dat een externe website geopend wordt.
  • Geef de link de rel="external" mee. Dit verteld zowel de gebruiker als de computer dat de gerefereerde pagina geen onderdeel uitmaakt van de huidige website. Zie voor meer informatie De MDN-documentatie over het rel-attribuut.
  • Indien de pagina waar naar gelink wordt niet ondersteund wordt, kan een nofollow attribuut toegevoegd worden aan de link. Zie De MDN-documentatie over het nofollow attribuut voor meer informatie.
  • Externe links dienen in de huidige pagina geopend te worden. Dit omwille van gebruikerservaring en toegankelijkheid. Verwijzen naar een nieuw tabblad kan namelijk verwarrend zijn voor gebruikers die gebruik maken van:
    • Mobiele apparaten
    • Hulptechnologiën
    • Gebruikers die slecht of minder goed kunnen zien
    Ook kan het verwarrend zijn voor gebruikers als de terug-knop niet terug wijst naar de oorspronkelijke pagina, wat een bijkomend effect is van een nieuw tabblad.
  • Situaties waarbij de gebruiker gestoord wordt in zijn/haar process kunnen wel vragen om een pagina in een nieuw tablad. Bijvoorbeeld:
    • Tijdens het invullen van een formulier, waarbij de gebruiker reeds ingevulde data verliest door het klikken op de link
    • Situaties waarin de gebruiker zelf interactie met de content is aangegaan. Bijvoorbeeld bij het bekijken van een video
    Bekijk voor meer informatie over het toevoegen van een link in een nieuw tabblad voor deze situaties: Link naar een nieuw tabblad

Visueel voorbeeld:

Lorem ipsum

Html-voorbeeld:

              
<a href="" rel="external">Lorem ipsum</a>

Link naar een nieuw tabblad

Soms is het voor de gebruikerservaring wenselijk om een link automatisch in een nieuw tabblad te openen.

Waarschuwing:In de basis dienen alle links in de huidige pagina te openen. Alleen in uitzonderinssituaties kan het nodig zijn om een nieuw tabblad te openen. Bekijk in die gevallen altijd eerst of de link op die plaats echt nodig is.

Aandachtspunten:

  • Enkel situaties waarbij de gebruiker gestoord wordt in zijn/haar proces vragen om een pagina in een nieuw tablad. Bijvoorbeeld:
    • Tijdens het invullen van een formulier, waarbij de gebruiker reeds ingevulde data verliest door het klikken op de link
    • Situaties waarin de gebruiker zelf interactie met de content is aangegaan. Bijvoorbeeld bij het bekijken van een video
    Bekijk voor meer informatie over het toevoegen van een link in een nieuw tabblad voor deze situaties: Link naar een nieuw tabblad
  • Indien het om een externe link gaat voeg aan het rel-attribuut de waarde external toe om aan te geven dat de gebruiker naar een externe pagina geleid wordt. Voor meer informatie zie Externe link
  • Voeg aan het rel-attribuut de waarde noopener toe. Omwille van veiligheid. Dit voorkomt tabnabbing ook wel reverse tabnabbing genoemd, een aanval waarbij de gelinkte pagina bijvoorbeeld doorgestuurd wordt naar een phishing pagina. Waarbij er bijvoorbeeld om login gegevens gevraagd kan worden. Voor meer informatie zie Owasp documentatie over tabnabbing.
  • Vertel de gebruiker dat de pagina in een nieuw tabblad opent. Bijvoorbeeld door dit tussen haakjes achter de link te plaatsen.

Voorbeeld

Visueel voorbeeld:

Lorem ipsum (pagina opent in een nieuw tabblad)

Html-voorbeeld:

              
<a href="http://example.com" target="_blank" rel="noopener">Lorem ipsum (pagina opent in een nieuw tabblad)</a>

Visueel voorbeeld naar externe pagina:

Lorem ipsum (pagina opent in een nieuw tabblad)

Html-voorbeeld:

              
<a href="http://example.com" target="_blank" rel="external noopener">Lorem ipsum (pagina opent in een nieuw tabblad)</a>
Terug naar het hoofdmenu