Direct naar de inhoud

Zet knoppen naast een schuifregelaar of sleeplijst

De oplossing is bijna altijd hetzelfde: het slepen blijft, er komt een manier met losse klikken naast.

Bij een schuifregelaar gebruik je input type="range", die met de pijltoetsen te bedienen is. Voor de aanwijzer zet je er twee knoppen naast, met het getal erbij zodat zichtbaar is wat er verandert:

<button type="button" aria-label="Minder">−</button>
<input type="range" id="prijs" min="0" max="500" step="10" value="100">
<button type="button" aria-label="Meer">+</button>
<output for="prijs">100 euro</output>

Bij een lijst die herschikt kan worden zet je bij elk onderdeel een knop omhoog en een knop omlaag. Dat werkt met de muis, met een aanraakscherm, met een toetsenbord en met een schermlezer:

<li>
  Nieuwsbrief
  <button type="button" aria-label="Nieuwsbrief omhoog">↑</button>
  <button type="button" aria-label="Nieuwsbrief omlaag">↓</button>
</li>

Bij een carrousel horen er knoppen voor vorige en volgende te zijn naast het vegen. Bij een kaart knoppen om te verschuiven en te zoomen; de meeste kaartbibliotheken hebben die al, maar soms staan ze uit.

Let op de maat van die knoppen. Zijn ze te klein, dan ruil je het ene probleem in voor het andere. Zie het artikel over de grootte van het aanwijsgebied.

Terug naar boven