GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

Widget Akkordeon

Live-Beispiel

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 (mittels globaler Referenzen)

// initializeAccordions(..) is a globally scoped function
// for initializing an array of accordion HTML elements.
// it returns an array of initialized Accordion objects
const accordionButtonElements = document.querySelectorAll('.accordion > button[aria-expanded][aria-controls]');
const accordions = initializeAccordions(accordionButtonElements);

// ...

// Accordion(..) is a globally scoped constructor
const anotherAccordionButtonElement = document.getElementById('another-accordion-button');
const anotherAccordion = new Accordion(anotherAccordionButtonElement);

Initialisierungscode (mittels import, z.B. im Rahmen eines webpack-Builds)

import { Accordion } 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 accordion = new Accordion(accordionButton);
    accordion.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.