Aufbau
- Titel
- Trennlinie
- Ein-/Ausklappen-Funktion
Verhalten
Der Sidebar-Header enthält den Titel der Datenübersicht/Objekttyp und die Funktion zum Ein- und Ausklappen der Sidebar.
Sidebar Header ausgeklappt
Im ausgeklappten Zustand besteht der Sidebar-Header aus einer Trennlinie, dem [Titel der Datenübersicht / Objekttyp] und einem tertiären Icon-Button. Hier muss die Beschriftung “Schnellnavigation ausblenden” ergänzt werden. Der Titel muss im Code als H2 definiert sein.
Bei sehr langen Titeln kann die Überschrift zweizeilig werden.
Während der Titel noch geladen wird, wird an dessen Stelle eine Ladeanimation angezeigt, welche nicht fokussierbar ist.
Sidebar-Header eingeklappt
Im eingeklappten Zustand besteht der Sidebar-Header aus einer Trennlinie und einem tertiären Icon-Button. Hier muss die Beschriftung “Schnellnavigation einblenden” ergänzt werden.
Responsives Verhalten
Bei sehr langen Titeln kann die Überschrift zweizeilig werden.
Zustände
Detailzustände des Buttons (siehe Button: Zustände)
Barrierefreiheit
Die Ladeanimation trägt den Alternativtext “Titel der Schnellnavigation wird geladen”, welcher bei Mouse-Hover auch als Tooltip angezeigt wird. Der Ladezustand ist im Code ebenfalls als H2 gekennzeichnet, damit die Inhaltsstruktur der Seite auch beim Laden konsistent bleibt.
Falls das Laden des Sidebar-Titels länger als 2 Sekunden gedauert hat, wird nach vollständigem Laden der Text “Titel der Schnellnavigation ist geladen” vom Screenreader ausgegeben, unabhängig davon, wo sich zu dem Zeitpunkt der Fokus auf der Seite befindet. Wurde der Titel schon vor Ablauf der 2 Sekunden sichtbar, erfolgt keine Audio-Ausgabe.
Bedienung
Tastaturbedienung
- Klick auf die Tab-Taste fokussiert den Icon-Button.
- Enter oder Leertaste führt die Aktion aus.
- Der Fokus bleibt auf dem Button mit der entpsrechenden Gegenfunktion.
- Der erneute Klick auf die Tab-Taste fokussiert das nächste Steuerelement.
Mausbedienung
- Durch Klicken mit der linken Maustaste wird die Aktion ausgeführt
