ARIA: tabpanel Rolle
Das ARIA tabpanel
ist ein Container für die Ressourcen von geschichtetem Inhalt, der mit einem tab
verbunden ist.
Beschreibung
Die tabpanel
Rolle zeigt an, dass das Element ein Container für die mit einer tab
Rolle verbundenen Ressourcen ist, wobei jede tab
innerhalb einer tablist
enthalten ist.
Ein tabpanel
ist Teil einer Tab-Oberfläche, eines häufigen Benutzererfahrungsmusters, bei dem eine Gruppe visueller Tabs ein schnelles Umschalten zwischen mehreren geschichteten Ansichten ermöglicht. Jedes Tab wird mit der tab
Rolle definiert und diese Tabs sind innerhalb eines Elements mit der tablist
Rolle enthalten. Die tablist
wird oft visuell über oder neben einem Inhaltsbereich platziert, der die zugehörigen Tabpanels enthält. Die tabpanel
Rolle ist der Container für jede Inhaltsfläche, die mit einem entsprechenden tab
in der Tab-Oberfläche's tablist
verbunden ist.
In vielen Tab-Oberflächen wird jeweils nur ein einziges tabpanel
sichtbar sein. Einige Oberflächen erfordern jedoch möglicherweise, dass mehrere Tabpanels gleichzeitig angezeigt werden. In diesen Fällen würde der tablist
das aria-multiselectable
Attribut zugewiesen, und die tab
Elemente würden dann das aria-expanded
Attribut verwenden, um anzuzeigen, ob ihr zugehöriges tabpanel
sichtbar war oder nicht. Der ausgewählte Zustand des Tabs würde stattdessen verwendet werden, um anzuzeigen, welches Tabpanel das derzeit 'aktive' Panel ist. Zum Beispiel könnte dies anzeigen, welches Tabpanel den Tastaturfokus erhalten würde, wenn jemand die tab Taste drücken würde, wenn der Fokus auf einem Tab innerhalb der Mehrfachauswahl tablist
liegt.
In Einzelwahl-Tab-Oberflächen wird nur das tabpanel
angezeigt, das dem aktuell ausgewählten Tab zugeordnet ist. Alle anderen tabpanel
Elemente, die mit den nicht ausgewählten Tabs verbunden sind, müssen für die Benutzer ausgeblendet werden. Wenn sich also die Tab-Auswahl ändert, ändert sich auch das angezeigte Tabpanel, während das zuvor angezeigte Tabpanel dann ausgeblendet wird.
In Mehrfachauswahl-Tab-Oberflächen können mehrere tabpanel
Elemente angezeigt werden, die dem erweiterten Zustand ihrer zugehörigen tab
Elemente entsprechen.
Tabs fungieren nicht als Ankerlinks zu einzelnen Panels — und bei Aktivierung sollte der Tastaturfokus auf dem aktuellen tab
Element bleiben und nicht automatisch zum neu angezeigten tabpanel
wechseln. Obwohl eine Tab-Oberfläche schrittweise basierend auf einem zugrundeliegenden Markup-Muster von In-Page-Hyperlinks, die auf ihre entsprechenden Inhaltsabschnitte verweisen, verbessert werden kann, sollte, wenn JavaScript verwendet wird, um diese Elemente in eine Tab-Oberfläche zu verwandeln, das Standardverhalten der Hyperlinks verhindert werden. Idealerweise könnte dies durch Entfernen oder Ändern des href
Attributs erfolgen, da dies den zusätzlichen Vorteil hätte, die hyperlink-spezifischen Menüeinträge aus dem Kontextmenü des Browsers des Elements zu entfernen.
Wenn der Tastaturfokus auf einer tablist
oder einem tab
innerhalb der tablist
liegt, sollte die Tab Taste so programmiert werden, dass sie von dem fokussierten Tab — das möglicherweise nicht das ausgewählte Tab ist — zum tabpanel
wechselt, das das derzeit ausgewählte Tab darstellt.
Jedes tab
in einer tablist
kann als Kennzeichnung für sein entsprechendes tabpanel
dienen. Fügen Sie die id
jedes tab
als Wert des aria-labelledby
Attributs jedes tabpanel
ein.
Sie können auch optional jedes tabpanel
mit seinem zugehörigen tab
verknüpfen, indem Sie die id
des tabpanel
als Wert des aria-controls
Attributs des tab
einfügen.
Wenn eine Tab-Oberfläche initialisiert wird, wird ein tabpanel
angezeigt und das zugehörige tab
wird so gestaltet, dass es anzeigt, dass es aktiv ist und seinen programmatischen Zustand widerspiegelt. Alle inaktiven tabpanel
Elemente müssen für alle Benutzer verborgen werden. Dies wird am häufigsten durch Verwendung von CSS's display: none
erreicht.
Sehen Sie den Artikel zur ARIA tab
Rolle für weitere spezifische Informationen zur Verwendung dieser Rolle.
Fügen Sie tabindex="-1"
hinzu, um einem tabpanel
zu erlauben, den Fokus zu erhalten, ohne das tabpanel
in die Tastatur-Fokusreihenfolge der Seite aufzunehmen.
Stellen Sie sicher, dass Sie Stile für ein tabpanel
definieren, wenn es den Fokus erhält, optimalerweise unter Verwendung der CSS :focus
Pseudoklasse, damit Tastaturbenutzer erkennen, dass es eine Fokusänderung gab, und sie sich bewusst sind, welcher Inhalt derzeit den Fokus hat.
Karussells können mit diesem Tab-Muster erstellt werden: Eine Folien-Auswahlsteuerung kann als tabs
in einer tablist
mit der Folie als tabpanel
Element markiert werden.
Zugehörige Rollen und Attribute
tab
Rolle-
Steuert die Sichtbarkeit des zugehörigen
tabpanel
tablist
Rolle-
Gruppe von
tab
Elementen. aria-labelledby
-
Bietet einen zugänglichen Namen. Verweist auf das
tab
Element, das das Panel steuert aria-expanded
-
Sollte auf den erforderlichen
tab
Elementen verwendet werden, wenn eine mehrfach auswählbaretablist
verwendet wird.
Tastaturinteraktionen
Sehen Sie die Tastaturinteraktionen für tablist
in der Definition der tablist
Rolle.
Beispiel
Sehen Sie das Beispiel für tabpanel
, tab
und tablist
in der Definition der tab
Rolle.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # tabpanel |
Unknown specification |