Widget Akkordeon

Live-Beispiel

Eine Überschrift

Hallo Welt.

eins
zwei
drei

HTML-Quelltext

<div class="accordion">
  <button aria-expanded="false" aria-controls="c104550-accordion"> Eine Überschrift </button>
  <div id="c104550-accordion">
    <div class="ce-textpic ce-center ce-above">
      <div class="ce-bodytext">
        <p>Hallo Welt.</p>
        <ul>
          <li>eins</li>
          <li>zwei</li>
          <li>drei</li>
        </ul>
      </div>
    </div>
  </div>
</div>

HTML-Aufbau

<div class="accordion">: Wrapper dieses Widgets
- <button aria-expanded="false" aria-controls="c104550-accordion">Eine Überschrift</button>: Toggle-Button/"Balken" des Akkordeons:
  - Attribut aria-expanded: Bestimmt, ob das Akkordeon geöffnet ("true") oder geschlossen ("false") ist. Wird bei Click auf Button getoggelt.
  - Attribut aria-controls: HTML-ID jenes HTML-Elements, dessen Sichtbarkeit beeinflusst wird (Wrapper des Akkordeon-Inhalt).
  - Text-Content: Titel des Toggle-Buttons/Überschrift des Akkordeons.
- <div id="c104550-accordion">: Wrapper des Akkordeon-Inhalts.

Initialisierungscode

import { ButtonExpand } from './js/gesis-accordion.js';

document.addEventListener('DOMContentLoaded', function() {

  const accordionButtons = document.querySelectorAll('.accordion > button[aria-expanded][aria-controls]');
  for (const accordionButton of accordionButtons) {
    const be = new ButtonExpand(accordionButton);
    be.init();
  }

});

Barrierefreiheit

Öffnen/Schließen auch per Tastatur möglich.
Titel des Akkordeons soll aussagekräftig über den Inhalt des Akkordeons informieren.
aria-expanded erlaubt Screenreadern, dem Benutzer mitzuteilen, ob das Akkordeon geöffnet oder geschlossen ist. Diese Information ist wichtig zur Erfüllung der Barrierefreiheit, da Screenreader-Benutzern (z.B. blinden Menschen) vermittelt wird, dass es sich beim Akkordeon um ein Seitenelement handelt, bei welchem weiterer Inhalt durch explizite Interaktion erschließbar ist.
Inhalt geschlossener Tabs wird derzeit bei Seitensuche nicht gefunden (internes Issue).
Implementiert W3C-WAI-ARIA-Spezifikation Accordion.