Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Tabpaneel

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

Tabs zijn een set gelaagde inhoudssecties. Je toont één inhoudspaneel tegelijk. Elk paneel heeft een bijbehorend tab-element. Als je een tab activeert, zie je het bijbehorende paneel. De lijst met tab-elementen staat meestal aan de bovenkant van het zichtbare paneel.

Gebruik een tabpaneel:

  • Bij lange pagina’s met veel informatie (FAQ’s, handleidingen)
  • Als je de content logisch kunt opdelen in duidelijk gelabelde secties
  • Als gebruikers niet alle secties tegelijk hoeven te bekijken

Belangrijke termen:

  • Container: Dit is het element waar het tabpaneel in is opgebouwd.
  • Tab: Een element in de tab list. Dit werkt als label voor een paneel. Je activeert het om het paneel te tonen.
  • Paneel: Het element met de inhoud die bij een tab hoort.

Technische opbouw

  • (4.1.2) De container moet role="tablist" hebben
  • (4.1.2) Elke tab moet role="tab" hebben
  • (4.1.2) Elke tab moet een toegankelijke naam hebben die het onderwerp van het paneel beschrijft
  • (1.3.1) Alle tabs moeten binnen het tablist-element staan
  • (4.1.2) Elk paneel moet role="tabpanel" hebben
  • (4.1.1) Elke tab moet een uniek id hebben
  • (4.1.1) Elk paneel moet een uniek id hebben
  • (4.1.2) De actieve tab moet aria-selected="true" hebben
  • (4.1.2) Inactieve tabs moeten aria-selected="false" hebben
  • (4.1.2) Inactieve tabs moeten tabindex="-1" hebben
  • (1.3.1) Elke tab moet aria-controls hebben met het id van het bijbehorende paneel
  • (4.1.2) Elk paneel moet aria-labelledby hebben met het id van het bijbehorende tab
  • (1.3.1) Inactieve panelen moeten verborgen zijn (hidden of display:none)

Optioneel

  • (1.3.1) Bij verticale tabs: aria-orientation="vertical" toe (standaard is horizontal)

Component states

  • (4.1.2) Uitgeschakelde tabs: disabled

Toetsenbordbediening

  • Enter of Spatie:
    • Opent de tab (als de tabs niet automatisch openen)
  • Tab:
    • Gaat naar het volgende focusbare element in de tablist (meestal het tabpanel)
  • Pijltjestoetsen (horizontale tabs):
    • Pijl rechts: gaat naar de volgende tab
    • Pijl links: gaat naar de vorige tab
  • Pijltjestoetsen (verticale tabs):
    • Pijl omlaag: gaat naar de volgende tab
    • Pijl omhoog: gaat naar de naar vorige tab

Optionele toetsen

  • Home:
    • Gaat naar eerste tab
  • End:
    • Gaat naar laatste tab

Voorbeeld tabpaneel

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

Bronnen