Generator für barrierefreie Tabs
Schreibe Titel und Inhalt jedes Tabs, wähle den Stil und kopiere. Die Vorschau lässt sich mit der Maus und den Pfeiltasten testen.
So geht’sTabs, die mit der Tastatur funktionieren
Verfügbar auf: 
Generator für barrierefreie Tabs: wofür es gut ist
Tabs ordnen Inhalte wie Beschreibung, Maße und Lieferung eines Produkts auf kleinem Raum. Ohne Sorgfalt gemacht, sind sie mit Tastatur oder Screenreader unbenutzbar.
Der Generator folgt dem Tabs-Standard der WAI-ARIA Authoring Practices: tablist, tab mit aria-selected und tabpanel, verbunden durch aria-controls und aria-labelledby, nur der aktive Tab in der Tabulatorreihenfolge und Navigation mit Pfeiltasten, Pos1 und Ende. Die Panels werden erst versteckt, wenn das Skript lädt. Du wählst den Stil unterstrichen oder als Pille und die Farbe.
So geht’s
- Schreibe Titel und Inhalt jedes Tabs.
- Wähle Stil und Farbe.
- Teste in der Vorschau und kopiere den Code.
Wann nutzen
- Produktdetails in einem Onlineshop.
- Tarife oder Leistungen nebeneinander.
- Informationen zu einer Veranstaltung.
Häufige Fragen
Was macht Tabs barrierefrei?
Der Tabs-Standard von WAI-ARIA: Die Liste hat role=tablist, jeder Tab ist ein Button mit role=tab und aria-selected, und jeder Inhalt hat role=tabpanel, über aria-controls und aria-labelledby mit dem Tab verbunden. Nur der aktive Tab wird mit der Tabulatortaste erreicht; zwischen den Tabs bewegt man sich mit den Pfeiltasten.
Und wenn das JavaScript nicht lädt?
Der Code versteckt die Panels erst, nachdem das Skript läuft. Ohne JavaScript erscheinen alle Inhalte untereinander, und nichts wird unzugänglich.
Tabs oder Akkordeon?
Tabs funktionieren gut bei wenigen kurzen Titeln am Computer. Bei vielen Elementen oder langen Texten, besonders am Handy, ist das Akkordeon (Fragen, die sich öffnen und schließen) meist besser.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.