Tabs in Formular

[Pit]

Hallo,

mir gelingt es gerade nicht, ein paar Tabs dieser Art in ein Formular zu integrieren. Die Tabs sollen, wenn angeklickt, verschiedene Formularinhalte zum Eintragen zur Verfügung stellen und das Formular soll weiterhin responsive sein.

Und genau das gelingt mir nicht. Ich erhalte zwar funktionsfähige Tabs, aber entweder außerhalb des Formulars und über den kompletten Bildschirm oder aber die Tabinhalte sind untereinander anstatt nebeneinander. Zudem weiß ich nicht, ob JS-Tabs wirklich nötig sind oder ob das nicht auch alleine durch CSS möglich ist.

Wie geht man denn hier sinnvollerweise vor?

Pit

[Gunnar Bittersmann]

@@Pit

ein paar Tabs dieser Art

w3schools war schon in der Vergangenheit keine gute Quelle und wird es wohl auch in Zukunft nicht sein. Die Tabs funktionieren nicht richtig. Nimm Tabs jener Art.

in ein Formular zu integrieren. […] Ich erhalte zwar funktionsfähige Tabs

Ich sehe keine.

Zudem weiß ich nicht, ob JS-Tabs wirklich nötig sind oder ob das nicht auch alleine durch CSS möglich ist.

Wann immer jemand mit einer CSS-„Lösung“ daherkommt, ist diese vermutlich nicht (oder zumindest äußerst schlecht) barrierefrei bedienbar.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Wann immer jemand mit einer CSS-„Lösung“ daherkommt, ist diese vermutlich nicht (oder zumindest äußerst schlecht) barrierefrei bedienbar.

also wäre details/summary auch keine Lösung?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Wann immer jemand mit einer CSS-„Lösung“ daherkommt, ist diese vermutlich nicht (oder zumindest äußerst schlecht) barrierefrei bedienbar.

also wäre details/summary auch keine Lösung?

Doch^[1], aber für ein anderes Problem: für ein Akkordeon^[2], nicht für Tabs. Und keine CSS-Lösung, sondern eine HTML-Lösung.

LLAP 🖖

---

1. Da die Antwort fast von Radio Jerewan kommen könnte, hätte ich wohl „Im Prinzip schon“ schreiben sollen‽ ↩︎

2. Sara Soueidan: How do you mark up an accordion? ↩︎

[Matthias Apsel]

Hallo Gunnar Bittersmann,

also wäre details/summary auch keine Lösung?

Doch[^Jerewan], aber für ein anderes Problem: für ein Akkordeon[^Akkordeon], nicht für Tabs.

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

Bis demnächst
Matthias

[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 🖖

[Pit]

Hi Gunnar,

Die Tabs funktionieren nicht richtig. Nimm Tabs jener Art.

Erstmal danke für Deine Antwort. Was ich an den Tabs klasse finde, ist deren responives Verhalten, zu einer Art Akkordion umzuspringen, wenn man zu klein geht. Aber sie sehen im Original bei weitem nicht so gut aus, wie die, die ich vorgeschlagen hatte. Dennoch schätze ich Deine Einwürfe dergestalt, dass ich "meine" nich weiter verfolgen werde und anstattdessen "Deine" weiter verfolge.

in ein Formular zu integrieren. […] Ich erhalte zwar funktionsfähige Tabs

Ich sehe keine.

Gehts wieder um die Tastaturbedienung? 😉

Zudem weiß ich nicht, ob JS-Tabs wirklich nötig sind oder ob das nicht auch alleine durch CSS möglich ist.

Wann immer jemand mit einer CSS-„Lösung“ daherkommt, ist diese vermutlich nicht (oder zumindest äußerst schlecht) barrierefrei bedienbar.

Danke auch für diesen Hinweis.

Pit

[marctrix]

Hej Pit,

Erstmal danke für Deine Antwort. Was ich an den Tabs klasse finde, ist deren responives Verhalten, zu einer Art Akkordion umzuspringen, wenn man zu klein geht. Aber sie sehen im Original bei weitem nicht so gut aus, wie die, die ich vorgeschlagen hatte.

Aussehen übernimmt man besser nicht aus weitgehend ungestylten Beispielen. Die passen bestenfalls so lala zum eigenen Design. Meist gar nicht, man nimmt sie aber trotzdem, wenn sie so unauffällig gestaltet sind, dass sie nicht stören.

Gut, dass du Gunnar vertraust. Damit tust du dir einen Gefallen. Du wirst schon sehen: am Ende funktioniert das besser und lässt sich leichter pflegen/warten.

Dennoch schätze ich Deine Einwürfe dergestalt, dass ich "meine" nich weiter verfolgen werde und anstattdessen "Deine" weiter verfolge.

Wir werden schon ein Design hinkriegen, das dir gefällt. Überlege dir mal wie die tabs aussehen sollen und versuche dich dran. Wenn du nicht weiter kommst, weißt du ja, wo du uns findest - und das Wiki. 😉

Marc

[Pit]

Hi Marc,

Wir werden schon ein Design hinkriegen, das dir gefällt. Überlege dir mal wie die tabs aussehen sollen und versuche dich dran. Wenn du nicht weiter kommst, weißt du ja, wo du uns findest - und das Wiki. 😉

Ich habs heute morgen schon komplett umgesetzt, klappt bestens in Funktion und auch vom Design her ists schon so, wie es mir gefällt. Es waren eigentlich nur kleinere css- Anpassungen hierfür nötig.

Also alles bestens und danke nochmal an Gunnar.

Eventuell wären ganz dünne Trenner zwischen den Tabüberschriften ganz nett, wenn also hier jemand Hilfe hätte, wärs schön. Aber auch so gefällt es mir schon ganz gut.

Edit: Mir fällt noch eine Frage ein: Kann man das so machen, dass man über einen Link direkt einen der tabs als geöffnet darstellt? Also Link.html#section3 oder so?

Pit