ARIA: group-Rolle

Die group-Rolle identifiziert eine Reihe von Benutzeroberflächen-Objekten, die von unterstützenden Technologien nicht dazu gedacht sind, in eine Seitenzusammenfassung oder ein Inhaltsverzeichnis aufgenommen zu werden.

Beschreibung

Am engsten mit dem <fieldset>-Element von HTML verwandt, wird die group-Dokumentstrukturrolle verwendet, um eine Reihe von Benutzeroberflächen-Objekten zu identifizieren, die im Vergleich zur region nicht dazu gedacht sind, in die Zusammenfassung der Seite oder das Inhaltsverzeichnis aufgenommen zu werden.

Die group-Rolle sollte verwendet werden, um eine logische Sammlung von Elementen mit zusammenhängender Funktionalität zu bilden, wie z.B. 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 eine group im Kontext einer list verwendet wird, beschränken 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.

Wenn sie im Kontext einer listbox verwendet wird, sind die einzigen zulässigen Kinder <option>-Elemente. In diesem Fall wird empfohlen, <select>, <option> und <optgroup> zu verwenden.

Group-Elemente können verschachtelt werden.

Die group-Rolle sollte nicht für wesentliche wahrnehmbare Abschnitte einer Seite verwendet werden. Wenn ein Abschnitt wichtig genug ist, um in das Inhaltsverzeichnis der Seite aufgenommen zu werden, verwenden Sie die region-Rolle oder eine standardmäßige landmark role.

Wenn die Rolle einem Element hinzugefügt wird, sendet der Browser ein zugängliches Gruppenereignis an unterstützende Technologieprodukte, die dann den Benutzer darüber informieren können.

Beispiele

Das folgende HTML-Codebeispiel 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 Drop-down-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