Auf langen Seiten klappt heute vieles weg: Eine FAQ-Liste zeigt nur die Fragen, die Antwort erscheint erst auf Klick. Produktdetails liegen hinter Reitern, zwischen denen man hin- und herwechselt. Solche Akkordeons und Tabs halten eine Seite kurz und übersichtlich, weil sie Inhalt absichtlich verstecken.
Genau dieses Verstecken wird für einen Teil Deiner Besucher zum Problem. Wer den Aufklapp-Knopf nicht mit der Tastatur erreicht oder nicht hört, dass sich dort etwas öffnen lässt, sucht nach Inhalt, der für ihn nicht existiert. Ein barrierefreies Akkordeon räumt diese Hürde aus, und woran Du es erkennst, lässt sich ohne Technikwissen prüfen.
Wofür Akkordeons und Tabs gut sind
Beide Bausteine lösen dasselbe Problem: zu viel Inhalt auf einmal. Ein Akkordeon stapelt Punkte untereinander und zeigt erst auf Klick den jeweiligen Text. Tabs legen mehrere Inhalte auf denselben Platz und blenden über die Reiter den gewünschten ein. Der Besucher entscheidet selbst, was er sich ansieht.
Das ist bei langen FAQ-Seiten ein echter Gewinn. Statt seitenweise zu scrollen, überfliegt der Besucher die Fragen und öffnet nur die eine, die ihn betrifft. Auch Produktseiten, Preistabellen oder Anleitungen werden so handlicher, ohne dass Inhalt verloren geht.
Eine ehrliche Vorfrage gehört trotzdem dazu. Nicht jeder Text muss hinter einen Klick. Wenn eine Information für fast alle Besucher wichtig ist, steht sie besser offen da, statt im zugeklappten Zustand übersehen zu werden. Verstecke nur, was wirklich nur einen Teil der Leser angeht.
Mit der Tastatur bedienbar
Viele Menschen bedienen eine Webseite ohne Maus, allein über die Tastatur. Sie springen mit der Tab-Taste von Element zu Element und lösen mit der Eingabetaste aus, was gerade markiert ist. Ein gutes Akkordeon spielt da mit: Die Tab-Taste landet auf jeder Frage, ein sichtbarer Rahmen zeigt, wo man steht, und die Eingabetaste klappt den Abschnitt auf.
Bei Tabs gilt dasselbe für die Reiter. Man erreicht sie mit der Tastatur, sieht deutlich, welcher gerade aktiv ist, und schaltet zwischen ihnen um. Wenn die Wechsel sich nur per Mausklick auslösen lassen, bleibt ein ganzer Teil Deiner Inhalte für Tastatur-Nutzer unerreichbar.
Das ist der häufigste Knackpunkt bei selbstgebauten Aufklapp-Elementen. Wie die Bedienung ohne Maus überhaupt funktioniert, beschreibt der Beitrag zur Bedienung mit der Tastatur im Detail. Für Akkordeons zählt vor allem: aufklappen muss auch ohne Mauszeiger gehen.
Für Screenreader verständlich
Blinde Besucher lassen sich die Seite von einem Vorlese-Programm vortragen. Bei einem Akkordeon muss dieses Programm zwei Dinge ansagen können: dass sich hier etwas aufklappen lässt, und ob der Abschnitt gerade offen oder zu ist. Fehlt diese Ansage, wirkt die Frage wie ein gewöhnlicher Text, und die Antwort dahinter bleibt unentdeckt.
Der Zustand auf oder zu ist dabei das Entscheidende. Hört der Besucher, dass ein Bereich geschlossen ist, weiß er, dass es etwas zu öffnen gibt. Hört er, dass er offen ist, weiß er, dass der folgende Text dazugehört. Diese Rückmeldung macht aus einem stummen Klick-Element einen Baustein, der sich auch ohne Bildschirm bedienen lässt.
Damit ein Vorlese-Programm das alles sauber weitergibt, braucht es im Hintergrund die richtige Kennzeichnung. Wie diese Hinweise für Screenreader nachvollziehbar werden, ist Thema beim richtigen Einsatz solcher Hinweise. Für Dich als Betreiber zählt das hörbare Ergebnis: Das Programm sagt an, was aufklappbar ist und wie es gerade steht.
Häufige Fehler
Ein verbreiteter Fehler liegt im Verstecken selbst. Manchmal wird zugeklappter Inhalt nur optisch ausgeblendet, liegt aber weiter voll im Quelltext. Das Vorlese-Programm liest ihn dann komplett vor, obwohl auf dem Bildschirm nur die Frage steht. Der blinde Besucher hört seitenweise Text, den ein sehender gar nicht sieht.
Weitere Stolpersteine tauchen immer wieder auf:
- Kein Tastatur-Zugang: Die Aufklapp-Knöpfe reagieren nur auf die Maus, sodass Tastatur-Nutzer die Antworten nie zu sehen bekommen.
- Kein erkennbarer Zustand: Das Vorlese-Programm sagt nicht, ob ein Abschnitt offen oder zu ist, und der Besucher tappt im Dunkeln.
- Alles in einem Block: Ein einziges Akkordeon mit dreißig Punkten ist genauso unübersichtlich wie die lange Seite, die es ersetzen sollte.
- Nichtssagende Beschriftung: Reiter, die nur „Mehr" oder „Tab 1" heißen, verraten weder Maus- noch Tastatur-Nutzern, was sie öffnen.
Jeder dieser Punkte sperrt einen Teil Deiner Besucher aus, ohne dass es im normalen Maus-Betrieb auffällt. Genau deshalb lohnt der kurze Selbsttest aus der Sicht der Betroffenen.
Daran erkennst Du ein gutes Akkordeon
Du musst nichts davon selbst bauen, um es zu beurteilen. Mit drei kleinen Handgriffen prüfst Du an Deiner eigenen Seite, ob ein Akkordeon oder eine Reiter-Gruppe den größten Stolperstellen ausweicht.
- Tab-Taste: Leg die Maus zur Seite und drück mehrfach die Tab-Taste. Springt ein sichtbarer Rahmen auf die Fragen und Reiter, und reagieren sie auf die Eingabetaste, ist die Tastatur an Bord.
- Aufklappen und zu: Öffne einen Abschnitt und schließ ihn wieder. Beides sollte ohne Maus gehen und deutlich erkennbar sein.
- Vorlesen: Wenn Dein Gerät eine Vorlese-Funktion hat, lass die Seite vortragen. Sagt sie an, dass ein Bereich aufklappbar und gerade geschlossen ist, stimmt die Kennzeichnung.
Kein Test verlangt technisches Wissen. Sie zeigen Dir aus der Sicht Deiner Besucher, wo der Baustein hakt, und genau das ist die Sprache, die Deine Agentur versteht.
Das forderst Du für jedes Aufklapp-Element
Du brauchst keine Fachbegriffe, um das Richtige zu bestellen. Drei Vorgaben decken den größten Teil ab, und Du kannst das Ergebnis später selbst nachprüfen.
Verlange, dass sich jedes Akkordeon und jeder Reiter komplett mit der Tastatur öffnen und schließen lässt. Lass Dir zusagen, dass ein Vorlese-Programm ansagt, ob ein Bereich offen oder zu ist. Und achte darauf, dass jede Frage und jeder Reiter eine Beschriftung trägt, die schon vor dem Öffnen verrät, was dahinter steckt.
Mit diesen Vorgaben lenkst Du das Ergebnis, ohne je in den Maschinenraum zu steigen. Ähnlich gehst Du bei anderen aufklappbaren Bausteinen vor, etwa bei selbst gesteuerten Slidern, die ebenfalls Platz sparen und doch für alle bedienbar bleiben müssen.
Fazit
Akkordeons und Tabs sind praktische Helfer, solange jeder den versteckten Inhalt wieder hervorholen kann. Aufklappen mit der Tastatur, eine hörbare Ansage über offen oder zu und eine klare Beschriftung decken schon den größten Teil ab.
Mach den kurzen Selbsttest heute einmal an Deiner eigenen Seite. Du wirst schnell sehen, ob Deine Aufklapp-Elemente jeden hereinlassen oder ob hinter mancher Frage Inhalt liegt, den ein Teil Deiner Besucher nie zu Gesicht bekommt.