Barrierefreiheit in der Webentwicklung - JavaScript lernen

Web-Barrierefreiheit ist unverzichtbar, um inklusive digitale Erlebnisse zu schaffen. Barrierefreiheit kommt nicht nur Menschen mit Behinderungen zugute, sondern verbessert auch die allgemeine Nutzererfahrung und erweitert die Reichweite Ihrer Zielgruppe. Dieser Leitfaden behandelt die Bedeutung von Barrierefreiheit, Techniken zur barrierefreien DOM-Manipulation, die Rolle von ARIA (Accessible Rich Internet Applications) und wie dynamische JavaScript-Widgets für alle zugänglich gemacht werden können.

Wenn Sie mit JavaScript Interaktivität aufbauen — Inhalte ein- und ausblenden, Elemente auswählen und aktualisieren oder das Dokument ändern — übernehmen Sie die Verantwortung für die Barrierefreiheit, die der Browser sonst kostenlos mit einfachem HTML bereitstellen würde. Dieses Kapitel zeigt, wo diese Verantwortung liegt und wie Sie ihr gerecht werden.

Barrierefreie Inhalte erstellen

Bedeutung von Barrierefreiheit in der Webentwicklung

Barrierefreiheit in der Webentwicklung stellt sicher, dass alle Benutzer, einschließlich Menschen mit Behinderungen, effektiv auf Webinhalte zugreifen und mit ihnen interagieren können. Die Weltgesundheitsorganisation schätzt, dass über 1 Milliarde Menschen mit einer Form von Behinderung leben. Indem Sie Ihre Webinhalte zugänglich gestalten, sprechen Sie ein breiteres Publikum an, verbessern die Nutzbarkeit und erfüllen rechtliche Standards wie den Americans with Disabilities Act (ADA) und die Web Content Accessibility Guidelines (WCAG).

Vorteile der Barrierefreiheit

Inklusion: Ermöglicht Benutzern mit verschiedenen Behinderungen den Zugang zu Informationen und Diensten.
SEO-Verbesserung: Suchmaschinen belohnen barrierefreie Websites häufig mit besseren Platzierungen.
Rechtliche Konformität: Hilft, mögliche rechtliche Probleme im Zusammenhang mit Barrierefreiheitsstandards zu vermeiden.
Verbesserte Nutzbarkeit: Verbessert die allgemeine Nutzererfahrung für alle Besucher, auch für Menschen ohne Behinderungen.

Techniken für barrierefreie DOM-Manipulation

Tastaturnavigation

Viele Menschen können keine Maus verwenden — sie navigieren mit der Tastatur, einem Schaltergerät oder einem Screenreader, der die Tastatur steuert. Wenn ein Steuerelement nur auf Klicks reagiert, sind diese Benutzer ausgesperrt. Die Faustregel lautet: Alles, was ein Mausbenutzer tun kann, muss auch ein Tastaturbenutzer tun können.

Stellen Sie sicher, dass alle interaktiven Elemente über die Tastatur zugänglich sind. Verlassen Sie sich auf die natürliche DOM-Reihenfolge für die Tab-Navigation, um einen logischen Ablauf zu gewährleisten. Das Attribut tabindex steuert dies:

tabindex="0" fügt ein Element in die natürliche Tab-Reihenfolge ein (nützlich, wenn Sie ein nicht-natives Element interaktiv machen).
tabindex="-1" entfernt es aus der Tab-Reihenfolge, erlaubt es jedoch, es programmatisch mit element.focus() zu fokussieren.
Positive Werte wie tabindex="3" überschreiben die natürliche Reihenfolge und verursachen fast immer Verwirrung — vermeiden Sie sie.

Native Elemente wie <button>, <a href> und Formularsteuerelemente sind standardmäßig per Tastatur fokussierbar, was einer der stärksten Gründe ist, sie gegenüber klickbaren <div>-Elementen zu bevorzugen. Stellen Sie immer sicher, dass ein sichtbarer Fokusindikator (der Umriss) gestaltet ist, damit Tastaturbenutzer deutlich sehen können, welches Element fokussiert ist — setzen Sie niemals outline: none, ohne einen Ersatz bereitzustellen.

