Zoekformulier

Zoeken

Filteren

Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Herhalende blokken met content omzeilen op een website

Over herhalende blokken met content

Veel websites hebben blokken met content die op iedere pagina worden herhaald. Bijvoorbeeld een logo, een zoekveld en navigatie. Voor mensen die hulptechnologieën gebruiken of die het toetsenbord gebruiken om te navigeren, zijn deze herhalende blokken met content niet handig. Vaak staat in deze blokken namelijk veel content die iedere keer hetzelfde is.

Een schermlezer, zoals voorleessoftware of een brailleleesregel, presenteert de content van een website van boven naar beneden. De hele inhoud van de website wordt op elke nieuwe pagina helemaal gepresenteerd. Ook mensen die het toetsenbord gebruiken om te navigeren moeten op elke nieuwe pagina bovenaan beginnen. Het navigeren duurt zo erg lang.

Gebruik skiplinks om herhalende blokken met content te omzeilen

Door skiplinks aan te bieden hoeven gebruikers niet elke keer langs herhalende blokken met content. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee kunnen zij sneller navigeren naar het gedeelte van de webpagina waar ze moeten zijn.

In de meeste gevallen is een enkele skiplink al genoeg. Maar bij een hele ingewikkelde pagina met veel herhalende elementen, zijn misschien meerdere skiplinks nodig.

Skiplinks toevoegen aan een website

Skiplinks hebben een anker (#) als waarde in het href-attribuut die verwijst naar een ID verderop in de pagina.

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.

In de code ziet dat er zo uit:

Als het onderdeel dat de focus moet krijgen geen bedieningselement is, geef dat element dan ook het tabindex-attribuut met de waarde “-1“. Zo kan het element ook de focus krijgen.

Om te zorgen dat de skiplink niet te veel impact heeft op het ontwerp van de website wordt het vaak verborgen en pas zichtbaar gemaakt als het de toetsenbordfocus krijgt.

Bijvoorbeeld met de CSS:

Zie ook