Accessibility WCAG 2

Appearance

Verwendung von ARIA-aria-labelledby zur Bereitstellung eines Namens für Benutzeroberflächensteuerungen ​

Beschreibung ​

Hinweis zu Fieldset und Legend ​

Die bevorzugte Methode zur Gruppierung verwandter Formularsteuerelemente ist die Verwendung der nativen HTML-Elemente fieldset und legend (siehe WCAG-Technik H71). Diese bieten von Haus aus eine semantische Gruppierung und ein Label für unterstützende Technologien wie Screenreader. Das legend-Element wird dabei als Gruppenbezeichnung vorgelesen, und der Anfang sowie das Ende der Gruppe sind klar erkennbar.

Die hier beschriebene ARIA-Technik mit role="group" und aria-labelledby ist eine Alternative, wenn das UI-Design die Verwendung von fieldset und legend nicht zulässt oder erschwert. Wo immer möglich, sollte jedoch die native Lösung bevorzugt werden, da sie von den meisten unterstützenden Technologien optimal verarbeitet wird.

Zusammenfassung:

  • Bevorzugt: fieldset und legend verwenden
html
<fieldset>
  <legend>Gruppenbezeichnung</legend>
  <div class="form-group">
    <label for="input1">Beschriftung des Eingabefelds</label>
    <input
      type="text"
      id="input1"
      name="input1"
      placeholder="Platzhaltertext"
      aria-label="Beschriftung des Eingabefelds"
      autocomplete="off"
    />
  </div>
</fieldset>
  • Alternative: ARIA-Gruppierung mit role="group" und aria-labelledby, wenn fieldset/legend nicht möglich sind

Weitere Informationen: WCAG-Technik H71: Gruppieren von Formularsteuerelementen mit fieldset und legend

Das Ziel dieser Technik ist es, eine Gruppe verwandter Steuerelemente innerhalb eines Formulars als Gruppe zu kennzeichnen. Ein mit der Gruppe verbundenes Label dient auch als gemeinsames Label oder Qualifikator für einzelne Steuerelemente in der Gruppe. Unterstützende Technologien können den Anfang und das Ende der Gruppe sowie das Label der Gruppe anzeigen, wenn man in die Gruppe hinein- und herausnavigiert. Dies ist eine praktikable Alternative zur programmatischen Gruppierung von Formularsteuerelementen, wenn das Design der Benutzeroberfläche die Verwendung der Fieldset/Legend-Technik (H71) erschwert.

Für eine Gruppe von Optionsfeldern sollte role="radiogroup" anstelle von role="group" verwendet werden.

Die Gruppe kann mit aria-labelledby beschriftet werden.

Diese Technik ist nicht dafür gedacht, alle Steuerelemente in einem Formular innerhalb eines einzigen Containers mit role="group" zu umschließen.

Beispiele ​

Beispiel 1: Social Security Number ​

Sozialversicherungsnummern-Felder, die neun Ziffern lang sind und in drei Segmente unterteilt sind, können mit role="group" gruppiert werden.

html
<div role="group" aria-labelledby="ssn1">
  <span id="ssn1">Social Security Number</span>
  <span style="color: #D90D0D;"> (required)</span>
  <input size="3" type="text" aria-required="true" title="First 3 digits" />-
  <input size="2" type="text" aria-required="true" title="Next 2 digits" />-
  <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

Beispiel 2: Identifizieren von Radiogruppen ​

Dieses Beispiel demonstriert die Verwendung von role="radiogroup". Beachten Sie auch, dass die Optionsfelder benutzerdefinierte Steuerelemente mit role="radio" sind. (Das Skript, um die span-Elemente tatsächlich wie Optionsfelder funktionieren zu lassen, ist in diesem Beispiel nicht enthalten.) Optional kann man CSS verwenden, um eine Umrandung um Gruppen solcher Felder zu platzieren, um die Gruppenzugehörigkeit visuell zu verstärken. Die CSS-Eigenschaften sind unterhalb des Formulars verfügbar.

html
<h3>Set Alerts for your Account</h3>
<div role="radiogroup" aria-labelledby="alert1">
  <p id="alert1">Send an alert when balance exceeds $ 3,000</p>
  <div>
    <span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
    <span id="a1r1">Yes</span>
  </div>
  <div>
    <span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
    <span id="a1r2">No</span>
  </div>
</div>
<div role="radiogroup" aria-labelledby="alert2">
  <p id="alert2">Send an alert when a charge exceeds $ 250</p>
  <div>
    <span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
    <span id="a2r1">Yes</span>
  </div>
  <div>
    <span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
    <span id="a2r2">No</span>
  </div>
</div>
<p>
  <input type="submit" value="Continue" id="continue_btn" name="continue_btn" />
</p>

Related CSS Style Definition to place a border around the group of fields:

html
div[role=radiogroup] { border: black thin solid; }

Beispiel: using grouping roles to identify related form controls.