Barrierefreiheit für Accordions auf einer Webseite – Richtige Lösung!

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-expanded entspricht 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.