Ausklapp-Bereiche

Mit einem Ausklapp-Bereich lassen sich versteckte Seiten-Inhalte anlegen und ausklappen. Meistens aktiviert der Nutzer dafür die Überschrift des versteckten Bereichs. Das schafft Platz und mehr Übersichtlichkeit auf der Seite.

Oft gibt es vor oder hinter der Überschrift ein Symbol wie ein Plus-Zeichen [+] oder ein nach unten zeigendes Dreieck ▼. Das soll deutlich machen, dass hier versteckte Inhalte vorhanden sind. Sobald der versteckte Inhalt des Ausklappbereichs sichtbar wird, ändert sich dieses Symbol. Es wird z.B. zu einem Minus-Zeichen ­ oder zu einem nach oben zeigenden Dreieck ▲.

Ausklapp-Bereiche in Aktion

Die Website der Bank kfw.de  nutzt Ausklapp-Bereiche auf Seiten mit viel Text. Nutzer können die Überschriften aktivieren, um den versteckten Inhalt darunter auszuklappen.

Video-Beschreibung

Ein Tastaturbenutzer fokussiert und aktiviert Überschriften eines Ausklapp-Bereichs.

  • Bei Erreichen der Überschrift ändert sich die Farbe und das Element wird unterstrichen. Der Name, die Rolle und der Zustand (reduziert) werden vom Screenreader ausgegeben.
  • Durch Aktivieren der Schaltfläche wird der Textinhalt darunter angezeigt. Der neue Status (erweitert) wird angesagt.
  • Der Benutzer wechselt zu anderen Ausklapp-Bereichen und aktiviert diese.

Typische Nutzungsprobleme bei Ausklapp-Bereichen

Ausklapp-Bereiche schaffen Probleme für Tastaturnutzer und Spracheingabe-Nutzern.

1 Tastaturnutzung: Ausklapp-Elemente können nicht fokussiert und aktiviert werden

Oft können die Elemente, die Inhalte ausklappen, nicht mit der Tastatur fokussiert und aktiviert werden. Sie enthalten ein Skript, das nur auf einen Zeiger (zum Beispiel Mauszeiger oder Touch) reagiert. Für Tastaturbenutzer sind sie völlig unzugänglich - selbst wenn die versteckten Abschnitte wie in diesem Fall fokussierbaren Inhalt enthalten.

Beachten Sie auch den schwachen Textkontrast der Ausklapp-Elemente (grau auf weiß).

Video-Beschreibung

Auf der flybmi.com Website versucht ein Tastaturbenutzer, die Ausklapp-Bereiche auf der Seite zu erreichen.

  • Mit der Tab-Taste durchläuft er das Navigationsmenü
  • Nach dem Menüpunkt "Ask" springt der Fokus direkt zur Fußzeile
  • Beim Rückwärts-Taben über die Links im Footer springt der Fokus wieder über den Ihalts-Abschnitt hinweg
  • Mit der Maus kann der Ausklapp-Bereich geöffnet werden

2 Nutzung mit Spracheingabe: Ausklappbereiche können nicht mit der Stimme aktiviert werden

Wenn die Bedien-Elemente nicht über native Links oder Schaltflächen implementiert werden, sind sie für Sprachbenutzer nicht zugänglich (oder zumindest sehr schwer zu bedienen).

Video-Beschreibung

Eine Spracheingabe-Nutzerin versucht, Links auf der Webseite bafa.de mit dem Programm Dragon naturally Speaking zu aktivieren.

  • Sie kann Nummern für die Links in den Reitern im Register-Elements anzeigen, aber sie kann sie nicht aktivieren, indem sie die Nummer sagt.
  • Die Bedien-Elemente des Ausklapp-Bereichs "Bewilligungsstatistik" und "Verwendungsnachweisstatistik" können nicht aktiviert werden - sie sind nicht als native Links oder Schaltflächen implementiert (oder unter Verwendung von ARIA-Rollen).
  • Ein Versprecher führt zu einer ungeplanten Aktion.
  • Die Aktivierung der Reiter im Register-Element über "Klick (Name)" funktioniert, da die Reiter als native Links implementiert wurden.

Zugänglichkeits-Tipps für Ausklapp-Bereiche

  • Verwenden Sie Überschriften-Markup für die Auslöser-Elemente, die darunter liegenden Inhalt anzeigen. Auf diese Weise bekommen Screenreader-Nutzer einen Überblick über den Inhalt, mit dem sie leicht navigieren können. Eine Alternative kann das Auflisten von Definitionslisten sein, z. B. wenn Sie Widgets für die Veröffentlichung eines Glossars oder einer FAQ verwenden.
  • Stellen Sie sicher, dass der angezeigte Inhalt direkt nach dem Auslöser kommt, der ihn anzeigt - nicht nur visuell, sondern auch im Quellcode (DOM). Screenreader-Nutzer können dann einfach den Pfeil nach unten bewegen, um den ausgeklappten Inhalt zu lesen.
  • Verwenden Sie eine native Schaltfläche (button) als Auslöser. Auf diese Weise erhält die interaktive Überschrift automatisch den Tastaturfokus. Machen Sie den Auslöser nicht über tabindex = "0" fokussierbar.
  • Lassen Sie den Tastaturfokus auf der Schaltfläche, wenn sie aktiviert ist. Tastatur-Nutzer können dann einfach zwischen erweitertem und reduziertem Zustand wechseln. Verwenden Sie das Attribut aria-expanded auf der Schaltfläche. Dessen Wert gibt an, ob der Inhalt sichtbar ist. (aria-expanded = "true" oder aria-expanded = "false".
  • Aktualisieren Sie den Zustand. Stellen Sie sicher, dass sich der Wert von aria-expanded dynamisch geändert wird, wenn ein Benutzer mit der Schaltfläche interagiert.
  • Wenn Sie einen Link als Auslöser verwenden, geben Sie ihm eine Schaltflächen-Rolle (role =button). Das Aktivieren des Auslösers führt nicht zu einem anderen Ort im Angebot - es löst eine Zustandsänderung aus. Deshalb ist ein Link nicht passend.
  • Stellen Sie sicher, dass verwendete Symbole einen guten Kontrast aufweisen (3: 1 oder besser).
  • Fügen Sie das Symbol in die Schaltfläche ein, sodass jeder Auslöser nur einen Tabstopp darstellt. Verwenden Sie leeren Alternativtext auf dem Bild.
  • Wenn Sie für Ausklapp-Symbole Font-Icons verwenden, verstecken Sie das Symbol mit aria-hidden.

Quellen für Ausklapp-Bereiche