Tabs in Formular

[Gunnar Bittersmann]

@@Matthias Apsel

Was ist der Unterschied zwischen Akkordeon und Tabs? Abgesehen davon, dass beim Akkordeon auch alle Faltenbalginhalte unsichtbar sein könnten.

Oder auch alle sichtbar (je nach Implementierung) – im Gegensatz zu Tabs, wo jeweils immer nur ein Tab-Panel sichtbar ist.

Akkordeon und Tab tun ähnliches: das UI aufräumen, Inhalte verstecken und nur bei Bedarf anzeigen. Sie tun dies aber auf unterschiedliche Weise:

• Ein Akkordeon besteht aus mehreren, (je nach Implementierung) voneinander unabhängigen Bereichen. Das Auf-/Zuklappen der Bereiche geschieht mit jeweils einem zugehörigen Steuerelement, das die Zusammenfassung/Frage des jeweiligen Bereichs enthält. Das kann summary sein – oder ein button, welcher ein aria-expanded-Attribut tragen sollte, das mit den Werten true bzw. false den momentanen Zustand angibt.

  Die Tastaturnavigation im Akkordeon erfolgt mit Tab-Taste; Auf-/Zuklappen mit Leertaste.

• Im Gegensatz dazu sind bei Tabs sind die Steuerelemente (role="tab") in einer Liste (role="tablist") zusammengefasst. Damit wird eins der vorhandenen Tab-Panels (role="tabpanel) ausgewählt.

  Die Tastaturnavigation in der Tab-Liste sollte mit Pfeiltasten rechts/links erfolgen; mit Pfeil runter geht’s von einem Tab zum zugehörigen Tab-Panel, mit Leertaste zum nächten interaktiven Element.

LLAP 🖖