Akkordeons mit Button und aria-expanded

Ein Akkordeon ist eine Gruppe von Überschriften, die auf- und zugeklappt werden, um Inhalte anzuzeigen. Jede Sektion kann unabhängig geöffnet werden, anders als bei Tabs.

Gestalten Sie jede Akkordeon-Überschrift als echten Button. Buttons können fokussiert werden, funktionieren mit Enter und der Leertaste und werden von Screenreadern automatisch als solche angesagt.

Seien Sie vorsichtig mit einem anklickbaren div als Überschrift. Es kann nicht fokussiert werden, ignoriert die Tastatur und teilt assistiven Technologien nichts über seine Funktion mit.

Fügen Sie dem Button aria-expanded hinzu, damit Screenreader „eingeklappt“ oder „ausgeklappt“ ansagen. Dieser einzelne Status macht ein Akkordeon zugänglich.

Wenn die Person den Button aktiviert, wechseln Sie aria-expanded zwischen true und false. Halten Sie den Wert damit synchron, ob das Panel tatsächlich angezeigt wird.

Verwenden Sie am Button aria-controls und setzen Sie den Wert auf die id des Panels, das er öffnet. So erkennen Benutzer, welche Inhalte diese Überschrift anzeigt.

Wenn eine Sektion geschlossen ist, versehen Sie ihr Panel mit dem Attribut hidden. Dadurch wird es bis zum erneuten Öffnen von der Seite und aus dem Barrierefreiheitsbaum entfernt.

Platzieren Sie jeden Button innerhalb einer echten Überschrift wie h3. Screenreader-Benutzer können dann mithilfe der Überschriftennavigation von Sektion zu Sektion springen.

Ein einzelnes Ein- und Ausblenden ist ein Disclosure, keine Tablist. Es benötigt nur einen Button mit aria-expanded, aber keine tablist- oder tab-Rollen.

Lassen Sie den Fokus nach dem Umschalten auf dem Button, den die Person gedrückt hat. Verschieben Sie den Fokus nicht in das Panel; das irritiert Tastaturbenutzer.

Da der Button seinen eigenen Status enthält, sagt ein Screenreader jedes Mal „ausgeklappt“ oder „eingeklappt“ an. Benutzer wissen dadurch immer, was bei einer Aktivierung geschieht.

Sie haben gelernt, dass eine Akkordeon-Überschrift aus einem Button mit aria-expanded besteht, der in eine Überschrift eingeschlossen ist. Schalten Sie den Status um, verweisen Sie auf das Panel und blenden Sie es im geschlossenen Zustand aus.