<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Navigation Example</title>
</head>
<body>
<h4>Press the 'Tab' key to navigate through the buttons!</h4>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</body>
</html>

Probier es selbst »

Dieses Beispiel verlässt sich auf die natürliche DOM-Reihenfolge für Schaltflächen und erleichtert Tastaturbenutzern die Navigation.

Barrierefreie interaktive Komponenten

Dieses Beispiel zeigt, wie man mit ARIA-Rollen und -Eigenschaften ein barrierefreies Akkordeon erstellt und den Fokus effektiv verwaltet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessible Accordion Example</title>
    <style>
        .accordion {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px 0;
        }
        .accordion-header {
            padding: 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
            width: 100%;
            text-align: left;
        }
        .accordion-content {
            display: none;
            padding: 10px;
        }
    </style>
</head>
<body>

<h1>Accessible Accordion Example</h1>
<h4>Use your keyboard (Enter or Space key) to toggle the accordion!</h4>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-1" aria-controls="accordion-content-1" aria-expanded="false">
        Section 1
    </button>
    <div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-header-1" tabindex="-1">
        <p>This is the content of section 1.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-2" aria-controls="accordion-content-2" aria-expanded="false">
        Section 2
    </button>
    <div class="accordion-content" id="accordion-content-2" role="region" aria-labelledby="accordion-header-2" tabindex="-1">
        <p>This is the content of section 2.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-3" aria-controls="accordion-content-3" aria-expanded="false">
        Section 3
    </button>
    <div class="accordion-content" id="accordion-content-3" role="region" aria-labelledby="accordion-header-3" tabindex="-1">
        <p>This is the content of section 3.</p>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', function () {
            const expanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !expanded);
            const content = document.getElementById(this.getAttribute('aria-controls'));
            content.style.display = !expanded ? 'block' : 'none';
        });

        header.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this.click();
            }
        });
    });
</script>

</body>
</html>

Probier es selbst »

Akkordeon-Struktur: Das Akkordeon besteht aus Kopfzeilen, die beim Anklicken den zugehörigen Inhalt auf- oder zuklappen.
Semantisches HTML & ARIA:
- Native <button>-Elemente werden für Kopfzeilen verwendet, um integrierte Tastatur- und Screenreader-Unterstützung zu gewährleisten.
- aria-controls verknüpft Kopfzeilen mit ihrem Inhalt.
- aria-expanded gibt den Zustand des Akkordeon-Abschnitts an.
- role="region" auf den Inhaltsabschnitten identifiziert sie als bedeutende Bereiche.
Tastaturzugänglichkeit:
- Ereignis-Listener behandeln click- und keydown-Ereignisse, um das Umschalten des Akkordeons über die Tastatur (Enter oder Leerzeichen) zu ermöglichen.

Warum das wichtig ist:

Verbesserte Nutzbarkeit: Das Akkordeon ist per Maus und Tastatur bedienbar.
Verbesserte Barrierefreiheit: ARIA-Attribute kommunizieren den Zustand und die Struktur an assistive Technologien und machen es für Screenreader-Benutzer zugänglich.
Fokusverwaltung: Der Fokus verbleibt auf der Auslöseschaltfläche, folgt den Standard-Akkordeon-Mustern und verhindert unerwartete Navigationsprünge für Tastaturbenutzer.

Eine ausführlichere Behandlung der Verknüpfung von Tastatur- und Klickverhalten finden Sie unter Ereignisbehandlung im DOM.

Semantisches HTML

Verwenden Sie semantische HTML-Elemente, um die Bedeutung und Struktur von Inhalten zu vermitteln. Dies hilft assistiven Technologien, Webinhalte effektiv zu interpretieren und darin zu navigieren.

<!DOCTYPE html>
<html>
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Content for section 1.</p>
        </section>
        <section id="section2">
            <h2>Section 2</h2>
            <p>Content for section 2.</p>
        </section>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>

