W3Docs

Darstellung

Deutsch

Barrierefreiheitsaspekte in der Webentwicklung ​

Die Sicherstellung der Web-Barrierefreiheit ist entscheidend für die Schaffung inklusiver digitaler Erlebnisse. Barrierefreiheit kommt nicht nur Nutzern mit Behinderungen zugute, sondern verbessert auch das gesamte Nutzererlebnis und erweitert Ihre Reichweite. Dieser Leitfaden behandelt die Bedeutung von Barrierefreiheit, Techniken, um die Manipulation des DOM barrierefrei zu gestalten, sowie die Rolle von ARIA (Accessible Rich Internet Applications) bei der Verbesserung der Barrierefreiheit.

Barrierefreie Inhalte erstellen ​

Bedeutung der Barrierefreiheit in der Webentwicklung ​

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

Vorteile der Barrierefreiheit ​

  1. Inklusivität: Ermöglicht Nutzern mit verschiedenen Behinderungen den Zugriff auf Informationen und Dienste.
  2. SEO-Verbesserung: Suchmaschinen belohnen barrierefreie Websites oft mit besseren Rankings.
  3. Rechtliche Konformität: Hilft, potenzielle rechtliche Probleme im Zusammenhang mit Barrierefreiheitsstandards zu vermeiden.
  4. Verbesserte Benutzerfreundlichkeit: Verbessert das gesamte Nutzererlebnis für alle Besucher, einschließlich derjenigen ohne Behinderungen.

Techniken, um DOM-Manipulation barrierefrei zu gestalten ​

Tastaturnavigation ​

Stellen Sie sicher, dass alle interaktiven Elemente per Tastatur zugänglich sind. Verlassen Sie sich bei der Tab-Navigation auf die natürliche DOM-Reihenfolge, um einen logischen Ablauf beizubehalten. Vermeiden Sie explizite tabindex-Werte, es sei denn, sie sind für komplexe Layouts notwendig, da positive Werte die natürliche Tab-Reihenfolge verändern und Tastaturnutzer verwirren können. Stellen Sie sicher, dass sichtbare Fokusindikatoren so gestaltet sind, dass Tastaturnutzer klar erkennen können, welches Element den Fokus hat.

html
<!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>
Try it Yourself »

Dieses Beispiel verlässt sich auf die natürliche DOM-Reihenfolge der Schaltflächen, wodurch die Navigation für Tastaturnutzer einfacher wird.

Barrierefreie interaktive Komponenten ​

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

html
<!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>
Try it Yourself »
  • Akkordeon-Struktur: Das Akkordeon besteht aus Überschriften, die beim Anklicken den zugehörigen Inhalt ein- oder ausklappen.
  • Semantisches HTML & ARIA:
    • Native <button>-Elemente werden für die Überschriften verwendet, um integrierte Unterstützung für Tastatur und Screenreader sicherzustellen.
    • aria-controls verknüpft die Überschriften mit ihrem Inhalt.
    • aria-expanded zeigt den Zustand des Akkordeon-Bereichs an.
    • role="region" auf den Inhaltsbereichen kennzeichnet sie als bedeutende Bereiche.
  • Tastaturzugänglichkeit:
    • Ereignis-Listener verarbeiten click- und keydown-Ereignisse, um das Umschalten des Akkordeons per Tastatur (Enter oder Leertaste) zu ermöglichen.

Vorteile: ​

  • Verbesserte Benutzerfreundlichkeit: Stellt sicher, dass das Akkordeon per Maus und Tastatur nutzbar ist.
  • Verbesserte Barrierefreiheit: Verwendet ARIA-Attribute, um den Zustand und die Struktur für unterstützende Technologien zu vermitteln und es für Screenreader-Nutzer zugänglich zu machen.
  • Fokusverwaltung: Der Fokus bleibt auf der Auslöser-Schaltfläche, entsprechend den üblichen Akkordeon-Mustern und ohne unerwartete Navigationssprünge für Tastaturnutzer.

Semantisches HTML ​

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

html
<!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>
Try it Yourself »

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

ARIA (Accessible Rich Internet Applications) ​

Mehr über ARIA ​

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

Verwendung von ARIA-Attributen zur Verbesserung der Barrierefreiheit ​

ARIA-Rollen ​

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

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

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

ARIA-Eigenschaften und -Zustände ​

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

html
<!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>
Try it Yourself »

Dieses Beispiel verwendet ARIA-Eigenschaften, um einen Live-Bereich zu erstellen, der wichtige Nachrichten dynamisch ankündigt.

Best Practices ​

  1. Semantisches HTML verwenden: Bevorzugen Sie immer semantische HTML-Elemente, um Inhalt eine klare Bedeutung und Struktur zu geben.
  2. Tastaturzugänglichkeit implementieren: Stellen Sie sicher, dass alle interaktiven Elemente per Tastatur erreichbar und bedienbar sind.
  3. Fokus effektiv verwalten: Steuern Sie den Fokus programmgesteuert, um Nutzer durch dynamische Inhaltsänderungen zu führen.
  4. ARIA sinnvoll einsetzen: Verwenden Sie ARIA-Rollen, -Eigenschaften und -Zustände, um die Semantik nativer HTML-Elemente zu ergänzen, nicht zu ersetzen.
  5. Mit unterstützenden Technologien testen: Testen Sie Ihre Webanwendungen regelmäßig mit Screenreadern und anderen unterstützenden Technologien, um die Barrierefreiheit sicherzustellen.
  6. Automatisierte Testwerkzeuge verwenden: Führen Sie Prüfungen mit Tools 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 barrierefrei sind, indem Sie den Fokus effektiv verwalten. Verwenden Sie JavaScript, um den Fokus innerhalb von Modals zu halten und mit der Tab-Taste durch fokussierbare Elemente zu wechseln, damit Tastaturnutzer nicht unbeabsichtigt außerhalb des Dialogs navigieren. Dies verbessert die Barrierefreiheit und sorgt für ein besseres Nutzererlebnis.

Fazit ​

Barrierefreiheit ist ein grundlegender Aspekt der Webentwicklung, der sicherstellt, dass Ihre Inhalte für alle Menschen nutzbar sind, 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 Benutzerfreundlichkeit Ihrer Webanwendungen erheblich verbessern. Die Umsetzung dieser Praktiken hilft nicht nur dabei, gesetzliche Standards zu erfüllen, sondern verbessert auch das gesamte Nutzererlebnis.

Practice ​

Welche der folgenden Punkte sind wichtige Überlegungen, um Barrierefreiheit in der Webentwicklung sicherzustellen?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.