Web-Barrierefreiheit: Wie wird ein Label für eine Gruppe von Radiobuttons oder Kontrollkästchen korrekt hinzugefügt?

Beim Erstellen von Formularen haben Sie sich vielleicht gefragt, wie Sie mit label-Elementen bei Gruppen von Radiobuttons oder Kontrollkästchen umgehen sollten. Insbesondere kann es unklar sein, wie Sie die gesamte Gruppe beschriften und wie Sie das for-Attribut verwenden sollten.

Wir werden diese Problematik klären und konkrete Lösungen vorstellen.

Häufig verwendete Methoden und ihre Probleme

for-Attribut zum ersten Element verweisen

Bei einer Gruppe von Radiobuttons oder Kontrollkästchen wird das -Element mit dem for-Attribut auf das erste Element der Gruppe verwiesen.

Hier ist ein Beispielcode:

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

Dies sieht zwar oberflächlich korrekt aus, aber bei der Verwendung eines Screenreaders wird das Label "Lieblingsobst" nur mit dem ersten Radiobutton verknüpft, sodass die gesamte Gruppe nicht korrekt erkannt wird.

for nicht angeben

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

Diese Methode macht nicht klar, welches Element das Label betrifft. Besonders für Benutzer von Bildschirmlesegeräten ist unklar, welche Option mit dem Label verknüpft ist.

So könnte man es verbessern

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

Radiobefehle und Kontrollkästchen werden mit role="radiogroup" oder role="group" gruppiert und über aria-labelledby mit einem Labelelement verknüpft, das eine ID trägt. Dies ermöglicht es, dem Bildschirmleser zu signalisieren, dass das Label „Lieblingsobst" auf die gesamte Gruppe angewendet wird.

Optionsfeld

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

Kontrollkästchen

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

So verwenden Sie und

Eine weitere Methode besteht darin, und zu verwenden. Dieser Ansatz basiert auf der HTML-Semantik und ermöglicht es, dass die gesamte Gruppe ordnungsgemäß erkannt wird, ohne spezielle Attribute oder Rollen hinzufügen zu müssen.

Im folgenden Beispiel wird eine Gruppe von Optionsfeldern mit umschlossen und als Beschriftung verwendet.

Hinweis: Es gibt Fälle, in denen Sie das Label und die Eingabe aus gestalterischen Gründen horizontal anordnen möchten. In solchen Fällen müssen Sie das fieldset möglicherweise auf display: contents; setzen. Allerdings wird das legend-Element in einigen Browsern aus dem Accessibility Tree entfernt, daher können wir dies nicht empfehlen. Es ist nicht ratsam, das Layout mit CSS zu erzwingen und dabei 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 von Optionsfeldern und Kontrollkästchen lässt sich wie folgt zusammenfassen.

Methode mit role-Attribut und aria-labelledby

• Flexible Anpassung bei Bedarf möglich
• Explizite Einstellung des Gruppenlabels in Kombination mit role="group"

So verwenden Sie und

• Standard-Methode auf Basis von Semantik
• Robustere und barrierefreiere Implementierung möglich
• Je nach Layout potenzielle Probleme mit der Barrierefreiheit

Je nach Design und Anforderungen können Sie mit beiden Methoden angemessene Barrierefreiheit erreichen.

und sind semantisch besser, aber bei Kontaktformularen und ähnlichen Formularen ist die Methode mit role-Attribut und aria-labelledby aufgrund der Gesamtlayoutstruktur möglicherweise praktischer.

Webzugänglichkeit hat noch so viel mehr zu bieten!