Probier es selbst »

Dieses Beispiel verwendet semantische HTML-Elemente wie <header>, <nav>, <main>, <section> und <footer>, um die Struktur der Seite zu definieren.

Textalternativen

Screenreader können keine Bilder, Icons oder Canvas-Zeichnungen interpretieren — sie lesen die Textalternative, die Sie angeben. Jedes bedeutungsvolle Bild benötigt ein alt-Attribut, das seinen Inhalt oder seine Funktion beschreibt. Dekorative Bilder, die keine Information hinzufügen, sollten ein leeres alt="" haben, damit der Screenreader sie überspringt, anstatt einen Dateinamen vorzulesen.

<!-- Meaningful image: describe it -->
<img src="chart.png" alt="Sales rose 40% from January to March" />

<!-- Decorative image: hide it from screen readers -->
<img src="divider.png" alt="" />

<!-- Icon-only button: label it -->
<button aria-label="Close dialog">&times;</button>

Wenn Sie Bilder oder Icon-Schaltflächen dynamisch mit JavaScript generieren, setzen Sie das alt- oder aria-label-Attribut gleichzeitig mit der Erstellung des Elements — liefern Sie niemals ein unbeschriftetes Steuerelement aus.

Fokusverwaltung bei dynamischen Inhalten

Wenn JavaScript einen Dialog öffnet, neuen Inhalt anzeigt oder den Benutzer durch einen mehrstufigen Ablauf führt, müssen Sie den Fokus gezielt verschieben. Andernfalls bleibt ein Tastatur- oder Screenreader-Benutzer an der alten Position und hat keine Ahnung, dass sich etwas verändert hat. Das folgende Beispiel öffnet ein Modal, verschiebt den Fokus hinein, hält den Fokus fest, damit Tab nicht entkommen kann, und stellt den Fokus nach dem Schließen auf die Auslöseschaltfläche zurück.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Accessible Modal Example</title>
    <style>
        .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); }
        .overlay.open { display: flex; align-items: center; justify-content: center; }
        .dialog { background: #fff; padding: 20px; border-radius: 6px; min-width: 260px; }
    </style>
</head>
<body>
    <button id="open-btn">Open dialog</button>

    <div class="overlay" id="overlay">
        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
            <h2 id="dialog-title">Confirm action</h2>
            <p>Are you sure you want to continue?</p>
            <button id="confirm-btn">Confirm</button>
            <button id="close-btn">Cancel</button>
        </div>
    </div>

    <script>
        const overlay = document.getElementById('overlay');
        const openBtn = document.getElementById('open-btn');
        const closeBtn = document.getElementById('close-btn');
        let lastFocused = null;

        function openDialog() {
            lastFocused = document.activeElement;       // remember the trigger
            overlay.classList.add('open');
            document.getElementById('confirm-btn').focus(); // move focus in
        }

        function closeDialog() {
            overlay.classList.remove('open');
            if (lastFocused) lastFocused.focus();        // restore focus
        }

        openBtn.addEventListener('click', openDialog);
        closeBtn.addEventListener('click', closeDialog);

        // Trap focus inside the dialog and close on Escape
        overlay.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') { closeDialog(); return; }
            if (event.key !== 'Tab') return;

            const focusable = overlay.querySelectorAll('button');
            const first = focusable[0];
            const last = focusable[focusable.length - 1];

            if (event.shiftKey && document.activeElement === first) {
                event.preventDefault();
                last.focus();
            } else if (!event.shiftKey && document.activeElement === last) {
                event.preventDefault();
                first.focus();
            }
        });
    </script>
</body>
</html>

Wichtige Punkte: role="dialog" und aria-modal="true" teilen der assistiven Technologie mit, dass es sich um ein Modal handelt, aria-labelledby gibt ihm einen zugänglichen Namen, der Fokus wird beim Öffnen hineingezogen und kehrt beim Schließen zur Auslöseschaltfläche zurück, und Tab/Shift+Tab zirkulieren innerhalb des Dialogs, anstatt dahinter zu entkommen. Mehr zur programmatischen Fokussteuerung finden Sie unter Fokussieren: focus / blur.

