4.1.5 Samenhorende onderdelen in een keuzelijst zijn ingesloten door een optgroup

Groeperen in keuzelijsten is toegestaan, maar enkel als u hiervoor het optgroup-element gebruikt. Het is niet toegestaan om groepen te scheiden met een 'dummy' <option>.

Een keuzelijst (<select> of <select multiple="multiple" />) bevat steeds een reeks toegestane waarden (<option>'s) waarvan bezoekers er een of meerdere kunnen kiezen. AnySurfer verplicht het groeperen van <option>'s niet, maar we verwachten enkel dat — indien u groepeert — u het optgroup-element gebruikt. Het versterkt de semantische integriteit van een formulier doordat browser en screenreaders (al dan niet aan de hand van gebruikersinstellingen) kunnen bepalen hoe ze de aanwezigheid van groepen aankondigen.

Voorbeelden

Met dummy-items (niet goed)

Dummy-items in een keuzelijst

<label for="snack1">Wat is je favoriete snack?</label>
<select id="snack1" name="snack1">
  <option value="0">- Fruit -</option>
  <option value="1">Appel</option>
  <option value="2">Peer</option>
  <option value="3">Banaan</option>
  <option value="0">- Snoep -</option>
  <option value="4">Chocoladereep</option>
  <option value="5">Zuurtjes</option>
  <option value="6">Popcorn</option>
  <option value="0">- Snoep -</option>
  <option value="7">Chocoladetaart</option>
  <option value="8">Brownie</option>
  <option value="9">Suikerwafel</option>
</select>

Met behulp van optgroup (goed)

Keuzelijst met optgroup

<label for="snack2">Wat is je favoriete snack?</label>
<select id="snack2" name="snack2">
  <optgroup label="Fruit">
    <option value="1">Appel</option>
    <option value="2">Peer</option>
    <option value="3">Banaan</option>
  </optgroup>
  <optgroup label="Snoep">
    <option value="4">Chocoladereep</option>
    <option value="5">Zuurtjes</option>
    <option value="6">Popcorn</option>
  </optgroup>
  <optgroup label="Gebak">
    <option value="7">Chocoladetaart</option>
    <option value="8">Brownie</option>
    <option value="9">Suikerwafel</option>
  </optgroup>
</select>

Zelf testen

Ga na of er op de website keuzelijsten zijn met gegroepeerde items. Probeer een groepsnaam te selecteren; wordt de groepsnaam geselecteerd? (zie ook de voorbeelden bij dit ijkpunt)

  • Ja; dan is er geen optgroup-element gebruikt, pas uw website aan.
  • Nee; dan is aan dit ijkpunt voldaan.

Controleer in de broncode of de groepering is gedaan met het optgroup-element.

  • Ja; dan is aan dit ijkpunt voldaan.
  • Nee; pas uw website aan.