ARIA: radiogroup Rolle

Radiogruppen sind Sammlungen, die eine Reihe verwandter radio Optionen beschreiben. Eine radiogroup ist eine Art von select Liste, die nur einen Eintrag oder radio zeitgleich aktiviert haben kann.

Beim Verwenden des nativen HTML Eingabe-Radio-Buttons, <input type="radio">, werden die Radiobuttons gruppiert, wenn jedem der Eingabe-Radioknöpfe in der Gruppe derselbe name zugewiesen wird. Sobald eine Gruppe von gleichnamigen Eingabe-Radioknöpfen erstellt ist, deaktiviert das Auswählen eines beliebigen Radioknopfes in dieser Gruppe automatisch jeden momentan ausgewählten Radioknopf in derselben Gruppe. Während dies die Radioknöpfe miteinander verknüpft, setzen Sie zur expliziten Darstellung einer Gruppe von Radioknöpfen die ARIA-Rolle als radiogroup.

Es wird empfohlen, Radiogruppen durch die Verwendung gleichnamiger HTML-Eingabe-Radioknöpfe zu erstellen, aber falls Sie ARIA-Rollen und Attribute anstelle von semantischen HTML-Formularsteuerelementen verwenden müssen, sollten benutzerdefinierte radio Schaltflächen wie native HTML-Radioeingabeknöpfe funktionieren.

Wenn unspezifische Elemente als Radioknöpfe verwendet werden, müssen Sie sicherstellen, dass Ihre Benutzer nur einen Radioknopf aus der Gruppe zur gleichen Zeit auswählen können. Wenn ein Element in der Gruppe aktiviert ist, indem sein aria-checked Attribut auf true gesetzt ist, wird das zuvor aktivierte Element deaktiviert und sein aria-checked Attribut wird false. Das aria-checked Attribut wird auf den zugehörigen radio Rollen gesetzt, nicht auf die radiogroup selbst.

Einige radiogroup Implementierungen initialisieren die Einstellung mit allen Schaltflächen im deaktivierten Zustand. Sobald ein radio in einer radiogroup aktiviert ist, ist es im Allgemeinen nicht möglich, zu einem vollständig deaktivierten Zustand zurückzukehren.

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

radio Rolle

Eine von einer Gruppe von auswählbaren Schaltflächen in einer radiogroup, wobei nie mehr als eine der Schaltflächen auf einmal ausgewählt sein kann.

aria-labelledby / aria-label

Die radiogroup muss einen zugänglichen Namen haben, entweder durch ein sichtbares Label, das durch aria-labelledby referenziert wird, oder mit einem Label, das mit aria-label angegeben ist.

aria-describedby

Referenz zu Elementen, die zusätzliche Informationen über die radiogroup bereitstellen.

aria-required

Zeigt an, dass ein radio innerhalb der Gruppe aria-checked="true" haben muss, bevor das Formular übermittelt werden kann. Der erforderliche Status wird auf dem radiogroup Element festgelegt, anstatt auf einem der radio Elemente, anders als bei Verwendung von HTML-Radioknöpfen, wo 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 versteckt sein, solange sie nicht relevant ist.

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 und aus der radiogroup. Wenn der Fokus in eine radiogroup bewegt wird, wird der Fokus auf die aktivierte Schaltfläche gesetzt, wenn eine Radioknopf aktiviert ist. Wenn keiner der Radioknöpfe aktiviert ist, wird der Fokus auf den ersten Radioknopf in der Gruppe gesetzt.

Leertaste

Aktiviert den fokussierten Radioknopf, wenn er nicht bereits aktiviert ist.

Rechte Pfeiltaste und Nach unten Pfeiltaste

Bewegt den Fokus zur nächsten Radiotaste in der Gruppe und deaktiviert die zuvor fokussierte Schaltfläche, sowie aktiviert die neu fokussierte Schaltfläche. Wenn der Fokus auf die letzte Schaltfläche gesetzt ist, wird der Fokus auf die erste Schaltfläche bewegt.

Linke Pfeiltaste und Nach oben Pfeiltaste

Bewegt den Fokus zur vorherigen Radiotaste in der Gruppe und deaktiviert die zuvor fokussierte Schaltfläche, sowie aktiviert die neu fokussierte Schaltfläche. Wenn der Fokus auf die erste Schaltfläche gesetzt ist, wird der Fokus auf die letzte Schaltfläche bewegt.

Pfeiltasten werden verwendet, um zwischen den Elementen einer Werkzeugleiste zu navigieren. Wenn eine radiogroup in eine Werkzeugleiste verschachtelt ist, müssen Benutzer in der Lage sein, zwischen allen Werkzeugleisten-Elementen, einschließlich der Radioknöpfe zu navigieren, ohne zu ändern, welcher Radioknopf ausgewählt ist. Wenn Sie also durch eine radiogroup in einer toolbar mit den Pfeiltasten navigieren, ändert sich der ausgewählte Knopf nicht. Vielmehr aktivieren die Leertaste und die Eingabetaste innerhalb einer toolbar die fokussierte radio Schaltfläche, wenn sie nicht bereits aktiviert ist, wobei Tab den Fokus in und aus der toolbar bewegt.

Benutzerinteraktionen für radiogroup müssen die Benutzerinteraktionen nachahmen, die leicht sind bei einer Gruppe von gleichnamigen HTML-Radioknöpfen. Tastaturereignisse für Tab, Leertaste und Pfeiltasten müssen erfasst werden. Klickevents auf sowohl die Radioelemente als auch deren zugehörige Labels müssen ebenfalls erfasst werden. Zusätzlich muss der Fokus verwaltet werden.

Während generell das Verlassen eines fokussierten Elements Sie zum nächsten fokussierbaren Element in der DOM-Reihenfolge bringt, hält die Verwendung der Pfeiltasten für die Navigation in einer Gruppe von Radio-Schaltflächen Sie in der Gruppe, indem sie den Fokus auf den ersten Radioknopf bewegt, wenn die Rechte Pfeiltaste oder die Nach unten Pfeiltaste losgelassen wird, während der Fokus auf dem letzten Radio in der Gruppe war, und zum letzten Radio wechselt, wenn die Linke Pfeiltaste oder Nach oben Pfeiltaste losgelassen wird, wenn der Fokus auf dem ersten Radio war. Die Verwaltung des tabindex ist eine Methode zum Verwalten von Pfeiltastenevents.

Verwenden Sie den [aria-checked="true"] Attribut-Selektor, um den aktivierten Zustand von Radiotasten zu gestalten.

Verwenden Sie CSS :hover und :focus Pseudoklassen für die Gestaltung der visuellen Tastaturfokussierung und Hervorhebung. Der Fokus- und Hoverefekt sollte sowohl den Radioknopf als auch das Label umfassen, um es einfacher zu machen, zu erkennen, welche Option gewählt wird und um zu zeigen, dass das Klicken auf das Label oder den Knopf den Radioknopf aktiviert.

Der grundlegende Aufbau einer radiogroup unter Verwendung unspezifischer 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 unter Verwendung von semantischem HTML geschrieben worden sein, das kein 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 zwar role="radiogroup" nicht notwendig, aber um diese Gruppierung explizit als radiogroup anzukündigen, fügen Sie die ARIA-Rolle hinzu.

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