ARIA (Accessible Rich Internet Applications)

Mehr über ARIA

Wie Sie bisher gelernt haben, ist ARIA (Accessible Rich Internet Applications) eine Menge von Attributen, die HTML-Elementen hinzugefügt werden können, um die Barrierefreiheit für Benutzer von assistiven Technologien wie Screenreader zu verbessern. ARIA-Attribute helfen dabei, Rollen, Eigenschaften und Zustände von Elementen zu definieren und machen Webanwendungen zugänglicher.

Die wichtigste Regel bei ARIA lautet: Wenn ein natives HTML-Element mit dem benötigten Verhalten bereits existiert, verwenden Sie es, anstatt es mit ARIA nachzubauen. Ein <button> ist immer besser als <div role="button">, weil der native Button Ihnen Tastaturaktivierung, Fokus und Screenreader-Semantik ohne jegliches JavaScript bietet. ARIA fügt kein Verhalten hinzu — es ändert lediglich, wie ein Screenreader ein Element beschreibt. Greifen Sie auf ARIA zurück, wenn kein natives Element passt (benutzerdefinierte Tabs, Schieberegler, Baumansichten, Live-Bereiche).

Verwendung von ARIA-Attributen zur Verbesserung der Barrierefreiheit

ARIA-Rollen

ARIA-Rollen definieren den Typ eines Elements und helfen assistiven Technologien, seinen Zweck zu verstehen.

<div role="button" aria-pressed="false">Toggle</div>

Dieses nicht-interaktive Element verwendet den aria-pressed-Zustand, um seinen Umschaltstatus anzugeben.

ARIA-Eigenschaften und -Zustände

ARIA-Eigenschaften und -Zustände liefern zusätzliche Informationen über Elemente.

<!DOCTYPE html>
<html>
<head>
    <title>ARIA Example</title>
</head>
<body>
    <div role="alert" id="live-region">
        <!-- Dynamic content goes here -->
    </div>

    <script>
        document.getElementById('live-region').textContent = "This is an important message.";
    </script>
</body>
</html>

Probier es selbst »

Dieses Beispiel verwendet ARIA-Eigenschaften, um einen Live-Bereich zu erstellen, der wichtige Nachrichten dynamisch ankündigt. Ein Live-Bereich ist ein Element, dessen Änderungen der Screenreader automatisch vorliest, ohne dass der Benutzer den Fokus dorthin verschieben muss — ideal für Statusaktualisierungen, Formularfehler oder Chat-Nachrichten.

Sie steuern, wie dringend die Änderung angekündigt wird:

role="alert" (oder aria-live="assertive") unterbricht den Benutzer sofort — reservieren Sie dies für Fehler und zeitkritische Nachrichten.
aria-live="polite" wartet, bis der Benutzer inaktiv ist, bevor eine Ankündigung gemacht wird — verwenden Sie es für nicht dringende Statusmeldungen wie "Artikel zum Warenkorb hinzugefügt".

<div aria-live="polite" id="status"></div>

<script>
    // Updating the text content triggers the announcement
    document.getElementById('status').textContent = 'Settings saved.';
</script>

Das Live-Bereich-Element muss bereits im DOM vorhanden sein, bevor Sie es aktualisieren; wenn Sie das Element und seinen Text gleichzeitig einfügen, werden viele Screenreader die Änderung nicht bemerken.

Best Practices

