De navigatie is een belangrijk onderdeel van een website. Door te zorgen dat alle bezoekers goed over een
website kunnen navigeren, krijgen ze toegang tot alle beschikbare informatie.
Een gestructureerde en consequente paginaopbouw en skiplinks zorgen dat bezoekers zonder veel moeite over de
pagina kunnen navigeren.
Geef webpagina's een titel die het onderwerp of doel van de pagina beschrijft
De paginatitel van een webpagina moet het onderwerp of doel van de pagina beschrijven. Een
beschrijvende paginatitel maakt het voor iedereen makkelijker om te navigeren door de website.
Paginatitels worden getoond in het venster van de browser of in het tabblad van de pagina. Met een goede
paginatitel kunnen bezoekers de pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen
open staan.
Goede paginatitels:
- beschrijven duidelijk het onderwerp of doel van de pagina.
- veranderen als een nieuwe pagina wordt ingeladen.
- hebben de unieke informatie vooraan.
- zijn uniform met de andere pagina’s.
- zijn beknopt.
- zijn uniek.
Paginatitels worden door hulptechnologieën gebruikt om de webpagina aan te duiden. Deze informatie
wordt als eerst gepresenteerd bij het openen van een pagina.
Gebruik het title-element in het
<head>-element in de code van de pagina. Beschrijf in dit element het onderwerp of
doel van de pagina.
In de code ziet dat er zo uit:
Geef links een linktekst die het doel van de link beschrijft
Geef links op een webpagina een linktekst waaruit het doel van de link duidelijk is af te leiden. Een beschrijvende linktekst is voor iedereen duidelijker. Zorg dat de linktekst zo is geformuleerd dat bezoekers direct weten waar de link naar verwijst.
Schrijf dus niet:
- Lees meer. (onduidelijk)
- LinkedIn. (onduidelijk)
Maar zeg wel:
- Lees meer de over digitale toegankelijkheid.
- Ga naar onze LinkedIn pagina.
Bezoekers die gebruik maken van een schermlezer kunnen een lijst met alle links gebruiken om over de
pagina te navigeren.
Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de
link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in
de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.
In de code ziet dat er zo uit:
Wat ook kan is het verbergen van een deel van de linktekst met CSS:
Een linktekst mag nooit leeg zijn. Zonder linktekst kan natuurlijk niet worden bepaald waar de link
naar verwijst. Een lege link is misschien niet zichtbaar op de pagina maar deze links komen wél terug in
de focus volgorde. Schermlezers merken deze ook link op.
In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over
functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstalternatief dat beschrijft
waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei hetzelfde
linkdoel, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van
hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.
Zorg dat herhalende blokken op een pagina overgeslagen kunnen worden
Op veel websites staan blokken content die op iedere pagina worden herhaald. Bijvoorbeeld het logo, het
navigatiemenu, het zoekveld, enz. Bezoekers die gebruik maken van een schermlezer, zoals
voorleessoftware of een brailleleesregel, en bezoekers die met het toetsenbord navigeren moeten, iedere
keer als ze op een pagina komen, bovenaan de pagina beginnen. De inhoud wordt steeds volledig
voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang.
Zorg daarom voor een manier dat zorgt dat bezoekers herhalende blokken kunnen overslaan. Dit kan grofweg
op 2 manieren worden opgelost:
- Voeg skiplinks toe.
- Groepeer onderdelen in de code.
Voeg skiplinks toe
Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee geef je
bezoekers de mogelijkheid om sneller bij een pagina-onderdeel te komen. Skiplinks zijn doorgaans niet
gelijk zichtbaar, maar worden ze pas zichtbaar als er met het toetsenbord door de pagina wordt
genavigeerd.
In de code ziet dat er zo uit:
Skiplinks horen het eerste element op een pagina te zijn. Zet ze dus bovenaan in de code en gebruik ze op iedere pagina waarop herhalende blokken staan.
Groepeer onderdelen in de code
Herhalende blokken overslaan kan ook door deze onderdelen te groeperen in de code. Hiervoor bestaan meerdere technieken. Door deze onderdelen te groeperen kunnen bezoekers die gebruik maken van hulptechnologieën gemakkelijk over de pagina navigeren. Deze bezoekers kunnen bijvoorbeeld een lijst van alle koppen gebruiken of direct naar een oriëntatiepunt navigeren.
- Gebruik een kop-element aan het begin van alle blokken op een pagina.
- Gebruik ARIA landmark-elementen zoals
<header>,<main>en<footer>maar ook bijvoorbeeld de navigatie en de zoekfunctie.
Dit moet wel op iedere pagina op dezelfde manier toegepast worden.
Zorg ook dat alle <iframe>-elementen een naam hebben zodat ze gemakkelijk
overgeslagen kunnen worden. Gebruik hiervoor het title-attribuut. Zorg dat deze
beschrijving het onderwerp of doel van het filmpje goed beschrijft.
In de code ziet dat er zo uit:
Zorg voor meerdere manieren om een pagina te vinden
Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.
Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.
Plaats pagina-onderdelen op iedere pagina in een vaste volgorde
Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.
Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.