Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Switch

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)

Technische opbouw

  • Gebruik een <button>-element met role="switch"
  • Geef de switch een toegankelijke naam
  • Voor ingeschakelde switch:
    • Geef de switch de waarde aria-checked="true"
  • Voor een uitgeschakelde switch:
    • Geef de switch de waarde aria-checked="false"

Voorbeeld switch

HTML 
<!-- Switch code -->
<div class="switch-container">
  <span id="notifications">
    E-mail notificaties
  </span>
  <button id="switch" class="switch" role="switch" aria-checked="false" aria-labelledby="notifications"></button>
</div>
CSS 
/* Switch stijlen */
.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px;
}

.switch {
  position: relative;
  width: 50px;
  height: 24px;
  background: black;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s;
  border: none;
}

.switch[aria-checked="true"] {
  background: #0066cc;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch[aria-checked="true"]::after {
  transform: translateX(26px);
}
JavaScript 
// Switch functionaliteit
class Switch {
  constructor() {
    this.switchElement = document.getElementById('switch');
    if(this.switchElement) {
      this.init();
    }
  }
  
  init() {
    this.switchElement.addEventListener('click', () => this.toggle());
    this.switchElement.addEventListener('keydown', (e) => {
      if(e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        this.toggle();
      }
    });
  }
  
  toggle() {
    const isChecked = this.switchElement.getAttribute('aria-checked') === 'true';
    this.switchElement.setAttribute('aria-checked', isChecked ? 'false' : 'true');
  }
}

new Switch();

Toetsenbordbediening

  • Enter of Spatie:
    • Schakelt de switch in/uit

Beoordeling

Component

  • (4.1.2) Een switch moet een <button>-element gebruiken
  • (4.1.2) Een switch moet de rol switch hebben (role="switch")
  • (4.1.2) Een switch moet een toegankelijke naam hebben
    • (2.4.6) De toegankelijke naam moet het resultaat is van de actie beschrijven
  • (4.1.2) Een ingeschakelde switch moet aria-checked="true" hebben
  • (4.1.2) Een uitgeschakelde switch moet aria-checked="false" hebben

Bronnen