ARIA: Rolle radiogroup

Beschreibung

Radio-Gruppen sind Sammlungen, die eine Menge von verwandten radio-Optionen beschreiben. Eine radiogroup ist eine Art von select-Liste, die jeweils nur einen Eintrag oder radio als ausgewählt haben kann.

Wenn Sie das native HTML-<input type="radio"> verwenden, werden die Radio-Buttons gruppiert, indem jedem Input-Radio-Button in der Gruppe dasselbe name zugewiesen wird. Sobald eine Gruppe von gleichnamigen Eingabe-Radio-Buttons erstellt wurde, führt die Auswahl eines beliebigen Eingabe-Radio-Buttons in dieser Gruppe automatisch zur Deselektion eines derzeit ausgewählten Eingabe-Radio-Buttons in derselben Gruppe. Um die Radio-Buttons explizit als radiogroup auszuweisen, setzen Sie die ARIA-Rolle entsprechend.

Es wird empfohlen, Radio-Gruppen durch die Verwendung gleichnamiger HTML-Eingabe-Radio-Buttons zu erstellen. Falls Sie jedoch ARIA-Rollen und Attribute anstelle semantischer HTML-Formularsteuerelemente verwenden müssen, sollten benutzerdefinierte radio-Buttons sich wie native HTML-Radio-Eingabeschaltflächen verhalten.

Wenn Sie nicht-semantische Elemente als Radio-Buttons verwenden, müssen Sie sicherstellen, dass Ihre Benutzer jeweils nur einen Radio-Button aus der Gruppe auswählen können. Wenn ein Element in der Gruppe ausgewählt ist, indem dessen aria-checked-Attribut auf true gesetzt wird, wird das zuvor ausgewählte Element de-selected und sein aria-checked-Attribut wird zu false. Das aria-checked-Attribut wird bei den zugehörigen radio-Rollen gesetzt, nicht bei der radiogroup selbst.

Einige Implementierungen von radiogroup initialisieren die Gruppe mit allen Schaltflächen im nicht ausgewählten Zustand. Sobald ein radio in einer radiogroup ausgewählt ist, ist es in der Regel nicht mehr möglich, in den Zustand "alle nicht ausgewählt" zurückzukehren.

Die radiogroup muss entweder durch ein sichtbares Label, das durch aria-labelledby referenziert wird, oder durch ein mit aria-label spezifiziertes Label einen zugänglichen Namen haben. Wenn Elemente zusätzliche Informationen über die Radio-Gruppe bereitstellen, werden diese Elemente durch das radiogroup-Element mit der Eigenschaft aria-describedby referenziert.

Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften

Rolle radio

Teil einer Gruppe von auswählbaren Schaltflächen in einer radiogroup, wobei nicht mehr als eine der Schaltflächen gleichzeitig ausgewählt sein kann.

aria-labelledby / aria-label

Die radiogroup muss entweder durch ein sichtbares Label referenziert durch aria-labelledby oder durch ein mit aria-label spezifiziertes Label einen zugänglichen Namen haben.

aria-describedby

Verweis auf Elemente, die zusätzliche Informationen über die radiogroup bereitstellen.

aria-required

Gibt an, dass ein radio innerhalb der Gruppe aria-checked="true" gesetzt haben muss, bevor das Formular abgeschickt werden kann. Der erforderliche Zustand wird am radiogroup-Element angegeben und nicht an einem der radio-Elemente, im Gegensatz zur Verwendung von HTML-Radio-Buttons, bei denen das required-Attribut direkt auf einem oder mehreren Radio-<input>-Elementen gesetzt wird.

aria-errormessage

Identifiziert das Element, das eine Fehlermeldung für die radiogroup bereitstellt, falls ein Fehler vorliegt. Diese Meldung sollte ausgeblendet werden, wenn sie nicht relevant ist.

Tastaturinteraktionen

Für radio-Buttons in einer radiogroup, die NICHT in einer toolbar ist, müssen die folgenden Tastaturinteraktionen unterstützt werden:

Tab und Shift + Tab

Bewegt den Fokus in die und aus der radiogroup heraus. Wenn sich der Fokus in eine radiogroup bewegt, wird, falls ein Radio-Button aktiviert ist, der Fokus auf die aktivierte Schaltfläche gesetzt. Falls keiner der Radio-Buttons aktiviert ist, wird der Fokus auf die erste Radio-Schaltfläche in der Gruppe gesetzt.

Leertaste

Aktiviert den fokussierten Radio-Button, falls dieser noch nicht aktiviert ist.

Rechte Pfeiltaste und Untere Pfeiltaste

Bewegt den Fokus zur nächsten Radio-Schaltfläche in der Gruppe, deaktiviert die zuvor fokussierte Schaltfläche und aktiviert die neu fokussierte Schaltfläche. Befindet sich der Fokus auf der letzten Schaltfläche, bewegt sich der Fokus zur ersten Schaltfläche.

Linke Pfeiltaste und Obere Pfeiltaste

