Legends bij een fieldset

Een <legend> dient als de naam van de groep. Screenreaders lezen deze legend voor bij elk invoerveld in de fieldset (groep), zodat deze koppeling ook duidelijk is zonder de visuele informatie.

<legend>Uw adresgegevens</legend>

Maak de inhoud van de legend kort en omschrijvend.

In onderstaande video leest VoiceOver in Safari drie verschillende fieldsets voor, een groep met keuzerondjes (radio buttons) en een bezorg- en factuuradres. De legend wordt steeds bij het formulierveld voorgelezen. VoiceOver leest de legend twee keer voor bij het eerste veld van een groep, dit is een bug van VoiceOver.

Koppen in een legend

Een fieldset kan ook een kopje bevatten. Zorg er wel voor dat het niveau van deze kopjes klopt in de hiërarchische koppenstructuur van de hele pagina.

<fieldset>
  <legend><h3>Bezorgadres<h3></legend>
    <label for="shipping-street">Straat en huisnummer</label>
    <input type="text" name="shipping-street" id="shipping-street" autocomplete="shipping address-line1">
    <label for="shipping-postal-code">Postcode</label>
    <input type="text" name="shipping-postal-code" id="shipping-postal-code" autocomplete="shipping postal-code"></div>
    <label for="shipping-city">Stad</label>
    <input type="text" name="shipping-city" id="shipping-city" autocomplete="shipping address-level2">
</fieldset>


<fieldset>
  <legend><h3>Factuuradres<h3></legend>
    <label for="billing-street">Straat en huisnummer</label>
    <input type="text" name="shipping-street" id="billing-street" autocomplete="billing address-line1">
    <label for="billing-postal-code">Postcode</label>
    <input type="text" name="billing-postal-code" id="billing-postal-code" autocomplete="billing postal-code">
    <label for="billing-city">Stad</label>
    <input type="text" name="billing-city" id="billing-city" autocomplete=" billingaddress-level2">
</fieldset>

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.