Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Accordeon

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

Een accordeon is perfect om veel content compact te presenteren. Het is een verzameling knoppen waarmee je content kunt tonen of verbergen. Met deze toon/verberg-knoppen kunnen gebruikers zelf kiezen welke informatie ze willen zien.

Gebruik een accordeon:

  • Bij lange pagina’s met veel informatie (FAQ’s, handleidingen)
  • Als je de content logisch kunt opdelen in duidelijk gelabelde secties
  • Om gebruikers te laten kiezen welke content ze willen zien

Belangrijke onderdelen:

  • Container: Dit is het element waar de accordeon in is opgebouwd.
  • Titel: Dit is het label van een sectie. Het is gelijk ook een bedieningselement om de content te tonen of verbergen.
  • Paneel: Dit is de sectie met content die hoort bij het label.

Technische opbouw

  • (4.1.2) De titel van de accordeon moet een <button>-element zijn
  • (2.4.6) De knop moet een toegankelijke naam hebben hebben die het onderwerp beschrijft
  • (4.1.1) De knop moet een uniek id hebben
  • (4.1.1) Elk paneel moet een uniek id hebben
  • (4.1.2) Een uitgevouwen knop moet aria-expanded="true" hebben
  • (4.1.2) Een samengevouwen knop moet aria-expanded="false" hebben
  • (4.1.2) Samengevouwen panelen moeten verborgen zijn (hidden of display: none)
  • (1.3.1) Elke knop moet aria-controls hebben met het id van het bijbehorende paneel
  • (1.3.1) Elk paneel moet aria-labelledby hebben met het id van de bijbehorende knop

Optioneel

  • (1.3.1) De knop moet in een kop-element staan (<h1> t/m <h6>)
  • (1.3.1) Voor accordeon groepen: De container moet role="region" met aria-label hebben

Component staten

  • (4.1.2) Uitgeschakelde panelen: disabled

Toetsenbordbediening

  • Enter of Spatie:
    • Bij een samengevouwen paneel: opent het paneel
    • Bij een uitgevouwen paneel: klapt het paneel in
    • Als er maar één paneel open mag zijn: sluit het andere paneel
  • Tab:
    • Gaat naar het volgende focusbare element in de accordeon of zichtbaar paneel
  • Shift + Tab:
    • Gaat naar het vorige focusbare element in de accordeon of zichtbaar paneel

Optionele toetsen

  • Pijltjestoetsen:
    • Pijl omlaag: gaat naar de volgende accordeon titel
    • Pijl omhoog: gaat naar de vorige accordeon titel
  • Home:
    • Gaat naar de eerste accordeon titel
  • End:
    • Gaat naar de laatste accordeon titel

Focus management

  • Na het openen van een paneel blijft de focus op de knop

Voorbeeld accordeon

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

Bronnen