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

Beschreibung

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.

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

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

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

Beispiel: using grouping roles to identify related form controls.