Disclosure Widgets

A Button aka DW Trigger toggles the Content aka DW Panel.

1. Native HTML Disclosure Widget

<details> and <summary>

This summary serves as a DW trigger

Here is some content aka the DW panel.
And some more lines Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis suscipit nesciunt minima impedit, cupiditate animi magnam temporibus sed provident obcaecati.

2. Custom ARIA disclosure widget

Custom ARIA disclosure widgets consist of

• a trigger which should be exposed as a <button>
• the disclosure widget content aka panel, which can be a <div> or maybe a <section> or an <article> (or a <ul> in case it's a navigation).
• For styling purposes, the DW can be wrapped in a generic <div> (or a <li> in case it's a navigation).

Custom ARIA disclosure widgets should:

• The trigger should convey the state of the DW, indicating if the content panel is expanded or collapsed with aria-expanded.
• The trigger must be keyboard-operable with Space and Esp, which is provided by the native <button>-element.
• JavaScript sorgt dann dafür, dass der Klick auf den Button das Panel zeigt oder versteckt: JS toggelt die Sichtbarkeit des Panels und den Status des Buttons aria-expanded="[true | false]"
• Zusätzlich kann optional mit aria-controls="[panelID]" die Verbindung zum zugehörigen Panel hergestellt werden. Das Panel muss eine unique ID bekommen. Es wird zur Zeit nicht an alle Screenreader weitergeleitet, kann aber als Styling Hook oder als JS-Referenz benutzt werden.

Im Unterschied zum nativen DW wird der Status vom hier vom Trigger kommuniziert, nicht vom Container (das open-Attribut wird beim nativen DW vom Container <details> kommuniziert.)

Es gibt zwei Varianten: Panel mit hidden (Variante no-js) oder mit display: none; (Variante mit JS) verstecken.

3. Progressive Enhancement (no JS available)

Best Practice

Wenn ein Button (und/oder ein ARIA-Attribut) JavaScript benötigt, um zu funktionieren, erstelle diesen Button bzw. die nötigen Attribute mit JavaScript.