Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Carrousel

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Carousels zijn populair maar vaak een toegankelijkheidsnachtmerrie. Bewegende content, automatisch afspelen, onduidelijke navigatie: Het kan allemaal fout gaan. Maar het kan ook goed!

De belangrijkste regel: gebruikers moeten de carousel kunnen pauzeren. Bewegende content is voor veel mensen storend of zelfs onmogelijk te lezen. Een pauzeknop is dus een must.

Elke slide moet:

  • Een duidelijk label hebben (Slide 1 van 5)
  • Met het toetsenbord bereikbaar zijn
  • Aangeven welke slide actief is

Technische opbouw

  • (4.1.2) De container moet role="region" of role="group" hebben
  • (4.1.2) De region moet een toegankelijke naam hebben die het onderwerp van de carrousel beschrijft
  • (4.1.2) Alle knoppen moeten een <button>-element zijn
  • (2.4.6) Alle knoppen moeten een toegankelijke naam hebben die het resultaat van de actie beschrijft
  • (4.1.1) Elke slide moet een uniek id hebben
  • (4.1.1) De slides-container moet een uniek id hebben
  • (4.1.2) Elke slide moet role="group" hebben
  • (2.4.6) Elke slide moet een toegankelijke naam hebben die de positie-informatie beschrijft
  • (1.3.1) De huidige slide moet aria-current="slide" hebben
  • (1.3.1) De niet-zichtbare slides moeten verborgen zijn (hidden of display: none)
  • (4.1.2) De vorige/volgende-knoppen moeten aria-controls hebben met het id van de slides-container
  • (4.1.3) Bij automatische rotatie moet de slides-container aria-live="off" hebben
  • (4.1.3) Bij handmatige navigatie moet de slides-container aria-live="polite" hebben

Optioneel

  • (4.1.2) De carrousel-container moet aria-roledescription="carousel" hebben
  • (4.1.2) Elke slide moet aria-roledescription="slide" hebben

Component staten

  • (4.1.2) Uitgeschakelde knoppen: disabled

Toetsenbordbediening

  • Tab:
    • Gaat naar het volgende focusbare element in de carrousel
  • Shift + Tab:
    • Gaat naar het vorige focusbare element in de carrousel

Optionele toetsen

  • Pijltjestoetsen:
    • Pijl recht: gaat naar de volgende slide
    • Pijl links: gaat naar de vorige slide

Focus management

  • Zet rotation control altijd vóór de slides in tab-volgorde
  • De focus mag niet op verborgen slides terechtkomen

Voorbeeld carrousel

See the Pen Carrousel by Niek (@niekd) on CodePen.

Bronnen