VVeel 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.
Dit voorkomt dat mensen met een visuele handicap die gebruik maken van tekst-naar-spraaksoftware, op elke pagina het volledige navigatiemenu of de advertenties moeten herlezen en dus direct toegang hebben tot de informatie waarin ze geïnteresseerd zijn. Dit komt omdat de tekst-naar-spraaksoftware de elementen van de pagina leest in de volgorde waarin ze in de broncode voorkomen.
Mensen die alleen met het toetsenbord navigeren moeten deze blokken kunnen omzeilen om te voorkomen dat ze door alle links op de pagina gaan.
Dit zal hen tijd, pijn en frustratie besparen.
Hoe pas je dit toe?
Je kunt dit op 2 manieren toepassen:
- Links toevoegen waarmee herhalende blokken overgeslagen kunnen worden.
- Onderdelen van de pagina met gebruik van code groeperen, zodat ze kunnen worden overgeslagen.
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.
Skip link naar belangrijkste onderdeel
Bovenaan iedere webpagina plaats je een link 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 naartoe gaat en de link de focus krijgt.
- Het is belangrijk dat deze link zo hoog mogelijk in de broncode staat, het liefst helemaal bovenaan.
Voorbeeld:
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 met de skip-link.
Per blok een link om het blok over te slaan
Bij elke blok met herhalende inhoud plaats je een link om voorbij het blok te navigeren. Je plaatst 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.
Voorbeeld:
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="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.standaard.be">De Standaard</a></li>
<li><a href="https://www.vrt.be”>VRT</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
Bovenaan de pagina kan je een korte 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.
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, enzovoort.
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.
Voor ontwikkelaars
In de meeste gevallen zal de bouwer ervoor 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.