Toggle

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

Een toggle is als een schakelaar tussen verschillende toestanden. Je wisselt tussen opties zoals weergave, sortering of filters. Bij een toggle verander je de huidige toestand naar een andere toestand. Zoals bij lijst/raster weergave, oplopend/aflopend sorteren, enz.

Gebruik een toggle:

• Voor het wisselen tussen verschillende weergaven
• Schakel tussen normale en hoge contrast
• Voor het omkeren van sortering (oplopend, aflopend)

Technische opbouw

• Gebruik een <button>-element met role="button"
• Geef de toggle een toegankelijke naam
• Voor ingedrukte toggle:
  • Geef de toggle de waarde aria-pressed="true"
• Voor niet-ingedrukte toggle:
  • Geef de toggle de waarde aria-pressed="false"

<!-- Toggle code -->
<button type="button" aria-pressed="false" id="view-toggle">
  Rasterweergave
</button>

/* Toggle stijlen */
#view-toggle {
  padding: 0.5rem 1rem;
  border: 2px solid;
  background: white;
  color: black;
  border-radius: 4px;
  cursor: pointer;
}

#view-toggle:hover {
  background: grey;
  color: white;
}

#view-toggle[aria-pressed="true"] {
  background: #0066cc;
  color: white;
}

#view-toggle[aria-pressed="true"]:hover {
  background: grey;
  color: white;
}

const viewToggle = document.getElementById('view-toggle');
const content = document.getElementById('content');

viewToggle.addEventListener('click', function() {
  // Huidige staat ophalen
  const isPressed = viewToggle.getAttribute('aria-pressed') === 'true';
  
  // Staat omdraaien
  const newPressed = !isPressed;
  viewToggle.setAttribute('aria-pressed', newPressed);
  
  // Tekst en weergave bijwerken
  if (newPressed) {
    viewToggle.textContent = 'Lijstweergave';
    content.className = 'grid-view';
  } else {
    viewToggle.textContent = 'Rasterweergave';
    content.className = 'list-view';
  }
});

Toetsenbordbediening

• Enter of Spatie:
  • Wisselt naar de andere staat

Checklist

Component

• (4.1.2) Een toggle moet een <button>-element gebruiken
• (4.1.2) Een toggle moet een toegankelijke naam hebben
  • (2.4.6) De toegankelijke naam moet de huidige staat of actie beschrijven
• (4.1.2) Een ingedrukte toggle moet aria-pressed="true" hebben
• (4.1.2) Een niet-ingedrukte toggle moet aria-pressed="false" hebben

Bronnen

• Toggle Buttons (Engelstalig)