Zorg dat onderdelen die vaak herhaald worden overgeslagen kunnen worden

Veel websites bevatten blokken die op iedere pagina herhaald worden. Denk bijvoorbeeld aan het navigatiemenu of een blok met advertenties. Zorg ervoor dat bezoekers deze blokken kunnen overslaan.

Hoe pas ik dit toe?

Je kunt dit op twee manieren toepassen:

  1. Links toevoegen waarmee herhalende blokken overgeslagen kunnen worden.
  2. Onderdelen van de pagina met gebruik van code groeperen, zodat ze kunnen worden overgeslagen.

1. Links om blokken over te slaan

Je kunt op de volgende manieren links toevoegen om blokken over te slaan. Dit worden ook wel ‘skip-links’ genoemd.

  1. Skip-link naar belangrijkste onderdeel: Bovenaan iedere webpagina een link plaatsen die direct leidt naar het belangrijkste onderdeel van de pagina. Meestal is dat de hoofdinhoud van de pagina. Je kunt de link standaard zichtbaar maken of alleen op het moment dat de bezoeker er met de tabtoets naar toe tabt en de link de focus krijgt. Het is belangrijk dat deze link zo hoog mogelijk in de broncode staat, het liefst als eerste link.
  2. Per blok een link om het blok over te slaan: Bij elk blok met herhalende inhoud een link plaatsen om voorbij het blok te navigeren. Je plaats dan vlak voor het blok  een link waarmee de bezoeker naar de tekst direct onder het blok kan springen. Deze methode is niet altijd nodig. Alleen in gevallen waarbij er blokken met veel links voorkomen op een webpagina kan het nuttig zijn. Denk bijvoorbeeld aan een alfabetische index waarbij op elke letter van het alfabet geklikt kan worden. Dit is een lange lijst met links, die sommige bezoekers willen overslaan.
  3. Inhoudsopgave bovenaan pagina: Bovenaan de pagina een soort kleine inhoudsopgave maken met links naar de belangrijkste onderdelen op de pagina. Dit hoeven niet alleen onderdelen van de tekst te zijn, de zoekfunctie en het navigatiemenu vallen hier ook onder. Deze optie is vooral nuttig als er meerdere belangrijke onderdelen op een pagina staan en optie 1 dus minder logisch is.

2. Onderdelen met de juiste code groeperen

In plaats van met links kun je ook met code en techniek aan deze eis voldoen. Er zijn meerdere technieken om met code een groepering aan te brengen in de onderdelen van de pagina. Zo kun je koppen gebruiken voor alle belangrijke blokken op een pagina. Denk aan de hoofdinhoud, maar ook bijvoorbeeld de zoekfunctie, het hoofdmenu, een formulier, enzovoorts. Bezoekers met hulptechnologie kunnen aan de hand van de koppen snel naar een onderdeel springen. Met ARIA-attributen in de HTML-code kun je ook secties van een pagina aangeven. Een andere aanpak is om blokken te tonen of verbergen door deze blokken in- en uitklapbaar te maken. Meestal wordt dit gedaan met een programmeertaal zoals javascript.

Voorbeelden

Skip-link naar belangrijkste inhoud

Als eerste link in de broncode staat:

<a href="#inhoud">Direct naar de inhoud</a>

Lager in de broncode staat het onderdeel met de hoofdinhoud van de pagina. Deze heeft het id ‘inhoud, waarnaar je dus verwijst in de skip-link bovenaan de pagina. 

Per blok een link om het blok over te slaan

Een blok met links ziet er als volgt uit:

<h2 id="hoofdstuk1">Externe bronnen</h2>
<a href="#hoofdstuk2">Sla dit blok over</a>
<ul>
<li><a href="http://www.wikipedia.nl">Wikipedia</a></li>
<li><a href="http://www.volkskrant.nl">Volkskrant</a></li>
<li><a href="http://www.rivm.nl">RIVM</a></li>
<li>...</li>
</ul>
<h2 id="hoofdstuk2">Over dit verslag</h2>
<p>Tekst van hoofdstuk 2…</p>

Met de link direct onder de eerste kop kan de bezoeker naar het volgende hoofdstuk springen. Hij slaat hiermee de links die in het eerste hoofdstuk staan over.

Inhoudsopgave bovenaan pagina

De eerste links in de broncode zijn:

<ul>
<li><a href="#hoofdnavigatie">Spring naar hoofdnavigatie</a></li>
<li><a href="#nieuws">Spring naar nieuws</a></li>
<li><a href="#inhoud">Spring naar inhoud</a></li>
<li><a href="#zoekfunctie">Spring naar zoekfunctie</a></li>
</ul> 

Met deze skip-links kan de bezoeker naar alle belangrijke onderdelen van de pagina springen.

Hoe draagt dit bij aan een betere website?

Bezoekers die een website laten voorlezen omdat ze blind of slechtziend zijn en bezoekers die alleen met het toetsenbord navigeren hebben baat bij de mogelijkheid om blokken over te slaan. Elke keer als zij op een webpagina komen moeten zij namelijk bovenaan beginnen.

De voorleessoftware leest de onderdelen van de pagina voor op de volgorde waarop ze in de broncode staan. Staat het navigatiemenu bovenaan, dan wordt dit dus op elke nieuwe pagina helemaal voorgelezen. Bezoekers die navigeren met het toetsenbord moeten ook bovenaan beginnen. Zij kunnen niet rechtstreeks op een link middenin de webpagina klikken, zoals bezoekers die een muis gebruiken. In plaats daarvan moeten zij langs alle links van de webpagina gaan met de tabtoets.

Deze bezoekers kun je helpen door een manier te bieden om de blokken met herhalende inhoud over te slaan. Zij kunnen dan veel sneller naar het gedeelte van de webpagina gaan waar ze moeten zijn. Dit kan bezoekers veel frustratie, tijdverlies en zelfs pijn besparen.

Bouwer of redacteur?

In de meeste gevallen zal de bouwer moeten zorgen dat er een manier is om herhalende blokken over te slaan. Dat kan hij doen door hoog in de broncode skip-links te plaatsen, of door met code groeperingen te maken in de onderdelen van de pagina.

De redacteur kan in sommige gevallen zelf in de inhoud per blok een link toevoegen om het blok (bijvoorbeeld een paragraaf) over te slaan. Het moet dan in het CMS mogelijk zijn om id’s te geven aan bijvoorbeeld koppen, en het moet mogelijk zijn om een link naar een onderdeel op dezelfde pagina aan te maken. Bij het doel van de link vul je dan een hekje in (#), gevolgd door het id van het gedeelte waar je naar toe wilt springen.

Technische details

Hoort bij