Navigatie

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:

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 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:

Maar zeg wel:

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.

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. Voer hiervoor skiplinks toe aan de pagina.

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.

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.

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.