HTMLhulp.nl logo
Dropdowns en select velden toegankelijk maken in HTML

Dropdowns en select velden toegankelijk maken in HTML

Dropdowns en select velden toegankelijk maken in HTML

Dropdowns en select velden zijn al jaren een standaardonderdeel van formulieren. Ze worden gebruikt voor keuzes zoals landenlijsten, productvarianten of instellingen in een profiel. Hoewel ze handig zijn, leveren ze vaak problemen op voor de toegankelijkheid. Gebruikers met een schermlezer of alleen een toetsenbord hebben soms moeite om dropdowns correct te gebruiken. In dit artikel leer je hoe je dropdowns en select velden maakt die gebruiksvriendelijk en toegankelijk zijn.

Wat is een dropdown of selectveld?

Een dropdown (of keuzelijst) is een formuliercomponent waarmee een gebruiker één of meerdere opties kan selecteren uit een lijst. In HTML gebruik je hiervoor <select> en <option>.

Voorbeeld:

<label for="land">Kies je land</label>
<select id="land" name="land">
<option value="nl">Nederland</option>
<option value="be">België</option>
<option value="de">Duitsland</option>
</select>

De gebruiker ziet standaard “Nederland” en kan via een dropdown andere landen kiezen.

Waarom toegankelijkheid belangrijk is

Een dropdown lijkt eenvoudig, maar kan problematisch zijn voor:

  • Schermlezers: opties worden soms niet duidelijk voorgelezen.

  • Toetsenbordgebruikers: ze moeten eenvoudig door de lijst kunnen navigeren.

  • Kleurenblinden of slechtzienden: het contrast en de focusstate moeten duidelijk zijn.

Een ontoegankelijk select veld kan ertoe leiden dat gebruikers verkeerde keuzes maken of het formulier helemaal niet invullen.

Labels zijn verplicht

Een veelgemaakte fout is een dropdown zonder label. Zonder label weten schermlezers niet waarvoor de keuzelijst bedoeld is.

Fout:

<select>
<option>Optie 1</option>
<option>Optie 2</option>
</select>

Goed:

<label for="opties">Kies een optie</label>
<select id="opties" name="opties">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>

Gebruik van <optgroup> voor logische indeling

Bij lange lijsten kun je opties groeperen met <optgroup>. Dit maakt de lijst overzichtelijker en helpt schermlezers context geven.

<label for="auto">Kies een automerk</label>
<select id="auto" name="auto">
<optgroup label="Duitsland">
<option value="vw">Volkswagen</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japan">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select>

Een screenreader zal aankondigen: “Groep Duitsland, 2 opties.”

Een standaardoptie meegeven

Het is verstandig om een standaardoptie toe te voegen die aangeeft dat de gebruiker nog niets heeft gekozen.

<select id="kleur" name="kleur" required>
<option value="" disabled selected>Kies een kleur</option>
<option value="rood">Rood</option>
<option value="blauw">Blauw</option>
<option value="groen">Groen</option>
</select>

De eerste optie is hier disabled en geselecteerd, zodat de gebruiker verplicht een keuze maakt.

Meerdere keuzes toestaan met multiple

Soms wil je dat gebruikers meerdere opties kunnen selecteren. Hiervoor gebruik je het attribuut multiple.

<label for="hobby">Kies je hobby’s</label>
<select id="hobby" name="hobby" multiple size="5">
<option value="lezen">Lezen</option>
<option value="fietsen">Fietsen</option>
<option value="muziek">Muziek</option>
<option value="reizen">Reizen</option>
<option value="sport">Sport</option>
</select>

Met size="5" worden alle opties direct zichtbaar zonder scrollen.

Styling en focus states

Standaard dropdowns zien er in elke browser anders uit. Vaak willen ontwerpers dit aanpassen, maar dat kan toegankelijkheidsproblemen opleveren.

Minimaal moet je zorgen voor:

  • Duidelijke focusstijl: zodat toetsenbordgebruikers zien welke dropdown actief is.

  • Goed contrast: tekst en achtergrond moeten voldoende contrasteren.

Voorbeeld CSS:

select:focus {
outline: 3px solid #00bf63;
outline-offset: 2px;
}

Dynamische dropdowns en ARIA

Soms wil je dropdowns dynamisch maken, bijvoorbeeld met zoekfunctionaliteit. In dat geval moet je ARIA-attributen toevoegen zodat schermlezers de lijst goed interpreteren.

Voorbeeld met een custom dropdown:

<div role="listbox" aria-label="Kies een land">
<div role="option" aria-selected="true">Nederland</div>
<div role="option">België</div>
<div role="option">Duitsland</div>
</div>

Let op: dit is complexer en vereist JavaScript om toetsenbordnavigatie en selectie goed te regelen. Waar mogelijk is een native <select> altijd beter.

Foutmeldingen bij dropdowns

Dropdowns moeten net als andere velden duidelijke foutmeldingen geven wanneer de gebruiker iets vergeet of verkeerd kiest.

<label for="provincie">Kies je provincie</label>
<select id="provincie" name="provincie" aria-describedby="error-provincie" required>
<option value="">Maak een keuze</option>
<option value="utrecht">Utrecht</option>
<option value="gelderland">Gelderland</option>
</select>
<span id="error-provincie" class="error">Selecteer een provincie.</span>

Zo begrijpt de screenreader dat de foutmelding bij dit veld hoort.

Responsieve dropdowns

Op mobiel nemen standaard dropdowns vaak het hele scherm in beslag. Dit is handig omdat het de interactie vergemakkelijkt, maar houd rekening met de lengte van je lijsten. Bij zeer lange dropdowns kan een zoekfunctie beter zijn.

Veelgemaakte fouten bij select velden

  1. Geen label gebruiken: alleen placeholders inzetten.

  2. Te lange lijsten zonder indeling, waardoor gebruikers eindeloos moeten scrollen.

  3. Geen focusstijl: toetsenbordgebruikers zien niet waar ze zijn.

  4. Custom dropdowns bouwen zonder ARIA: schermlezers snappen niet dat het een keuzelijst is.

  5. Onjuiste foutmeldingen: “Ongeldige invoer” in plaats van “Selecteer een provincie.”

Tips voor toegankelijke dropdowns

  • Gebruik altijd <label> in combinatie met <select>.

  • Groepeer lange lijsten met <optgroup>.

  • Voeg een duidelijke standaardoptie toe zoals “Kies een …”.

  • Zorg dat dropdowns bedienbaar zijn met toetsenbord.

  • Test je dropdowns met een schermlezer zoals NVDA of VoiceOver.

Dropdowns en select velden lijken simpele componenten, maar zonder aandacht voor toegankelijkheid kunnen ze frustratie veroorzaken. Door labels, duidelijke foutmeldingen en goede focusstijlen te gebruiken maak je je formulieren veel gebruiksvriendelijker.