Bewegt den Fokus zur vorherigen Radio-Schaltfläche in der Gruppe, deaktiviert die zuvor fokussierte Schaltfläche und aktiviert die neu fokussierte Schaltfläche. Befindet sich der Fokus auf der ersten Schaltfläche, bewegt sich der Fokus zur letzten Schaltfläche.

Pfeiltasten werden zum Navigieren zwischen Elementen einer Toolbar verwendet. Wenn eine radiogroup innerhalb einer Toolbar eingebettet ist, müssen Benutzer in der Lage sein, zwischen allen Toolbar-Elementen zu navigieren, einschließlich der Radio-Schaltflächen, ohne zu ändern, welcher Radio-Button ausgewählt wurde. Beim Navigieren durch eine radiogroup in einer toolbar mit Pfeiltasten ändert sich der ausgewählte Button nicht. Vielmehr aktivieren bei der Verwendung innerhalb einer toolbar die Tasten Leertaste und Enter den fokussierten radio-Button, falls dieser nicht bereits aktiviert ist, wobei Tab den Fokus in die und aus der toolbar heraus verschiebt.

Notwendige JavaScript-Funktionen

Benutzerinteraktionen für radiogroups müssen die Interaktionen eines Benutzers mit einer Gruppe von gleichnamigen HTML-Radio-Buttons nachbilden. Tastaturereignisse für Tab, Leertaste und Pfeiltasten müssen erfasst werden. Klick-Ereignisse sowohl auf den Radio-Elementen als auch auf ihren zugehörigen Labels müssen ebenfalls erfasst werden. Zusätzlich muss der Fokus verwaltet werden.

Obwohl man im Allgemeinen durch das Verlassen eines fokussierten Elements zum nächsten fokussierbaren Element in der DOM-Reihenfolge gelangt, bleibt man bei der Verwendung der Pfeiltasten, um durch eine Gruppe von Radio-Schaltflächen zu navigieren, in der Gruppe, und bewegt den Fokus zur ersten Radio-Schaltfläche, wenn die Rechte Pfeiltaste oder Untere Pfeiltaste losgelassen wird, während der Fokus auf der letzten Radio-Schaltfläche in der Gruppe war, und bewegt sich zur letzten Radio-Schaltfläche, wenn die Linke Pfeiltaste oder Obere Pfeiltaste losgelassen wird, wenn der Fokus auf der ersten Radio-Schaltfläche war. Das Verwalten eines beweglichen tabindex ist eine Methode zur Verwaltung von Pfeil-Tasten-Ereignissen.

Notwendige CSS-Funktionen

Verwenden Sie den [aria-checked="true"] Attributselektor, um den aktivierten Zustand von aktivierten Radio-Buttons zu gestalten.

Verwenden Sie CSS-:hover- und :focus-Pseudoklassen zur Gestaltung der visuellen Tastatur-Fokussierung und des Hover-Effekts. Der Fokus- und Hover-Effekt sollte sowohl den Radio-Button als auch das Label einbeziehen, um es leichter erkennbar zu machen, welche Option gewählt wird und um anzuzeigen, dass das Klicken entweder auf das Label oder den Button den Radio-Button aktiviert.

Beispiele

Die grundlegende Einrichtung für eine radiogroup unter Verwendung nicht-semantischer ARIA-Rollen anstelle von semantischem HTML ist wie folgt:

<div role="radiogroup" aria-labelledby="question">
  <div id="question">Which is the best color?</div>
  <div id="radioGroup">
    <p>
      <span
        id="colorOption_0"
        tabindex="0"
        role="radio"
        aria-checked="false"
        aria-labelledby="purple"></span>
      <span id="purple">Purple</span>
    </p>
    <p>
      <span
        id="colorOption_1"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="aubergine"></span>
      <span id="aubergine">Aubergine</span>
    </p>
    <p>
      <span
        id="colorOption_2"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="magenta"></span>
      <span id="magenta">Magenta</span>
    </p>
    <p>
      <span
        id="colorOption_3"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="all"></span>
      <span id="all">All of the above</span>
    </p>
  </div>
</div>

Dies könnte mit semantischem HTML geschrieben worden sein, das keine CSS oder JavaScript erfordert:

<fieldset>
  <legend>Which is the best color?</legend>
  <p>
    <input name="colorOption" type="radio" id="purple" />
    <label for="purple">Purple</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="aubergine" />
    <label for="aubergine">Aubergine</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="magenta" />
    <label for="magenta">Magenta</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="all" />
    <label for="all">All of the above</label>
  </p>
</fieldset>

In diesem <fieldset>-Beispiel ist role="radiogroup" zwar nicht notwendig, um diese Gruppierung ausdrücklich als radiogroup anzukündigen, sollte die ARIA-Rolle eingeschlossen werden.

Spezifikationen

Siehe auch

• HTML-<fieldset>-Element
• HTML-<input type="radio">-Radio-Button-Element
• ARIA-radio-Rolle
• aria-errormessage
• aria-invalid
• aria-readonly
• aria-required