ARIA: tablist-Rolle

Möglicherweise interagieren Sie im Moment mit einer Registerkarten-Oberfläche! Browser-Registerkarten ermöglichen es einem Benutzer, mehrere Webseiten in einem einzigen Fenster offen zu halten. Ein Klick auf eine Registerkarte in der tablist am oberen Rand des Browserfensters erlaubt es dem Benutzer, den zugehörigen Inhalt im Hauptinhaltsbereich, dem tabpanel, jeweils seitenweise darzustellen. Dies wird als "Tab-Designmuster" bezeichnet.

Beim Implementieren eines Tab-Designmusters werden die Rollen tab, tablist und tabpanel verwendet.

Registerkarten sind eine Gruppe von gestaffelten Inhaltsabschnitten, bekannt als Tab-Panels, die jeweils nur ein Panel zur Zeit anzeigen. Jedes Tab-Panel hat ein zugehöriges tab-Element, das, wenn es aktiviert wird, das Panel anzeigt. Die Liste der Tab-Elemente ist entlang einer Kante des aktuell dargestellten Panels angeordnet, meist der oberen Kante, verschachtelt in einem tablist-Element.

Jede tab in einer tablist dient als Beschriftung für ein tabpanel und kann aktiviert werden, um dieses Panel anzuzeigen. Die tablist ist das enthaltene Element für die Gruppe der enthaltenen Tab-Elemente.

Wenn eine Oberfläche mit Registerkarten initialisiert wird, wird ein Tab-Panel angezeigt und sein zugehöriges Tab so gestaltet, dass es als aktiv angezeigt wird. Wenn der Benutzer eines der anderen Tab-Elemente aktiviert, wird das zuvor angezeigte Tab-Panel ausgeblendet, das mit dem aktivierten Tab assoziierte Tab-Panel wird sichtbar und das Tab als "aktiv" betrachtet.

Für eine einfach wählbare tablist sollten die nicht aktiven tabpanel-Elemente für den Benutzer ausgeblendet werden, bis der Benutzer das mit diesem tabpanel assoziierte Tab auswählt.

Wenn Sie eine mehrfach auswählbare tablist erstellen, verwenden Sie aria-multiselectable="true" auf dem tablist-Element.

Die tab-Elemente, nicht die tablist, haben das Attribut aria-selected. Für die mit jedem sichtbaren tabpanel assoziierten Tabs wird aria-selected="true" gesetzt. Die mit ausgeblendeten tabpanel-Elementen assoziierten Tabs haben ihr aria-selected-Attribut auf false gesetzt.

Wenn die Tab-Liste ein sichtbares Label hat, setzen Sie aria-labelledby auf die id des beschriftenden Elements. Wenn nicht, verwenden Sie aria-label, um ein Label bereitzustellen.

Um tastaturzugänglich zu sein, muss der Fokus für die Nachkommen dieser Rolle verwaltet werden.

Elemente mit der tablist-Rolle haben einen impliziten aria-orientation-Wert von horizontal.

tab-Rolle

Erforderliche untergeordnete Elemente. Jede tablist muss ein oder mehrere tab-Kindelemente haben.

aria-multiselectable

Wenn auf true gesetzt, zeigt es an, dass der Benutzer mehr als ein tab von den tablist-Nachkommen auswählen darf.

aria-orientation

Wenn das tablist-Element vertikal ausgerichtet ist, setzen Sie aria-orientation="vertical". Der Standard ist horizontal.

Für die Tab-Liste:

Tab

Wenn der Fokus in die Tab-Liste verschoben wird, wird der Fokus auf das aktive tab-Element gesetzt.

Wenn die Tab-Liste den Fokus enthält, verschiebt der Fokus zum nächsten Element in der Tab-Umreihung der Seite außerhalb der Tab-Liste, welches das tabpanel ist, es sei denn, das erste Element, das bedeutsamen Inhalt innerhalb des tabpanel enthält, ist fokussierbar.

Wenn der Fokus auf einem Tab-Element in einer horizontalen Tab-Liste ist:

Linker Pfeil

verschiebt den Fokus auf das vorherige Tab. Wenn der Fokus auf dem ersten Tab ist, wird der Fokus auf das letzte Tab verschoben. Optional kann das neu fokussierte Tab aktiviert werden.

Rechter Pfeil

Verschiebt den Fokus auf das nächste Tab. Wenn der Fokus auf dem letzten Tab-Element ist, wird der Fokus auf das erste Tab verschoben. Optional kann das neu fokussierte Tab aktiviert werden.

Wenn der Fokus auf einem Tab-Element in einer vertikalen Tab-Liste ist:

Aufwärtspfeil

verschiebt den Fokus auf das vorherige Tab. Wenn der Fokus auf dem ersten Tab ist, wird der Fokus auf das letzte Tab verschoben. Optional kann das neu fokussierte Tab aktiviert werden.

Abwärtspfeil

Verschiebt den Fokus auf das nächste Tab. Wenn der Fokus auf dem letzten Tab-Element ist, wird der Fokus auf das erste Tab verschoben. Optional kann das neu fokussierte Tab aktiviert werden.

Wenn die Tab-Liste horizontal ist, wird nicht auf Abwärtspfeil oder Aufwärtspfeil gehört, sodass diese Tasten ihre normalen Browser-Scrolling-Funktionen bereitstellen können, selbst wenn der Fokus innerhalb der Tab-Liste ist.

Wenn der Fokus auf einem Tab in einer tablist mit entweder horizontaler oder vertikaler Orientierung ist:

Space oder Enter

Aktiviert das Tab, wenn es nicht automatisch beim Fokussieren aktiviert wurde.

Home (Optional)

Verschiebt den Fokus auf das erste Tab. Optional kann das neu fokussierte Tab aktiviert werden.

Ende (Optional)

Verschiebt den Fokus auf das letzte Tab. Optional kann das neu fokussierte Tab aktiviert werden.

Umschalt + F10

Wenn das Tab ein zugehöriges Popup-Menü hat, öffnet es das Menü.

Entf (Optional)

Wenn das Löschen zulässig ist, löscht (schließt) es das aktuelle Tab-Element und sein zugehöriges tabpanel, setzt den Fokus auf das Tab, das dem geschlossenen Tab folgt, und optional wird das neu fokussierte Tab aktiviert. Wenn es kein Tab gibt, das dem gelöschten Tab folgte, z.B. wenn das gelöschte Tab das rechte Tab in einer von links nach rechts horizontalen Tab-Liste war, wird der Fokus auf das Tab gesetzt, das dem gelöschten Tab vorausging und optional wird es aktiviert. Wenn die Anwendung löscht, dass alle Tabs gelöscht werden können, und der Benutzer das letzte verbleibende Tab in der Tab-Liste löscht, bewegt die Anwendung den Fokus auf ein anderes Element, das einen logischen Arbeitsablauf bietet. Als Alternative zu Löschen oder zusätzlich zum Unterstützen von Löschen ist die Löschfunktion in einem Kontextmenü verfügbar.

Sehen Sie das Beispiel für tabpanel, tab, und tablist in der Definition der tab-Rolle.

• tab-Rolle
• tabpanel-Rolle