Ze zijn geliefde elementen op websites: carrousels, ook wel sliders of slideshows genoemd. Ze draaien prominent op de homepagina en laten je nieuwste artikelen, diensten of aanbiedingen zien. Dat klinkt als een slimme manier om veel informatie te delen op weinig ruimte.
Maar wist je dat een carrousel in de praktijk vaak zorgt voor irritatie bij je bezoekers? En erger nog: meestal zijn ze niet digitaal toegankelijk. Hierdoor zijn ze in de praktijk voor een deel van je bezoekers volledig onbruikbaar. In dit artikel leggen we je uit hoe je een carrousel wél gebruiksvriendelijk en toegankelijk maakt.
Waarom een standaard slider je klanten kost
Ons brein houdt van rust en overzicht. Bewegende elementen trekken automatisch de aandacht. Dat lijkt goed voor marketing, maar als een slider te snel gaat, raakt de bezoeker juist afgeleid van je echte boodschap.
Bezoekers die de tekst niet snel genoeg kunnen lezen, raken gefrustreerd en haken af. Dat kost je simpelweg conversie. Bovendien sluit je onbewust een grote groep mensen uit. Denk aan:
- Mensen met een visuele beperking die een schermlezer (voorleessoftware) gebruiken.
- Mensen met een motorische beperking die geen muis gebruiken, maar met een toetsenbord navigeren.
- Bezoekers die snel overprikkeld of afgeleid zijn door onverwachte bewegingen.
Tijdens onze WCAG-audits zien we dit heel vaak misgaan. Gelukkig kun je dit voorkomen!
De 4 pijlers van een digitaal toegankelijke carrousel
Volgens het W3C moet een carrousel aan een aantal vaste eisen voldoen. We hebben de techniek teruggebracht naar 4 begrijpelijke pijlers.
1. Zorg voor een pauzeknop
Niets is zo vervelend als tekst die wegschiet terwijl je net halverwege de zin bent. Begint je carrousel automatisch met draaien? Dan móet je een duidelijke, zichtbare pauzeknop toevoegen. Daarnaast is het een best practice om de slider automatisch te laten pauzeren als iemand er met de muis overheen gaat (hover) of deze met het toetsenbord selecteert.
Dit valt direct onder het WCAG-criterium voor pauzeren, stoppen en verbergen (2.2.2).
2. Volledige bediening met het toetsenbord
Veel bezoekers gebruiken de Tab-toets en pijltjestoetsen om door een website te navigeren. Jouw carrousel moet daarom zonder muis te bedienen zijn. Zorg dat je bezoeker gemakkelijk naar de knoppen ‘vorige’, ‘volgende’ en ‘pauze’ kan springen, zonder vast te komen zitten in een zogenaamde toetsenbordval.
3. Vertel schermlezers wat er gebeurt
Voor iemand die blind is, is een visuele slider onzichtbaar. Je moet de structuur daarom logisch opbouwen in je HTML-code en gebruikmaken van speciale ARIA-labels (zoals aria-live). Verandert de slide naar de volgende afbeelding? Dan moet de voorleessoftware van de gebruiker een seintje krijgen, zodat die weet welke informatie er nu op het scherm staat.
4. Zichtbare focus en hoog contrast
Als je met het toetsenbord door de carrousel navigeert, moet je altijd kunnen zien wáár je je precies bevindt. Zorg daarom voor een duidelijke, zichtbare focus-indicator (bijvoorbeeld een opvallend kader om de actieve knop). Let daarnaast scherp op het kleurcontrast: witte tekst over een drukke, lichte foto is voor niemand goed leesbaar.
Code voorbeeld van een toegankelijke carrousel
Voor het bouwen van een digitaal toegankelijke website hoef je het wiel gelukkig niet opnieuw uit te vinden. Er is ontzettend veel toegankelijke code beschikbaar die je direct kunt implementeren in je website. Neem bijvoorbeeld dit voorbeeld van een toegankelijke carrousel van het W3C. Op deze pagina van het W3C vindt je de broncode achter deze carrousel.
WCAG 2.2: Valideer je code
Een toegankelijke carrousel bouwen is een technische uitdaging. Je hebt er een goede samenwerking voor nodig tussen webdesign en webdevelopment. Als we bij Audit House een technisch toegankelijkheidsonderzoek uitvoeren, kijken we streng naar interactieve componenten zoals sliders. Door de techniek goed neer te zetten, voldoe je sneller aan de WCAG 2.2 niveau AA wetgeving rondom bedienbaarheid en structuur.