Sliders en carrousels toegankelijk maken (of weglaten)

Eerst de vraag die vaak wordt overgeslagen: heeft u die slider eigenlijk nodig? Een carrousel bovenaan de homepage komt meestal voort uit een compromis. Drie afdelingen willen alle drie bovenaan staan, en dan draait alles om de beurt voorbij. Voor de bezoeker is dat minder handig dan het lijkt. De tweede en derde dia worden weinig gezien, en voor mensen met een beperking is een draaiende slider vaak een obstakel. Toch kan een toegankelijke slider prima bestaan. Hieronder leest u wat daarvoor nodig is, en welke alternatieven er zijn.

Wat er misgaat bij een gewone slider

• Hij beweegt vanzelf. Iemand die langzaam leest, of die met een vergrootprogramma maar een stukje van het scherm ziet, is halverwege de zin als de dia al wisselt.
• Beweging leidt af. Voor mensen met ADHD of concentratieproblemen trekt een bewegend element steeds de aandacht weg van de rest van de pagina.
• Er is geen pauzeknop. Of die zit verstopt en is niet met het toetsenbord te bereiken.
• De pijltjes en bolletjes hebben geen naam. Een screenreader zegt “knop, knop, knop”.
• De verborgen dia’s zijn bereikbaar. Toetsenbordgebruikers tabben door links op dia’s die ze niet zien.
• Tekst staat in de afbeelding. De boodschap is dan onleesbaar bij inzoomen en onvindbaar voor screenreaders.

Wat WCAG vraagt van een slider

Het belangrijkste criterium is 2.2.2, “pauzeren, stoppen, verbergen”, op niveau A. Bewegende inhoud die automatisch start, langer dan vijf seconden duurt en naast andere inhoud staat, moet de bezoeker kunnen pauzeren, stoppen of verbergen. Een automatisch draaiende slider valt daar vrijwel altijd onder.

Daarnaast gelden de gewone eisen:

• Alles moet met het toetsenbord te bedienen zijn (2.1.1).
• Knoppen hebben een naam (4.1.2).
• De focus is zichtbaar (2.4.7).
• Tekst heeft voldoende contrast, ook over een foto (1.4.3).
• Bedieningsknoppen zijn groot genoeg om te raken; WCAG 2.2 noemt minimaal 24 bij 24 css-pixels (2.5.8).

Zo maakt u een slider toegankelijk

1. Geen autoplay, of een duidelijke pauzeknop

De beste keuze is een slider die niet vanzelf draait. De bezoeker bladert zelf. Wilt u toch autoplay, zet dan een zichtbare pauzeknop als eerste bedieningselement, zodat iemand met een toetsenbord hem meteen tegenkomt. Laat de slider ook stoppen zodra de bezoeker met de muis erboven hangt of er met het toetsenbord in komt.

Respecteer ook de instelling voor minder beweging. Heeft de bezoeker in zijn systeem aangegeven dat hij liever geen animaties ziet, start dan geen autoplay. Hoe dat werkt, leest u in de instelling reduced motion respecteren.

2. Bedienbaar met het toetsenbord

Vorige, volgende en pauze zijn echte button-elementen. Links op een dia zijn alleen bereikbaar als die dia zichtbaar is. Verborgen dia’s krijgen het attribuut inert of aria-hidden="true", en links daarin zijn dan niet focusbaar.

<section aria-roledescription="carrousel" aria-label="Uitgelicht">
  <button type="button">Pauzeren</button>
  <button type="button" aria-label="Vorige dia">...</button>
  <button type="button" aria-label="Volgende dia">...</button>

  <div aria-roledescription="dia" aria-label="1 van 3" role="group">
    ...
  </div>
  <div aria-roledescription="dia" aria-label="2 van 3" role="group" inert>
    ...
  </div>
</section>

Dit volgt in grote lijnen het carrouselpatroon uit de ARIA Authoring Practices Guide van het W3C, een goede referentie als u een slider laat bouwen of beoordelen.

3. Duidelijke namen

Pijltjes heten “Vorige dia” en “Volgende dia”. Bolletjes heten “Dia 1”, “Dia 2”, en de actieve krijgt aria-current="true". De pauzeknop verandert van tekst als hij is ingedrukt: “Pauzeren” wordt “Afspelen”.

4. Echte tekst op de dia

Kop en tekst staan in html over de afbeelding, met een donkere laag of kleurvlak voor voldoende contrast. De afbeelding zelf is dan meestal decoratief.

5. Rustig wisselen

Geef de bezoeker genoeg tijd. Een dia die na twee seconden al wisselt, is voor bijna niemand te lezen. Vermijd flitsende overgangen en heftige zoom- of schuifanimaties.

Sliderplugins in WordPress

Er zijn veel sliderplugins, en ook page builders zoals Elementor en Divi hebben een eigen slider. Ze verschillen sterk in toegankelijkheid. Controleer bij elke oplossing:

1. Kunt u autoplay uitzetten?
2. Is er een pauzeknop, en is die met de Tab-toets bereikbaar?
3. Hebben de pijltjes en bolletjes een naam? Kijk in de toegankelijkheidsweergave van de ontwikkelaarstools.
4. Springt de focus naar links op verborgen dia’s?
5. Kunt u de tekst als echte tekst invoeren, of alleen als afbeelding?

Sliders zijn ook vaak zware onderdelen die de laadtijd van de homepage drukken. Daarover gaat sliders en de snelheid van uw website.

Alternatieven die vaak beter werken

• Eén sterke hero. Eén beeld, één boodschap, één knop. Kies de belangrijkste en laat de rest op de pagina eronder staan.
• Een rij met drie kaarten. In plaats van drie dia’s die om de beurt verschijnen, drie blokken naast elkaar die op een telefoon onder elkaar komen. Alles is meteen zichtbaar.
• Een statische galerij voor foto’s, met een vergroting bij klikken.
• Een lijst met reviews in plaats van een draaiende reviewslider.

Deze oplossingen zijn eenvoudiger te bouwen, sneller, en voor iedereen bruikbaar zonder extra moeite.

Snel zelf testen

Open uw homepage en leg de muis weg. Druk op Tab tot u bij de slider komt. Kunt u hem pauzeren? Kunt u naar de volgende dia? Ziet u steeds waar de focus is? Belandt u op onzichtbare links? Als één van die antwoorden nee is, heeft uw slider aandacht nodig. Meer over bedienen zonder muis leest u op uw website bruikbaar maken met alleen een toetsenbord. De andere onderdelen van een toegankelijke site staan op de overzichtspagina over toegankelijkheid.