Building an accordion component (Part 1)

Was ist ein Accordeon?

Ein Accordeon ist eine Gruppe von einklappbaren, miteinander verwandten Inhaltsbereichen. Es hilft, auf einer Website Platz zu sparen. Im Kern handelt es sich um eine Gruppe von Disclosure Widgets.

Was ist ein exklusives Accordeon?

Es darf immer nur ein einziges Disclosure Widget geöffnet sein, nicht mehrere zugleich. Exklusive Accordeons sind sich quasi »bewusst«, welches gerade geöffnet ist.
Ein Accordeon ist also eine Serie von Disclosure Widgets, die zusammengehören und als Gruppe identifiziert werden können, und wenn dieses Accordeon exklusiv ist, wird auch erwartet, dass sich diese Widgets wie eine Gruppe verhalten. Die Verwandschaft muss für einen Screenreader-Benutzer semantisch übermittelt werden.

Ein Accordeon aus einer Reihe von Disclosure Widgets erstellen

1. Eine Serie von accessible Disclosure Widgets erstellen.
2. Diese Widgets semantisch miteinander gruppieren, um eine Verwandschaft zwischen ihnen herzustellen und diese dem Screenreader kommunizieren.
3. Der Gruppe einen Namen geben und den Zweck kommunizieren.
4. Wenn das Accordion exklusiv ist, ein Gruppenverhalten implementieren, sodass wenn ein Widget geöffnet wird, die anderen geschlossen werden.

Um die semantische Verwandtschaft zwischen den Widgets an den Screenreader zu kommunizieren, gibt es zwei Möglichkeiten:

• Eine benannte Gruppe role="group" – also eine logische Sammlung von Items in einem Widget (diese ist nicht dafür gedacht, vom Screenreader in eine Seitenzusammenfassung aufgenommen zu werden).
• Auszeichnung als generische Landmark role="region"
  Ein section-Element mappt automatisch darauf, wenn es einen accName hat, braucht dann also keine explizite Auszeichnung mit ARIA mehr.

Der Hauptunterschied zwischen region und group ist, dass die group nicht in der Zusammenfassung bzw. outline der Seite vorhanden ist.
Die folgenden Accordeons sind keyboard- und screenreader-accessible (weil die Funktionatlität in den HTML-Elementen enthalten ist).

Accordeon mit group

<!-- nicht in der Seitenzusammenfassung/Outline enthalten -->
<div role="group" aria-labelledby="group-name">
  <span id="group-name" hidden>Über dieses Produkt</span>
  <details>
    <summary>Produktbeschreibung</summary>
    <p>Hier wird das Produkt im Detail beschrieben.</p>
  </details>
  ... more details
</div>

Accordeon mit named section

<!-- in der Seitenzusammenfassung/Outline enthalten -->
<section aria-labelledby="section-name">
  <h4 id="section-name">Über dieses Produkt</h4>
  <details>
    <summary>Produktbeschreibung</summary>
    <p>Hier wird das Produkt im Detail beschrieben.</p>
  </details>
  ... more details
</section>

Über dieses Produkt

Produktbeschreibung

Hier wird das Produkt im Detail beschrieben.

Versand und Lieferung

Hier sehen Sie die Versandkosten und Details zur Lieferung.

Garantie und Rückgabe

Die Produktgarantie ist hier genau beschrieben.

Spezifikationen

Produktabmessungen, Produktgewicht und mehr.

Ein exklusives Verhalten mit dem name-Attribut ergänzen

Das name-Attribut erzwingt, dass immer nur jeweils ein Accordeon in einem Set von mehreren Accordeons geöffnet sein kann. Der Browser erledigt dann den Rest; früher war dazu JavaScript nötig. Das gilt übrigens auch für eine Gruppe von Radio-Buttons (siehe auch AccAPI-Mappings - Das sollte auch irgendwann für details/summary gelten)!

<!-- in der Seitenzusammenfassung/Outline enthalten -->
<section aria-labelledby="section-name">
  <h4 id="section-name">Über dieses Produkt</h4>
  <details name="my-accordion">
    <summary>Produktbeschreibung</summary>
    <p>Hier wird das Produkt im Detail beschrieben.</p>
  </details>
  ... more details
</section>

Über dieses Produkt

Produktbeschreibung

Hier wird das Produkt im Detail beschrieben.

Versand und Lieferung

Hier sehen Sie die Versandkosten und Details zur Lieferung.

Garantie und Rückgabe

Die Produktgarantie ist hier genau beschrieben.

Spezifikationen

Produktabmessungen, Produktgewicht und mehr.

Was ist mit JavaScript?

JavaScript wird benötigt, wenn man z.B. ein exact-exclusive accordion möchte. In diesem Accordion ist immer ein Widget offen – es gibt nicht den Zustand, dass alle Widgets geschlossen sind. Es ist standardmäßig, also auch mit dem name-Attribut, nicht möglich, alle Widgets gleichzeitig zu öffnen.

Barrierefreiheit vs. Benutzerfreundlichkeit von exklusiven Akkordeons

Letzter Teil vom Video ... manchmal ist nicht-exklusiv besser. Es kommt immer auf den Kontext an.

Relevante Success Criteria

SC 2.1.1 Keyboard (Level A) – Regel 3

xxx

Links

• xxx