Version:
Tabs
Tabs strukturieren eng zusammengehörige Inhalte in mehrere Ansichten, von denen jeweils eine sichtbar ist.
Overview
Intro
Tabs ermöglichen den schnellen Wechsel zwischen gleichwertigen Ansichten innerhalb desselben fachlichen Kontexts. Der übergeordnete Gegenstand und die Aufgabe bleiben beim Wechsel erhalten. Lediglich der zugehörige Inhaltsbereich wird ausgetauscht. Tabs werden horizontal oder vertikal angeordnet. Horizontale Tabs sind der Standard. Vertikale Tabs werden gezielt eingesetzt, wenn eine längere Liste oder längere Beschriftungen dadurch schneller erfasst werden können und ausreichend Platz für die Tableiste neben dem Inhalt vorhanden ist.
Die Tabs werden an der gleichen Stelle wie die Navigationsleiste platziert.
broken_image
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ...wenn zwischen mindestens zwei eng zusammengehörigen, gleichwertigen Ansichten desselben Objekts oder Aufgabenbereichs gewechselt werden soll. ...wenn immer nur eine der verfügbaren Ansichten benötigt wird. ...wenn häufig und ohne vorgegebene Reihenfolge zwischen den Ansichten gewechselt wird. | ...für die Hauptnavigation einer Anwendung, die Navigation zwischen Modulen oder das Springen zu Abschnitten einer zusammenhängenden Seite. ....wenn Inhalte aus mehreren Bereichen gleichzeitig sichtbar sein müssen. ...für aufeinanderfolgende Prozessschritte, Aktionen, Filter oder einfache Darstellungswechsel. |
Tabs oder andere Komponente?
| Anforderung | Passende Komponente |
|---|---|
| Zwischen gleichwertigen Inhaltsansichten innerhalb desselben Kontexts wechseln | Tabs |
| Zu Abschnitten innerhalb einer zusammenhängenden Seite springen | Anchor-Nav |
| Durch aufeinanderfolgende Schritte eines Prozesses führen | Stepper |
| Zwischen Bereichen oder Seiten einer Anwendung navigieren | Side-Nav |
| Zwischen Modulen oder Anwendungen wechseln | Application-Bar |
| Dieselben Inhalte filtern oder ihre Darstellung umschalten | Segmented Control |
| Längere Inhaltsbereiche vertikal gliedern und einzeln ein- oder ausklappen | Accordion |
Guidelines
Aufbau
Tabs bestehen aus einer Tableiste und den zugehörigen Inhaltsbereichen. Die Tableiste liegt direkt an der Kante des Inhaltsbereichs: bei horizontalen Tabs oberhalb, bei vertikalen Tabs links daneben. Es ist immer genau ein Tab ausgewählt und genau der zugehörige Inhaltsbereich sichtbar. Eine Tableiste enthält im Regelfall zwei bis sechs Tabs. Wird eine größere Anzahl benötigt, muss geprüft werden, ob vertikale Tabs oder ein anderes Strukturierungs- beziehungsweise Navigationsmuster verständlicher ist. Tabs werden nicht ineinander verschachtelt. Jeder Tab erhält eine kurze, eindeutige Textbeschriftung. Ein Substantiv oder eine kurze Wortgruppe reicht in der Regel aus. Die Beschriftungen einer Tableiste folgen demselben sprachlichen Aufbau. Häufig benötigte und überblicksartige Inhalte stehen zuerst. Die Reihenfolge bleibt über vergleichbare Ansichten hinweg stabil. Icons dürfen eine Textbeschriftung unterstützen, ersetzen sie bei regulären horizontalen und vertikalen Tabs jedoch nicht. Icon-only-Tabs sind ausschließlich in dafür dokumentierten Sondervarianten zulässig.
Ausrichtung
Horizontal - Standard
Horizontale Tabs sind die Standardausrichtung. Sie werden oberhalb des zugehörigen Inhalts angezeigt und eignen sich für eine kleine Anzahl kurzer, schnell erfassbarer Beschriftungen. Der Zusammenhang zwischen Tab und Inhaltsbereich ist unmittelbar erkennbar, während die gesamte Breite für den Inhalt erhalten bleibt. Horizontale Tabs sollen verwendet werden, solange alle wichtigen Tabs ohne übermäßiges Scrollen oder Auslagern verständlich erreichbar bleiben. Die Tabs bleiben in einer Zeile und werden nicht umgebrochen.
broken_image
Tabs Variante Standard
Vertical
Vertikale Tabs werden links neben dem zugehörigen Inhaltsbereich angeordnet. Sie eignen sich, wenn mehr Tabs oder längere Beschriftungen benötigt werden und eine vertikale Liste dadurch deutlich schneller erfasst werden kann. Für Tableiste und Inhaltsbereich muss dauerhaft ausreichend Breite vorhanden sein. Vertikale Tabs sollen nur verwendet werden, wenn alle folgenden Bedingungen erfüllt sind:
- Die Tabs wechseln weiterhin zwischen gleichwertigen Inhalten desselben fachlichen Kontexts.
- Die vertikale Anordnung verbessert die Scanbarkeit gegenüber horizontalen Tabs.
- Tableiste und Inhaltsbereich können direkt nebeneinander dargestellt werden.
- Der Inhaltsbereich bleibt trotz der Tableiste ausreichend breit und gut lesbar.
Vertikale Tabs sind keine Alternative zur Side Nav oder zum Navigation Panel. Sie werden nicht für die Hauptnavigation, nicht für verschachtelte Hierarchien und nicht allein deshalb verwendet, weil links auf der Seite freier Platz vorhanden ist.
broken_image
Varianten/ Typen
Application Bar
Die Application Bar verwendet eine eigene vertikale, iconbasierte Tabs-Variante. Sie dient ausschließlich dem Wechsel zwischen Modulen oder Anwendungen und ist kein Beispiel für reguläre vertikale Tabs innerhalb einer Seite. Aufbau, Verwendung und Verhalten sind bei der Application Bar beschrieben.
Verwende die Variante Application Bar, wenn die Application Bar einer Anwendung umgesetzt wird. Diese Variante wird ausschließlich dort eingesetzt und ist nicht für die Navigation innerhalb einer Seite bestimmt.
Die Variante unterscheidet sich deutlich von der Standard-Variante: Die Tabs werden vertikal untereinander angeordnet, tragen anstelle eines Namens jeweils ein Icon und werden als abgerundete Icon-Flächen dargestellt. Die farbliche Gestaltung folgt den Icon-Farben und nicht der Hervorhebung der Standard-Tabs. Die Namen der Tabs werden stattdessen als Tooltip angezeigt.
Der ausgewählte Tab wird durch eine Hintergrundfläche und eine hervorgehobene Icon-Farbe gekennzeichnet. Reicht der Platz nicht für alle Tabs, gilt das allgemeine Overflow-Verhalten mit Pfeilen - bei vertikaler Anordnung nach oben und unten. Der weiche Übergang an den Rändern der Tableiste wird in dieser Variante nicht verwendet.
Aufbau, Verwendung und Verhalten dieser Variante sind bei der Application Bar beschrieben.
Verhalten
Beim ersten Aufruf ist ein fachlich sinnvoller Tab ausgewählt. Ist keine andere Auswahl begründbar, wird der erste Tab verwendet. Die Auswahl eines Tabs zeigt den zugehörigen Inhaltsbereich an und blendet den zuvor sichtbaren Bereich aus. Die übrige Seite und ihr fachlicher Kontext bleiben unverändert. Der Wechsel zwischen Tabs löst keine fachliche Aktion aus. Bereits erfasste Eingaben oder andere nicht gespeicherte Zustände dürfen dabei nicht unbemerkt verloren gehen. Lädt der Inhaltsbereich asynchron, bleibt die Tableiste bedienbar und der Ladezustand wird innerhalb des Inhaltsbereichs wahrnehmbar gemacht.
Overflow Verhalten
Horizontale Tabs bleiben in einer Zeile. Reicht die Breite nicht aus, können sie horizontal gescrollt werden. Die von Vaadin bereitgestellten Pfeile machen verdeckte Tabs erreichbar. Der ausgewählte oder fokussierte Tab wird in den sichtbaren Bereich gebracht. Vertikale Tabs können bei begrenzter Höhe vertikal gescrollt werden. Vaadin stellt dafür keine zusätzlichen Scroll-Buttons bereit. Eine dauerhaft lange, nur teilweise sichtbare Tableiste ist ein Hinweis darauf, dass ein anderes Strukturierungs- oder Navigationsmuster geeigneter sein kann.
broken_image
Beispiel Tabs Overflow Verhalten
Responsive Verhalten
Horizontale Tabs werden in schmalen Ansichten nicht auf mehrere Zeilen umgebrochen. Sie bleiben horizontal scrollbar. Werden dadurch zu viele wichtige Tabs verdeckt, muss ein anderes Muster für die schmale Ansicht vorgesehen werden. Vertikale Tabs bleiben nur erhalten, solange Tableiste und Inhaltsbereich nebeneinander ausreichend Platz haben. Bei weniger als 768 Pixeln verfügbarer Containerbreite werden reguläre vertikale Tabs horizontal angeordnet. Der zugehörige Inhalt wird unterhalb der Tableiste dargestellt. Die Tabs bleiben einzeilig und verwenden bei Platzmangel das horizontale Overflow-Verhalten mit sichtbaren Pfeilen. Der State Selected bleibt beim Wechsel der Ausrichtung erhalten. Ist die Tableiste aufgrund der Anzahl oder Länge der Beschriftungen auch horizontal nicht verständlich bedienbar, muss bereits bei der Konzeption eine andere Komponente oder Muster gewählt werden. Ein automatischer Wechsel zu Select, Accordion oder einem anderen Interaktionsmuster findet nicht statt. Vaadin nimmt den Wechsel der Ausrichtung nicht automatisch vor. Mate stellt das responsive Verhalten zentral bereit und ändert dabei die tatsächliche Orientierung der Tabs. Eine ausschließlich visuelle Umordnung per CSS ist nicht ausreichend.
States
Enabled
Ein verfügbarer, nicht ausgewählter Tab wird ohne Auswahlhervorhebung dargestellt.
Selected
Genau ein Tab ist ausgewählt. Auswahl und Fokus bleiben visuell unterscheidbar.
Focus
Der Tastaturfokus wird unabhängig vom Auswahlzustand deutlich sichtbar dargestellt.
Disabled
Tabs im State Disabled werden sparsam verwendet. Die Tableiste darf nicht der einzige Ort sein, an dem ein nicht verfügbarer Inhalt oder der Grund dafür erkennbar wird, da Tabs im State Disabled nicht fokussierbar und für assistive Technologien gegebenenfalls nicht wahrnehmbar sind.
Barrierefreiheit
Durch Vaadin bereitgestellt
Die eigenständige Tabs-Komponente stellt die grundlegende Semantik sowie das Fokus- und Auswahlverhalten der Tableiste bereit. Vertikale Tabs sind nur mit der eigenständigen Tabs-Komponente möglich; hier verantwortet die Anwendung den Inhaltswechsel und die semantische Verknüpfung der Inhaltsbereiche.
Tastaturbedienung
Mit der Tabulatortaste („Tab“) wird der ausgewählte Tab innerhalb der Tableiste fokussiert. Innerhalb horizontaler Tabs wird der Fokus mit der Pfeiltaste nach links beziehungsweise rechts bewegt. Innerhalb vertikaler Tabs wird dafür die Pfeiltaste nach oben beziehungsweise unten verwendet. Mit der Eingabetaste („Enter“) oder Leertaste („Space“) wird der fokussierte Tab ausgewählt. Die Tabulatortaste verlässt anschließend die Tableiste und führt zum nächsten Element der Tab-Reihenfolge.
Vom Produktteam sicherzustellen
Die Beschriftungen müssen den jeweiligen Inhalt eindeutig benennen und auch ohne Icon verständlich sein. Jede Tableiste braucht einen fachlich passenden zugänglichen Namen. Dafür wird eine sichtbare Überschrift semantisch zugeordnet oder eine eigenständige zugängliche Beschriftung bereitgestellt. Bei der eigenständigen Tabs-Komponente muss jeder Tab eindeutig mit seinem Inhaltsbereich verknüpft sein. Es darf immer nur der Inhaltsbereich des ausgewählten Tabs sichtbar sein. Die Fokusreihenfolge im sichtbaren Inhaltsbereich muss logisch bleiben. Beim Wechsel eines Tabs bleibt der Fokus zunächst auf dem ausgewählten Tab. Enthält der Inhaltsbereich kein geeignetes fokussierbares Element, wird der Inhaltsbereich selbst in die Tab-Reihenfolge aufgenommen. Asynchron geladene Inhalte brauchen eine wahrnehmbare Statusmeldung im zugehörigen Inhaltsbereich. Inhalt und Zeitpunkt dieser Meldung verantwortet die Anwendung.