Web-Accessibility: Wie beschriftet man Gruppen von Optionsfeldern und Kontrollkästchen korrekt mit label?

Beim Erstellen von Formularen stellt sich oft die Frage, wie man label für Gruppen von Optionsfeldern und Kontrollkästchen handhabt. Besonders schwierig ist es, die Gruppe insgesamt zu beschriften und mit dem for-Attribut umzugehen.

In diesem Beitrag fassen wir die Beschriftung solcher Gruppen zusammen und stellen konkrete Methoden vor.

Gängige Methoden und Probleme

for auf den ersten Eintrag ausrichten

<label>Bei Gruppen von Optionsfeldern und Kontrollkästchen wird das for-Attribut auf den ersten Eintrag gesetzt.

Ein Beispielcode sieht so aus:

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

Optisch ist das unauffällig, doch Screenreader verknüpfen das Label „Lieblingsobst“ nur mit dem ersten Optionsfeld, sodass die Gruppe nicht als Ganzes erkannt wird.

Keine Angabe von 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>

Bei dieser Methode ist nicht klar erkennbar, welches Element zu welchem Label gehört. Besonders für Nutzer von Screenreadern ist unklar, welche Optionen einem Label zugeordnet sind.

Verbesserungsvorschlag

Gruppierung mit dem role-Attribut und Beschriftung über aria-labelledby

Dabei werden Radiobuttons und Checkboxen mit role="radiogroup" bzw. role="group" gruppiert und über aria-labelledby mit dem Label verknüpft, das per ID referenziert wird. So wird für Screenreader eindeutig erkennbar, dass das Label „Lieblingsobst“ für die gesamte Gruppe gilt.

Radiobuttons

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

Checkboxen

<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 mit <fieldset> und <legend>

Eine weitere Möglichkeit ist die Verwendung von <fieldset> und <legend>. Dieser Ansatz basiert auf der HTML-Semantik: Ohne zusätzliche Attribute oder role-Angaben wird die Gruppe insgesamt korrekt erkannt.

Im folgenden Beispiel ist die Gruppe der Radiobuttons mit <fieldset> umschlossen, und als Beschriftung wird <legend> verwendet.

Hinweis: Achtung! Bei Designs soll es oft vorkommen, dass Labels und Eingabefelder nebeneinander angeordnet werden. Dafür müsste das fieldset auf display: contents; gesetzt werden. Davon raten wir jedoch ab, da in einigen Browsern das legend aus dem Accessibility Tree entfernt wird. Es ist nicht ratsam, das Layout mit CSS gewaltsam anzupassen und dadurch die Barrierefreiheit zu beeinträchtigen.

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

Fazit

Die Beschriftung von Gruppen aus Radio-Buttons oder Checkboxen lässt sich wie folgt strukturieren.

Methode mit role-Attribut und aria-labelledby

• Bei Bedarf lässt sich dies flexibel anpassen.
• Die Gruppenbeschriftung explizit mit role="group" kombinieren

Methode mit <fieldset> und <legend>

• Die standardmäßige Methode auf Basis der Semantik
• Ermöglicht eine robustere und besser zugängliche Umsetzung
• Je nach Layout können Probleme bei der Barrierefreiheit auftreten

Je nach Design und Anforderungen lässt sich mit beiden Methoden eine angemessene Barrierefreiheit erreichen.

Die Verwendung von <fieldset>fieldset und <legend>legend ist semantisch korrekter, doch bei Kontaktformularen ist aufgrund des Gesamtlayouts die Kombination aus role-Attribut und aria-labelledby oft praktischer.

Web-Accessibility ist noch lange nicht ausgereizt!