Campus Design System

Appearance

2.4.1 Blokken omzeilen niveau A ​

Uitleg ​

Het WCAG-criterium 2.4.1 Blokken omzeilen vereist dat gebruikers in staat moeten zijn om grote blokken inhoud op een pagina snel over te slaan of te navigeren zonder dat ze elke keer door de volledige pagina moeten doorbladeren. Dit is vooral belangrijk voor gebruikers met een beperking, zoals visuele of motorische beperkingen, omdat zij anders elke keer opnieuw dezelfde blokken inhoud moeten doorlopen, wat tijdrovend en frustrerend kan zijn.

Dit criterium zorgt ervoor dat de gebruiker eenvoudig van de ene sectie naar de andere kan springen, bijvoorbeeld door gebruik te maken van knoppen, links of andere mechanismen die hen helpen om sneller door de pagina te navigeren.

Wat betekent dit in de praktijk? ​

Op een webpagina kan er inhoud zijn die herhaaldelijk voorkomt, zoals een navigatiemenu, een zijbalk, of andere vaste elementen. Als een gebruiker elke keer door deze inhoud moet navigeren om bij de relevante informatie te komen, kan dit de toegankelijkheid van de website negatief beïnvloeden. Het doel van 2.4.1 is ervoor te zorgen dat gebruikers niet elke keer dezelfde herhalende blokken inhoud hoeven te passeren.

Bijvoorbeeld:

  • Navigatiebalken die op elke pagina aanwezig zijn.
  • Headersecties met informatie die niet per se relevant is voor de specifieke pagina-inhoud.
  • Sidebar of advertenties die de gebruiker afleiden van hun hoofddoelen.

Gebruikers moeten in staat zijn om deze elementen snel over te slaan, zonder ze handmatig te moeten navigeren.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moeten websites mechanismen bieden waarmee gebruikers snel door de inhoud kunnen navigeren. Dit kan bijvoorbeeld door het toevoegen van een "Skip to content"-link, waarmee gebruikers snel naar de hoofdinhoud van de pagina kunnen springen.

Voorbeeld van het probleem ​

Stel je voor dat een website een navigatiebalk heeft die bovenaan elke pagina staat en dat gebruikers elke keer door deze balk moeten navigeren, zelfs als ze alleen de inhoud van de pagina willen lezen. Dit kan problematisch zijn voor gebruikers die met toetsenbordnavigatie werken of voor schermlezers, omdat ze elke keer door dezelfde inhoud moeten gaan.

Oplossing voor dit probleem ​

Een oplossing is om een knop of link toe te voegen die de gebruiker snel naar de hoofdinhoud van de pagina kan brengen.

Goed voorbeeld:

html
<!-- Voorbeeld van een "Skip to content" link bovenaan de pagina -->
<a href="#maincontent" class="skip-link">Ga naar de inhoud</a>

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Over ons</a></li>
    <li><a href="#services">Diensten</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main id="maincontent">
  <h1>Hoofdinformatie</h1>
  <p>Dit is de inhoud van de pagina.</p>
</main>

In dit voorbeeld is er een "Skip to content"-link die bovenaan de pagina staat. Wanneer een gebruiker deze link selecteert, wordt hij/zij direct naar de hoofdinhoud van de pagina geleid, waardoor de navigatiebalk wordt overgeslagen. Dit helpt gebruikers die met toetsenbord of schermlezers navigeren.

Slecht voorbeeld:

html
<!-- Geen optie om blokken over te slaan -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Over ons</a></li>
    <li><a href="#services">Diensten</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Hoofdinformatie</h1>
  <p>Dit is de inhoud van de pagina.</p>
</main>

In dit voorbeeld moeten gebruikers elke keer door de navigatiemenu’s navigeren, zelfs als ze de inhoud van de pagina willen lezen. Dit maakt het moeilijker voor mensen die gebruik maken van toetsenbordnavigatie of schermlezers.

Belangrijke overwegingen ​

  • Visuele gebruikersinterface: Biedt altijd een duidelijke manier voor gebruikers om belangrijke inhoud direct te bereiken zonder herhalende navigatieblokken.
  • Toegankelijkheidsopties: Het is niet voldoende om alleen visuele opties te bieden. Gebruikers die afhankelijk zijn van toetsenbordnavigatie of schermlezers moeten in staat zijn om de inhoud snel te vinden.
  • Plaats de bypass-link prominent: De "Skip to content"-link moet bij voorkeur bovenaan de pagina staan en makkelijk te activeren zijn.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool controleert of er voldoende bypass-links op een pagina aanwezig zijn, zodat herhalende inhoud eenvoudig kan worden overgeslagen. WAVE Tool.
  • aXe Accessibility Tool: Dit is een handige tool voor het testen van toegankelijkheidsrichtlijnen, inclusief die voor het overslaan van inhoudsblokken. aXe Tool.

Referenties ​