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.
- Attribut
<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.