Hier ein Beispiel eines korrekt funktionierendes Accordions. Doch ist es auch Barrierefrei. Was muss beachtet werden und wie kann es umgesetzt werden?
Um das Problem mit dem
aria-expanded
-Attribut zu lösen, können Sie JavaScript verwenden, um den Status des Attributs dynamisch zu aktualisieren, wenn ein Accordion-Element geöffnet oder geschlossen wird. Hier ist eine Lösung:
JavaScript-Lösung zur dynamischen Aktualisierung von
aria-expanded
Fügen Sie den folgenden JavaScript-Code in Ihre HTML-Datei ein, entweder direkt in einem
<script>
-Tag oder in einer separaten JavaScript-Datei:
document.addEventListener(„DOMContentLoaded“, function () {
// Alle Accordion-Buttons auswählen
const accordionButtons = document.querySelectorAll(‚.accordion-button‘);
accordionButtons.forEach(button => {
button.addEventListener('click', function () {
// Den aktuellen Zustand des Buttons überprüfen
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Alle anderen Buttons schließen (optional, wenn nur ein Panel geöffnet sein soll)
accordionButtons.forEach(btn => {
if (btn !== button) {
btn.setAttribute('aria-expanded', 'false');
}
});
// Den Zustand des geklickten Buttons umschalten
button.setAttribute('aria-expanded', !isExpanded);
});
});});
Erklärung der Accessibility-Verbesserung
-
aria-expanded: Dieses Attribut wird dynamisch aktualisiert, um den aktuellen Zustand des Panels (geöffnet oder geschlossen) anzuzeigen. - Screenreader-Kompatibilität: Screenreader können den Status des Panels korrekt interpretieren und den Benutzern mitteilen, ob ein Panel geöffnet oder geschlossen ist.
- Barrierefreiheit: Die Verwendung von
aria-expandedentspricht den WAI-ARIA-Richtlinien für Accordions.
Bootstrap und
aria-expanded
Bootstrap aktualisiert das
aria-expanded
-Attribut automatisch, wenn Sie die Bootstrap-JavaScript-Dateien korrekt eingebunden haben. Dies geschieht durch die Verwendung von
data-bs-toggle="collapse"
und anderen Bootstrap-spezifischen Attributen. Wenn Sie also Bootstrap 5 oder eine neuere Version verwenden, müssen Sie möglicherweise kein eigenes JavaScript schreiben, um
aria-expanded
zu aktualisieren.
