Accessibility in JavaScript: Wie Sie Ihre Website für alle zugänglich machen

Accessibility in JavaScript: Wie Sie Ihre Website für alle zugänglich machen

Stellen Sie sich vor, Sie besuchen eine Website, und der Button „Kaufen“ lässt sich nicht mit der Maus klicken – nur mit der Tastatur. Oder Sie sehen den Bildschirm nicht, und der Screenreader überspringt einfach die Hälfte des Inhalts. Unangenehm, oder? Für Millionen von Menschen ist das jedoch der tägliche Alltag.

Accessibility (oder a11y) ist nicht nur ein modischer Begriff. Es ist eine Möglichkeit, Ihren Code ehrlich zu machen. Barrierefreiheit in JavaScript bedeutet, dass Ihre Website für alle funktioniert: für Menschen mit Sehbehinderungen, motorischen Einschränkungen, für diejenigen, die nur die Tastatur oder Sprachsteuerung verwenden. Und ja, es geht auch um SEO: Suchmaschinen lieben sauberen, semantisch korrekten Code.

In diesem Artikel behandeln wir reale Beispiele in JavaScript, die Sie noch heute umsetzen können. Kein überflüssiger Text – nur Code und Praxis.

Warum Barrierefreiheit Ihre Verantwortung ist

Wenn Sie in JavaScript programmieren, steuern Sie das Verhalten der Benutzeroberfläche. Gerade JS zerstört oft die Barrierefreiheit: dynamische Modalfenster, unendliches Scrollen, benutzerdefinierte Auswahlfelder. Screenreader (Bildschirmleseprogramme) können Ihre Gedanken nicht lesen – sie lesen das, was Sie ihnen über HTML und ARIA mitteilen.

Die gute Nachricht: Die meisten Probleme lassen sich an einem Abend beheben. Die schlechte: Wenn Sie nicht von Anfang an an die Barrierefreiheit denken, müssen Sie wochenlang umschreiben.

ARIA-Attribute: Ihr wichtigstes Werkzeug

ARIA (Accessible Rich Internet Applications) ist eine Reihe von Attributen, die assistiven Technologien helfen zu verstehen, was auf der Seite passiert. JavaScript eignet sich perfekt, um diese Attribute dynamisch zu aktualisieren.

Beispiel 1: Dynamisches Aktualisieren von aria-live

Angenommen, Sie haben einen Chat, in dem Nachrichten ohne Seitenneuladen geladen werden. Der Screenreader muss die neue Nachricht ansagen. Ohne aria-live erfährt der Benutzer nichts von der Aktualisierung.

// Container für Benachrichtigungen erstellen\nconst liveRegion = document.createElement('div');\nliveRegion.setAttribute('aria-live', 'polite');\nliveRegion.setAttribute('aria-atomic', 'true');\nliveRegion.classList.add('sr-only'); // visuell verstecken\ndocument.body.appendChild(liveRegion);\n\n// Funktion zum Hinzufügen einer Nachricht\nfunction addChatMessage(message) {\n  liveRegion.textContent = ''; // leeren\n  liveRegion.textContent = `Neue Nachricht: ${message}`;\n}\n\n// Beispielaufruf\naddChatMessage('Hallo! Wie geht es dir?');

Wichtig: aria-live="polite" sagt dem Screenreader: „Sage es an, wenn du mit dem aktuellen Lesen fertig bist.“ aria-live="assertive" unterbricht das Lesen – verwenden Sie dies für kritische Fehler.

Beispiel 2: Benutzerdefinierter Spoiler/Akkordeon

Die standardmäßigen <details> und <summary> sind bereits barrierefrei, aber wenn Sie ein benutzerdefiniertes Akkordeon in JS erstellen, müssen Sie ARIA-Rollen und -Zustände hinzufügen.

// Für jeden Akkordeon-Abschnitt\nconst accordionButton = document.querySelector('.accordion-button');\nconst accordionPanel = document.querySelector('.accordion-panel');\n\naccordionButton.setAttribute('aria-expanded', 'false');\naccordionButton.setAttribute('aria-controls', 'panel-1');\naccordionPanel.setAttribute('id', 'panel-1');\naccordionPanel.setAttribute('aria-hidden', 'true');\n\naccordionButton.addEventListener('click', () => {\n  const isOpen = accordionButton.getAttribute('aria-expanded') === 'true';\n  accordionButton.setAttribute('aria-expanded', !isOpen);\n  accordionPanel.setAttribute('aria-hidden', isOpen);\n});

Jetzt versteht der Screenreader, dass der Button das Panel steuert, und weiß, ob es geöffnet oder geschlossen ist.

Fokusverwaltung: Lassen Sie den Benutzer nicht verloren gehen

Einer der häufigsten Fehler bei der JavaScript-Barrierefreiheit ist der Fokusverlust. Wenn ein modales Fenster geöffnet wird, muss der Fokus hineinwandern. Wenn es geschlossen wird, muss er zurück zu dem Button gehen, der es geöffnet hat.

P