u bent hier: Home > In de praktijk > AnySurfer checklist > 4.1.4 Samenhorende formuliervelden zijn ingesloten door een fieldset

4.1.4 Samenhorende formuliervelden zijn ingesloten door een fieldset

Bij samenhorende formuliervelden (zoals een groep keuzerondjes) zijn labels soms niet voldoende. Plaats de groep in een fieldset. Voor de omschrijving gebruikt u een legend-element.

Deze constructie is nodig als het label alleen onvoldoende informatie geeft over het veld en als meerdere velden hetzelfde label hebben.

Voorbeelden

Samenhorende velden

Screenshot

screenshot fieldset

<fieldset>
<legend>Geslacht</legend>
  <input type="radio" name="geslacht" id="man" />
  <label for="man">Man</label>
  <input type="radio" name="geslacht" id="vrouw" />
  <label for="vrouw">Vrouw</label>
</fieldset>

Screenshot

screenshot fieldset

<fieldset>
<legend>Geboortedatum</legend>
<label for="dag">Dag</label>
<select id="dag" name="dag">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<label for="maand">Maand</label>
<select id="maand" name="maand">
<option>januari</option>
<option>februari</option>
<option>maart</option>
</select>

<label for="jaar">Jaar</label>
<select id="jaar" name="jaar">
<option>1980</option>
<option>1981</option>
<option>1982</option>
</select>
</fieldset>

Terugkerende labels

De bedoeling van dit ijkpunt is meer semantiek te brengen in formulieren door samenhorende formuliervelden te groeperen. Dit laat gebruikers toe om de relatie tussen de velden beter te begrijpen en sneller en efficiënter te interageren met het formulier.

Screenshot

screenshot terugkerende labels

<fieldset>
<legend>Hoe vaak leest u de krant?</legend>
<input type="radio" name="krant" value="d" id="d1" />
<label for="d1">Dagelijks</label>
<input type="radio" name="krant" value="w" id="w1" />
<label for="w1">Wekelijks</label>
<input type="radio" name="krant" value="m" id="m1" />
<label for="m1">Maandelijks</label>
</fieldset>

<fieldset>
<legend>Hoe vaak luistert u naar de radio?</legend>
<input type="radio" name="radio" value="d" id="d2" />
<label for="d2">Dagelijks</label>
<input type="radio" name="radio" value="w" id="w2" />
<label for="w2">Wekelijks</label>
<input type="radio" name="radio" value="m" id="m2" />
<label for="m2">Maandelijks</label>
</fieldset>

<fieldset>
<legend>Uw gegevens</legend>
<label for="naam01">Naam</label>
<input type="text" name="naam01" id="naam01" />
<label for="voornaam01">Voornaam</label>
<input type="text" name="voornaam01" id="voornaam01" />
<input type="checkbox" name="veggy01" id="veggy01" />
<label for="veggy01">Vegetarisch?</label>
</fieldset>

<fieldset>
<legend>Gegevens van uw partner</legend>
<label for="naam02">Naam</label>
<input type="text" name="naam02" id="naam02" />
<label for="voornaam02">Voornaam</label>
<input type="text" name="voornaam02" id="voornaam02" />
<input type="checkbox" name="veggy02" id="veggy02" />
<label for="veggy02">Vegetarisch?</label>
</fieldset>

Opmerking

Maak de tekst voor de legend niet langer dan nodig. Een screenreader leest de informatie in de legend steeds voor elk label. Eenvoudige formulieren met enkel invoervelden hebben geen fieldset/legend-constructie nodig.

Zelf testen

Ga na of er op de website formulieren zijn waar velden samenhoren.

Als een fieldset is gebruikt, is er meestal een lijn zichtbaar rondom de velden die binnen de fieldset staan, maar deze kan m.b.v. CSS zijn verborgen.
U kunt in de html-code nagaan of er een fieldset en legend zijn gebruikt of dit met behulp van een toolbar testen.

Web developer toolbar in Firefox:

  • CSS > disable styles > all styles
  • Kijk of er een lijn (kader) rondom de samen horende velden komt te staan met links boven de naam van de groep
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.

Wave toolbar in Firefox:

  • Errors, Features and Alerts
  • Kijk of een groen Feature; fieldset icoon wordt getoond
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.

Accessibility toolbar in Internet Explorer:

  • Structuur > fieldset/labels
  • Kijk of de woorden fieldset en legend worden getoond aan het begin van de samen horende velden
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.