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)

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

Met behulp van optgroup (goed)

<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>