Webtoegankelijkheid: hoe label je groepen van radioknoppen en selectievakjes correct?

Heb je bij het bouwen van een formulier wel eens getwijfeld over hoe je label moet gebruiken voor groepen van radioknoppen en selectievakjes? Vooral de vraag hoe je de hele groep labelt en hoe je het for-attribuut moet inzetten, kan lastig zijn.

In dit artikel zetten we op een rij hoe je deze groepen labelt en laten we concrete methoden zien.

Veelgebruikte methoden en hun problemen

Het for-attribuut op het eerste item zetten

Bij deze methode wordt het for-attribuut van het <label>label van een groep radioknoppen of selectievakjes naar het eerste item gericht.

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>

Visueel lijkt er niets mis, maar in een schermlezer wordt het label "Favoriet fruit" alleen gekoppeld aan de eerste radioknop, waardoor de volledige groep niet correct wordt herkend.

Niet opgegeven for

<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 welk element bij het label hoort. Vooral voor gebruikers van een schermlezer is het onduidelijk welke opties bij het label horen.

Hoe zou je dit kunnen verbeteren?

Groepeer met een role-attribuut en koppel het label met aria-labelledby

Groepeer radioknoppen en selectievakjes met role="radiogroup" of role="group" en koppel de groep via aria-labelledby aan een label met een ID. Zo geef je duidelijk aan dat het label “Favoriet fruit” van toepassing is op de hele groep.

Radioknoppen

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

Een methode met <fieldset> en <legend>

Een andere mogelijkheid is een methode met <fieldset> en <legend>. Deze aanpak is gebaseerd op HTML-semantiek, waardoor de groep als geheel correct wordt herkend zonder extra attributen of roles.

In het onderstaande voorbeeld is de groep radioknoppen omsloten door <fieldset>, en wordt <legend> als label gebruikt.

Let op! Het kan zijn dat u de labels en invoervelden naast elkaar in een lay-out wilt tonen. Om dat te bereiken, moet u een fieldset display: contents; geven. In sommige browsers wordt de legend dan echter uit de accessibility tree verwijderd, dus dit raden we niet aan. Het is ook niet wenselijk om met CSS forceren de lay-out gelijk te trekken, omdat daarmee de toegankelijkheid wordt aangetast.

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

Conclusie

Het labelen van groepen radioknoppen en selectievakjes kan als volgt worden georganiseerd.

Een methode met het role-attribuut en aria-labelledby

• Flexibel aan te passen wanneer aanpassingen nodig zijn
• Het label van de groep expliciet instellen in combinatie met role="group"

Een methode met <fieldset> en <legend>

• Een standaardmethode op basis van semantiek
• Maakt een robuustere en toegankelijkere implementatie mogelijk
• Afhankelijk van de lay-out kunnen er toegankelijkheidsproblemen optreden

Afhankelijk van het ontwerp en de eisen kunt u kiezen voor beide methoden en toch een goede toegankelijkheid realiseren.

Het gebruik van <fieldset>fieldset en <legend>legend is semantisch gezien beter, maar bij bijvoorbeeld contactformulieren is het vanwege de structuur van de lay-out misschien handiger om role-attribuut en aria-labelledby te gebruiken.

Web accessibility still has a lot of depth!