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:

  1. Voeg skiplinks toe.
  2. Groepeer onderdelen in de code.

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.

Let op: Dit is een effectieve manier om blokken met content over te slaan voor bezoekers die gebruik maken van hulptechnologieën. Bezoekers die over de pagina navigeren met alleen het toetsenbord kunnen hier geen voordeel uit halen.

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: