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

Dit is een methode waarbij je het -element van een groep keuzerondjes of selectievakjes het for-attribuut naar het eerste item richt.

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 en

Een ander aanpak is het gebruik van en . Deze benadering is gebaseerd op HTML-semantiek, en de hele groep wordt op de juiste manier herkend zonder dat je aanvullende attributen of rollen hoeft toe te voegen.

In het volgende voorbeeld omsluit je een groep keuzerondjes met en gebruik je als label.

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

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

en gebruiken is semantischer, maar in contactformulieren en dergelijke kan het role-attribuut met aria-labelledby praktischer zijn vanuit de oogpunt van de algehele layoutstructuur.

Webaccessibiliteit gaat dieper dan je denkt!