Building an accordion component (Part 2)

Accordeons mit ARIA und JavaScript

Das name-Attribut funktioniert nicht bei custom disclosure widgets!

Accordeons mit JavaScript-Fallback

Was passiert, wenn JavaScript nicht funktioniert? Dann funktionieren auch die Accordeons nicht. Eine Lösung dafür wäre, eine mehrere <section>-Elemente (die zunächst alle ausgeklappt sind), mit JavaScript zu interaktiven Widgets zu machen. Das stellt sicher, dass der Inhalt der Panels immer zugänglich ist (wie z.B. in Reader Modes). Buttons und ARIA-Attribute werden mit JavaScript hinzugefügt und gemanaged.
Das HTML-Markup kann auf mehrere Arten gelöst werden. Wichtig ist das Endergebnis: es soll eine semantisch bedeutsame Gruppierung von zugänglichen Disclosure Widgets sein.

Accordeons mit interaktiven Überschriften

Accordeons sollten mit Überschriften gegliedert sein, damit Screenreader eine Gliederung erkennen können. Die Überschriften sollten aber auch klickbar sein. Problem: Überschriften sind keine interaktiven Elemente und können daher auch nicht aktiviert werden.

Man könnte die Überschriften in das <summary>-Element verpacken. Dann wird bei einem Klick auf die Überschrift das Panel geöffnet. Allerdings hat diese Variante einen großen Haken: Das <summary>-Element wird von den meisten AAPIs auf role="button" gemappt, und ein Element mit einer impliziten oder expliziten button-role unterdrückt die Semantik ihrer Kindelemente d.h., die Semantik der Überschrift geht verloren.

Dreht man die Sache um und wrappt das <summary>-Element in die Überschrift, geht die Funktion des <summary>-Elements verloren, weil es nicht mehr das erste, direkte Kind von <details> ist, es funktioniert daher nicht mehr als Trigger.

Wir brauchen also custom disclosure widgets, die die Semantik der Überschriften erhalten!

[ Live-Demonstration of the progressively-enhanced custom accordion with headings in the text-version of the chapter! ]

Inhalte in Accordeons für die Browsersuche auf der Seite zugänglich machen

Mit strg + F können Inhalte in einem nativen Accordeon - <details> und <summary> - gefunden werden. Bei custom accordeon widgets geht das nicht mehr, weil der Inhalt des Panels für alle User unsichtbar ist.
Lösung: verstecken mit hidden="until-found". Das macht die Inhalte für find-in-page und fragment-navigation und sogar für Suchmaschinen sichtbar. Vorsicht! kann mit CSS überschrieben werden! Daher sollte dieser Code rein:

[hidden]:not(:is([hidden="until-found"])) {
  display: none !important;
}