Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.
Een switch is als een lichtknop: aan of uit. Het is direct duidelijk wat de huidige status is. Bij een switch gebeurt de actie direct als je schakelt. Zoals bij dark mode aan/uit, notificaties aan/uit, enz.
Gebruik een switch:
- Voor instellingen die direct effect hebben
- Als de verandering meteen zichtbaar is
- Voor binaire keuzes (aan/uit, ja/nee, waar/niet waar)
Technische opbouw
- (4.1.2) Een switch moet een
<button>-element gebruiken - (2.4.6) De knop moet een toegankelijke naam hebben die het resultaat van de actie beschrijft
- (4.1.2) De knop moet
role="switch"hebben - (4.1.2) Een ingeschakelde switch moet
aria-checked="true"hebben - (4.1.2) Een uitgeschakelde switch moet
aria-checked="false"hebben
Component staten
- (4.1.2) Uitgeschakeld:
disabled
Toetsenbordbediening
- Enter of Spatie:
- Schakelt de switch in/uit
Voorbeeld switch
See the Pen Switch by Niek (@niekd) on CodePen.
Bronnen
- Switch Pattern | APG | WAI | W3C (Engelstalig)
- Toggle Buttons (Engelstalig)
- On Designing and Building Toggle Switches (Engelstalig)