Ga naar hoofdinhoud

Anchor

Het anchor-element heeft een href-attribuut en wordt vaak gebruikt als hyperlink naar:

  • Webpagina's
  • Bestanden
  • E-mailadressen
  • Locaties op dezelfde pagina
  • Iets anders waar een URL naar verwijst De bestemming van de link moet tussen de <a> en </a> tag staan.

Er zijn verschillende anchorelementen:

  • In-page links. Ze linken naar verschillende secties of elementen op dezelfde pagina.
  • Skiplinks en jumplinks. Gebruik ze bijvoorbeeld om gebruikers te laten 'skippen' naar de belangrijkste onderdelen van een pagina. Ook zijn ze te gebruiken om te springen naar een specifiek blok op een pagina, zoals back-to-top.
  • Page links. Die linken naar een pagina binnen hetzelfde domein.
  • Externe links. Ze linken naar een pagina buiten het domein.
  • Functionele links. Die roepen functionaliteit aan.

Technische opmerkingen​

Externe links moeten class="extern" target="_blank" rel="noopener noreferrer" krijgen. In de link staat een span.sr-only met de tekst 'opent in nieuw venster'.

Skiplinks en jumplinks zijn componenten in de gebruikersinterface waarmee een gebruiker snel naar een onderdeel van de tekst kan springen. Dit moet blijken uit de tekst.

De aanbevolen formulering is "spring naar ...". Soms is een andere formulering gepaster. Dat is niet erg, zolang de functie van de link maar uit de tekst blijkt. Webpagina's hebben vaak 3 skiplinks:

  • Ga naar inhoud
  • Ga naar footer
  • Ga naar zoeken

In-page links: wanneer te gebruiken​

Gebruik in-page links bij lange, informatieve pagina's om scrollen te verminderen. Veel content heeft een structuur met meerdere secties en duidelijke titels. Gebruik de titels als in-page links. Door erop te klikken, leidt u de lezer direct naar het punt waar die content begint. De link is meestal onderdeel van een lopende zin. Soms komen ze ook voor in een inhoudsopgave.

In-page links: wanneer niet te gebruiken​

Bij een pagina met korte secties is het niet nodig om in-page links te gebruiken. Gebruikers verwachten dat een link normaal gesproken naar een andere pagina gaat. Als die verwachting niet uitkomt, kan dat verwarrend zijn.

In-page links: hoe te gebruiken​

In-page links kunnen een inhoudsopgave laten zien, een back-to-top link, indexpagina of FAQ's. Zorg ervoor dat de linktekst nauwkeurig aangeeft waar hij precies naar verwijst. Zorg er ook voor dat de linktekst duidelijk is in de context van de zin. Gebruik altijd dezelfde tekst voor in-page links als voor de titel waar de link naartoe gaat. Zo weet de gebruiker dat hij bij de juiste content is gekomen.

Page links: wanneer te gebruiken​

Gebruik page links om de navigatie door uw website te verbeteren. Ze bepalen de architectuur en hiërarchie van de website. Dat is bijvoorbeeld te zien in de sitemap. Daarin zijn de verschillende lagen duidelijk te zien. Gebruik page links ook om naar een andere pagina of sectie te navigeren zonder een nieuwe taak te starten.

Page links: hoe te gebruiken​

Leg altijd duidelijk uit waar een page link naartoe leidt. Ook zonder hun context moeten de links namelijk begrijpelijk zijn. Zet het meest relevante zoekwoord vooraan. Gebruik geen vage of algemene labels voor links. Volg de conventies voor gemeenschappelijke functies. Zo wordt het voor gebruikers met schermlezers gemakkelijker om de links alfabetisch te vinden.

Gebruik externe links om te linken naar pagina's die buiten het domein van de website liggen.

Als u een externe link gebruikt, komt er een 'externe link'-icoon achter de tekstlink te staan. Dat geeft aan dat de gebruiker naar een andere website navigeert. Let op dat het icoontje het volgende sr-only (dus: visueel verborgen) alternatief heeft: "opent in nieuw venster".

Gebruik functionele links in de volgende gevallen: Om een 'mailto:'-koppeling te maken die opent in een e-mailprogramma. Om een telefoonnummer automatisch te bellen. Om een tekstlink te maken met het woord 'downloaden' en het downloadicoon erachter.

Verminder dubbelzinnigheid door een label met een icoon op te nemen. Zorg dat zowel de icoon als de tekst een link is.

Gedrag en toegankelijkheid​

  • Gebruik een label voor duidelijkheid en toegankelijkheid. Screenreader-software voegt vaak audio-feedback toe wanneer het een anchor link leest. Schermvergrotende software doet dat niet. Een label gebruiken lost dat op.
  • Ga na of de tekst van de anchor link duidelijk is voor iemand die het bijbehorende icoontje niet ziet. Geef eventueel een tekstueel alternatief.
  • Als er een link "product" is met rechts daarvan een vergrootglasicoontje, is visueel duidelijk dat hier "product zoeken" wordt bedoeld. Dat is alleen niet duidelijk voor iemand die alleen de tekst "product" leest. Dit is een voorbeeld van dat het icoontje essentieel is om de functie van de link te begrijpen. Het is daarom aan te raden om de zoekfunctie ook in de tekst duidelijk te maken. Doe dat bijvoorbeeld met de tekst "product zoeken".
  • Stel dat er een link "Google" is, met rechts daarvan een icoontje om aan te geven dat een externe website wordt geopend. U moet voor dit icoontje een tekstueel alternatief geven. Maar omdat het icoontje niet essentieel is om te begrijpen wat de link doet, hoeft het tekstuele alternatief niet zichtbaar te zijn. Gebruik daarom een sr-only span om het aan te bieden. Formuleer het bijvoorbeeld als: Google <span class="sr-only">(Opent in nieuw venster)</span>
  • Als de anchor link verwijst naar een deel van de huidige pagina ('same page link'), dan moet je dit voor gebruikers van screenreaders duidelijk maken door "spring naar" sr-only voor de linktekst te zetten. Bijvoorbeeld: <span class="sr-only">spring naar</span> inhoudsopgave.

Bronvermelding​