Semantisches HTML verwenden: Bevorzugen Sie immer semantische HTML-Elemente, um Inhalten eine klare Bedeutung und Struktur zu geben.
Tastaturzugänglichkeit implementieren: Stellen Sie sicher, dass alle interaktiven Elemente über die Tastatur zugänglich und bedienbar sind.
Fokus effektiv verwalten: Steuern Sie den Fokus programmatisch, um Benutzer durch dynamische Inhaltsänderungen zu führen.
ARIA sinnvoll einsetzen: Wenden Sie ARIA-Rollen, -Eigenschaften und -Zustände an, um die Semantik nativer HTML-Elemente zu ergänzen, nicht zu ersetzen.
Mit assistiven Technologien testen: Testen Sie Ihre Webanwendungen regelmäßig mit Screenreadern und anderen assistiven Technologien, um die Barrierefreiheit sicherzustellen.
Automatisierte Testwerkzeuge verwenden: Führen Sie Prüfungen mit Werkzeugen wie axe oder Lighthouse durch, um häufige Barrierefreiheitsprobleme frühzeitig zu erkennen.

Info

Stellen Sie immer sicher, dass Ihre Modals und andere dynamische Elemente zugänglich sind, indem Sie den Fokus effektiv verwalten. Verwenden Sie JavaScript, um den Fokus innerhalb von Modals zu halten, und zirkulieren Sie mit der Tab-Taste durch fokussierbare Elemente, um zu verhindern, dass Tastaturbenutzer unbeabsichtigt außerhalb des Dialogs navigieren. Dies verbessert die Barrierefreiheit und bietet eine bessere Nutzererfahrung.

Fazit

Barrierefreiheit ist ein grundlegender Aspekt der Webentwicklung, der sicherstellt, dass Ihre Inhalte von allen Menschen genutzt werden können, unabhängig von ihren Fähigkeiten. Durch die Erstellung barrierefreier Inhalte, die Anwendung von Techniken zur barrierefreien DOM-Manipulation und den Einsatz von ARIA-Attributen können Sie die Inklusivität und Nutzbarkeit Ihrer Webanwendungen erheblich verbessern. Die Umsetzung dieser Praktiken hilft nicht nur dabei, rechtliche Standards zu erfüllen, sondern verbessert auch die allgemeine Nutzererfahrung.

Übungen

Übung

Welche der folgenden Punkte sind wichtige Überlegungen zur Gewährleistung von Barrierefreiheit in der Webentwicklung?

Semantisches HTML verwenden, um Struktur und Bedeutung bereitzustellen.Sicherstellen, dass alle Bilder alternativen Text haben.Ausschließlich auf Farbe zurückgreifen, um Informationen zu vermitteln.ARIA-Rollen und -Attribute vermeiden.Tastaturnavigierbarkeit für alle interaktiven Elemente bereitstellen.Ein festes Layout verwenden, das sich nicht an verschiedene Bildschirmgrößen anpasst.

Übung

Wenn ein JavaScript-Modaldialog geöffnet wird, was sollten Sie für Tastatur- und Screenreader-Benutzer tun?

Den Fokus in den Dialog verschieben, wenn er geöffnet wird.Den Fokus so halten, dass Tab nicht hinter den Dialog navigieren kann.Den Fokus auf das Element zurücksetzen, das den Dialog geöffnet hat, wenn er geschlossen wird.Nichts tun, der Browser verwaltet den Fokus automatisch für benutzerdefinierte Dialoge.

Übung

Was ist die erste Regel von ARIA?

Ein natives HTML-Element bevorzugen, anstatt sein Verhalten mit ARIA nachzubauen.ARIA-Rollen zu jedem Element auf der Seite hinzufügen.ARIA-Attribute fügen automatisch Tastaturverhalten hinzu.

Barrierefreie Inhalte erstellen

Bedeutung von Barrierefreiheit in der Webentwicklung

Vorteile der Barrierefreiheit

Techniken für barrierefreie DOM-Manipulation

Tastaturnavigation

Barrierefreie interaktive Komponenten

Semantisches HTML

Textalternativen

Fokusverwaltung bei dynamischen Inhalten

ARIA (Accessible Rich Internet Applications)

Mehr über ARIA

Verwendung von ARIA-Attributen zur Verbesserung der Barrierefreiheit

ARIA-Rollen

ARIA-Eigenschaften und -Zustände

Best Practices

Verwandte Themen

Fazit

Übungen