Een carrousel met aanbiedingen. Elke slide heeft een “Bekijk aanbieding”-link. Je tabt door de pagina. Je bereikt de carrousel.
Maar de link in de actieve slide? Niet focusbaar. tabindex="-1".
De developer heeft alle interactieve elementen in de slides een tabindex="-1" gegeven. Waarschijnlijk om te voorkomen dat je door onzichtbare slides tabt. Goed bedoeld. Maar nu kun je ook de actieve slide niet bedienen.
De oplossing: tabindex="-1" alleen op elementen in niet-actieve slides.
<!-- Niet doen: alles onbereikbaar -->
<div class="slide actief">
<a href="/aanbieding" tabindex="-1">Bekijk aanbieding</a>
</div>
<!-- Wel doen: actieve slide is bereikbaar -->
<div class="slide actief">
<a href="/aanbieding">Bekijk aanbieding</a>
</div>
<div class="slide inactief">
<a href="/andere" tabindex="-1">Andere aanbieding</a>
</div>
Bij elke slide-wisseling:
- Verwijder
tabindex="-1"van elementen in de nieuwe actieve slide - Voeg
tabindex="-1"toe aan elementen in de nieuwe inactieve slide - Optioneel: verplaats de focus naar de nieuwe actieve slide
Waarom is dit belangrijk?
Omdat de link in de slide vaak de hele reden is dat de carrousel bestaat. “Bekijk aanbieding.” “Lees meer.” “Bestel nu.” Als die link niet bereikbaar is, heeft de carrousel voor toetsenbordgebruikers geen functie.
