ARIA: group Rolle

Die group Rolle identifiziert eine Gruppe von Benutzeroberflächenobjekten, die nicht dazu bestimmt sind, in eine Seitenzusammenfassung oder ein Inhaltsverzeichnis durch unterstützende Technologien aufgenommen zu werden.

Beschreibung

Am engsten verwandt mit dem HTML-Element <fieldset>, wird die group Rollenstruktur verwendet, um eine Gruppe von Benutzeroberflächenobjekten zu identifizieren, die im Vergleich zu region nicht dazu bestimmt ist, in die Zusammenfassung oder das Inhaltsverzeichnis der Seite aufgenommen zu werden.

Die group Rolle sollte verwendet werden, um eine logische Sammlung von Elementen mit verwandter Funktionalität zu bilden, wie zum Beispiel Kinder in einem tree Widget, die eine Sammlung von Geschwistern in einer Hierarchie bilden, oder eine Sammlung von Elementen, die denselben Container in einem directory haben.

Wenn group im Kontext einer list verwendet wird, begrenzen Sie die Kinder der group auf listitem Elemente. In diesem Fall wird empfohlen, mehrere geordnete oder ungeordnete Listen, <ol> oder <ul>, mit verschachtelten <li> Kindern zu verwenden.

Wird sie im Kontext einer listbox verwendet, sind nur <option> Elemente als Kinder erlaubt. In diesem Fall wird empfohlen, <select>, <option> und <optgroup> anstelle zu verwenden.

Group-Elemente können verschachtelt sein.

Die group Rolle sollte nicht für bedeutende wahrnehmbare Abschnitte einer Seite verwendet werden. Wenn ein Abschnitt bedeutend genug ist, um in das Inhaltsverzeichnis der Seite aufgenommen zu werden, verwenden Sie die region Rolle oder eine Standard-Landmark-Rolle.

Wenn die Rolle einem Element hinzugefügt wird, sendet der Browser ein zugängliches Gruppenevent an Produkte der unterstützenden Technologie, die den Benutzer dann darüber benachrichtigen können.

Beispiele

Das folgende HTML-Beispiel verwendet die group Rolle mit einer tree Ansicht:

html
<div id="tree1" role="tree" tabindex="-1">
  <div
    id="animals"
    class="groupHeader"
    role="presentation"
    aria-owns="animalGroup"
    aria-expanded="true">
    <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
    <span role="treeitem" tabindex="0">Animals</span>
  </div>
  <div id="animalGroup" role="group">
    <div id="birds" role="treeitem">
      <span tabindex="-1">Birds</span>
    </div>
    <div
      id="cats"
      class="groupHeader"
      role="presentation"
      aria-owns="catGroup"
      aria-expanded="false">
      <img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
      <span role="treeitem" tabindex="0">Cats</span>
    </div>
    <div id="catGroup" role="group">
      <div id="siamese" role="treeitem">
        <span tabindex="-1">Siamese</span>
      </div>
      <div id="tabby" role="treeitem">
        <span tabindex="-1">Tabby</span>
      </div>
    </div>
  </div>
</div>

Das folgende Beispiel verwendet die group Rolle mit einem Dropdown-menu, das menuitems enthält:

html
<div role="menu">
  <ul role="group">
    <li role="menuitem">Inbox</li>
    <li role="menuitem">Archive</li>
    <li role="menuitem">Trash</li>
  </ul>
  <ul role="group">
    <li role="menuitem">Custom Folder 1</li>
    <li role="menuitem">Custom Folder 2</li>
    <li role="menuitem">Custom Folder 3</li>
  </ul>
  <ul role="group">
    <li role="menuitem">New Folder</li>
  </ul>
</div>

Dieses Menü könnte unter Verwendung von <select> und <option> Elementen konstruiert werden. In diesem Fall wäre die group Rolle am ehesten mit dem <optgroup> Element vergleichbar.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# group

Siehe auch