ARIA: tablist-Rolle

Beschreibung

Möglicherweise interagieren Sie gerade mit einer Registerkartenoberfläche, während Sie dies lesen! Browser-Tabs ermöglichen es dem Benutzer, mehrere Webseiten in einem einzigen Fenster zu öffnen. Durch Klicken auf eine Registerkarte in der Tab-Liste am oberen Rand des Browserfensters kann der Benutzer den zugehörigen Inhalt im Hauptbereich, dem Tabpanel, anzeigen, jeweils eine Seite. Dies wird als "Tab-Designmuster" bezeichnet.

Bei der Implementierung eines Tab-Designmusters werden die Rollen tab, tablist und tabpanel verwendet.

Tabs sind eine Reihe von geschichteten Inhaltsabschnitten, bekannt als Tab-Panels, die jeweils ein Panel von Inhalten 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 angezeigten Panels angeordnet, meist entlang der oberen Kante, verschachtelt in einem tablist-Element.

Jedes 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 von enthaltenen Tab-Elementen.

Wenn eine Registerkartenoberfläche initialisiert wird, wird ein Tab-Panel angezeigt und dessen zugehöriges Tab wird 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 Tab-Panel, das dem aktivierten Tab zugeordnet ist, wird sichtbar und das Tab gilt als "aktiv".

Für eine einfach auswählbare tablist sollten die nicht aktiven tabpanel-Elemente vor dem Benutzer verborgen bleiben, bis der Benutzer das Tab auswählt, das diesem tabpanel zugeordnet ist.

Bei der Erstellung einer mehrfach auswählbaren tablist, fügen Sie aria-multiselectable="true" im tablist-Element hinzu.

Die tab-Elemente, nicht die tablist, haben das aria-selected-Attribut. Setzen Sie aria-selected="true" für die Tabs, die mit jedem sichtbaren tabpanel verknüpft sind. Die Tabs, die mit versteckten tabpanel-Elementen verbunden sind, haben ihre aria-selected Attribute 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 Nachfahren dieser Rolle verwaltet werden.

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

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

tab-Rolle

Erforderliche zugehörige Elemente. Jede tablist muss ein oder mehrere tab-Kinder haben.

aria-multiselectable

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

aria-orientation

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

Tastaturinteraktionen

Für die Tab-Liste:

Tab

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

Wenn die Tab-Liste den Fokus enthält, wird der Fokus auf das nächste Element in der Seitentab-Sequenz außerhalb der tablist bewegt, das ist das tabpanel, es sei denn, das erste Element mit bedeutendem Inhalt im tabpanel ist fokussierbar.

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

Pfeil links

verschiebt den Fokus auf den vorherigen Tab. Wenn der Fokus auf der ersten Tab-Position liegt, verschiebt sich der Fokus auf die letzte Tab-Position. Optional aktiviert es die neu fokussierte Registerkarte.

Pfeil rechts

verschiebt den Fokus auf den nächsten Tab. Wenn der Fokus auf die letzte Tab-Position liegt, bewegt sich der Fokus auf die erste Tab-Position. Optional aktiviert es die neu fokussierte Registerkarte.

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

Pfeil nach oben

verschiebt den Fokus auf den vorherigen Tab. Wenn der Fokus auf der ersten Tab-Position liegt, verschiebt sich der Fokus auf die letzte Tab-Position. Optional aktiviert es die neu fokussierte Registerkarte.

Pfeil nach unten

verschiebt den Fokus auf den nächsten Tab. Wenn der Fokus auf die letzte Tab-Position liegt, bewegt sich der Fokus auf die erste Tab-Position. Optional aktiviert es die neu fokussierte Registerkarte.

Wenn die Tab-Liste horizontal ist, hört sie nicht auf Pfeil nach unten oder Pfeil nach oben, sodass diese Tasten ihre normalen Browserscroll-Funktionen ausführen können, selbst wenn der Fokus in der Tab-Liste liegt.

Wenn der Fokus auf einem Tab in einer Tab-Liste mit entweder horizontaler oder vertikaler Orientierung liegt:

Leertaste oder Eingabetaste

aktiviert die Registerkarte, wenn sie nicht automatisch beim Fokus aktiviert wurde.

Home (Optional)

verschiebt den Fokus auf die erste Registerkarte. Optional aktiviert es die neu fokussierte Registerkarte.

Ende (Optional)

verschiebt den Fokus auf die letzte Registerkarte. Optional aktiviert es die neu fokussierte Registerkarte.

Shift + F10

Wenn der Tab ein zugeordnetes Popup-Menü hat, öffnet er das Menü.

Löschen (Optional)

Wenn das Löschen erlaubt ist, löscht (schließt) das aktuelle Tab-Element und sein zugehöriges Tab-Panel, setzt den Fokus auf den Tab, der dem geschlossenen Tab folgte und aktiviert optional den neu fokussierten Tab. Wenn es keinen Tab gibt, der dem gelöschten Tab folgte, z.B. wenn der gelöschte Tab der am weitesten rechts liegende Tab in einer von links nach rechts horizontalen Tab-Liste war, setzt er den Fokus auf und optional aktiviert den Tab, der dem gelöschten Tab vorausging. Wenn die Anwendung erlaubt, dass alle Tabs gelöscht werden, und der Benutzer den zuletzt verbliebenen 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 zur Unterstützung von Löschen ist die Löschfunktion in einem Kontextmenü verfügbar.

Beispiele

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

Spezifikationen

Siehe auch

• tab-Rolle
• tabpanel-Rolle