“Vorige. Volgende.”
Dat is het eerste wat een schermlezergebruiker hoort bij je carrousel. Vorige en volgende. Maar vorige en volgende van wat?
Geen idee. Want de content van de slides komt pas daarna in de HTML.
Dit is een veelgemaakte fout bij carrousels, sliders en image galleries. De navigatieknoppen staan boven de slides in de code. Visueel zijn ze met CSS naast of onder de slides gepositioneerd. Maar de schermlezer volgt de HTML.
Het resultaat: je hoort eerst de bediening, en pas daarna begrijp je wat je aan het bedienen bent.
De fix: content eerst, knoppen daarna.
<!-- Niet doen: knoppen voor de content -->
<div class="carrousel">
<button>Vorige</button>
<button>Volgende</button>
<div class="slide">Onze diensten</div>
</div>
<!-- Wel doen: content eerst -->
<div class="carrousel">
<div class="slide">Onze diensten</div>
<button>Vorige</button>
<button>Volgende</button>
</div>
Visueel kun je de knoppen met CSS positioneren waar je wilt — links en rechts van de slide, eronder, overlay. Maar in de code komt de content eerst.
Dit geldt ook voor: tabs met navigatie boven de content (dat is hier prima, want de tabs zijn labels), maar let op bij custom implementations waar de tabpanelen ver van de tabknoppen staan in de HTML.
