Webaccessibiliteit: Hoe label je een groep keuzerondjes of selectievakjes correct?

Heb je je wel eens afgevraagd hoe je label moet gebruiken voor een groep keuzerondjes of selectievakjes wanneer je een formulier maakt? Met name kan het lastig zijn om vast te stellen hoe je een hele groep moet labelen en hoe je het for-attribuut moet hanteren.

Dit keer bespreken we hoe je dergelijke groepen labelt en presenteren we concrete methoden.

Veel voorkomende methoden en hun problemen

Het for-attribuut naar het eerste item richten

Voor een groep radioknoppen of selectievakjes het <label>for-attribuut van het label naar het eerste item richten.

Hier is een voorbeeld van zo'n code.

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Hoewel dit er visueel goed uitziet, erkennen schermlezers het label "favoriete fruit" als alleen gekoppeld aan het eerste keuzerondje, waardoor de hele groep niet correct wordt herkend.

for niet opgeven

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Bij deze aanpak is niet duidelijk aan welk element het label is gekoppeld. Met name voor gebruikers die een schermlezer gebruiken, is onduidelijk welke optie aan het label is gekoppeld.

Zo kun je het beter aanpakken

Groeperen met role-attribuut en labelen met aria-labelledby

Deze methode groepteert keuzerondjes of selectievakjes met role="radiogroup" of role="group", en koppelt ze vervolgens met aria-labelledby aan een labelelement met een ID. Hierdoor kun je aan schermlezers duidelijk maken dat het label "favoriete fruit" van toepassing is op de hele groep.

Keuzerondjes

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Selectievakjes

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Methode met <fieldset>fieldset en <legend>legend

Een ander alternatief is het gebruik van <fieldset>fieldset en <legend>legend. Deze aanpak is gebaseerd op HTML-semantiek en zorgt ervoor dat de hele groep op de juiste manier wordt herkend zonder speciale attributen of role-toewijzingen.

In het volgende voorbeeld wordt een groep radioknoppen omwikkeld met <fieldset>fieldset, en <legend>legend wordt als label gebruikt.

* Opmerking: in sommige gevallen wil u labels en invoervelden horizontaal naast elkaar plaatsen. In dat geval moet u fieldset instellen op display: contents;, maar helaas wordt de legend in enkele browsers uit de accessibility tree verwijderd, dus we raden dit niet aan. CSS gebruiken om het uiterlijk geforceerd uit te lijnen terwijl de accessibility eronder lijdt, is niet wenselijk.

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

Samenvatting

Labeling voor groepen van radiobuttons en checkboxes kan als volgt worden georganiseerd.

Methode met role-attribuut en aria-labelledby

• Flexibel aanpasbaar voor aanpassingen waar nodig
• Groeperingslabel expliciet ingesteld in combinatie met role="group"

Methode met <fieldset>fieldset en <legend>legend

• Standaardmethode op basis van semantiek
• Mogelijk nog robuustere en toegankelijker implementatie
• Potentiële toegankelijkheidsproblemen afhankelijk van indeling

Afhankelijk van ontwerp en vereisten kunnen beide methoden passende toegankelijkheid bereiken.

<fieldset>fieldset en <legend>legend zijn semantisch beter, maar bij contactformulieren kan het role-attribuut en aria-labelledby vanwege de algehele lay-outstructuur praktischer zijn.

Webaccessibiliteit gaat dieper dan je denkt!