Cheatsheet: Barrierefreies Webdesign

Inhaltsverzeichnis: Barrierefreies Webdesign Cheatsheet

1. Struktur und Semantik

   • Grundlegende HTML-Struktur
   • Überschriftenhierarchie
   • Landmarks
   • Von Screenreadern ignorierte oder speziell behandelte Tags

2. Inhalte

   • Bilder
   • Links
   • Tabellen

3. Formulare

   • Grundstruktur
   • Fehlerbehandlung

4. Tastaturzugänglichkeit

   • Fokus-Management
   • Skiplinks

5. ARIA (Accessible Rich Internet Applications)

   • Dynamischer Inhalt
   • Erweiterte Widgets

6. Visuelles Design

   • Farben und Kontrast
   • Responsive Design
   • Schriftgrößen
   • Zeilenabstand und Textausrichtung

7. Multimedia

   • Video-Untertitel
   • Audiobeschreibungen

8. Testing

   • Automatisierte Tests
   • Manuelle Tests
   • Nutzertests

9. Fortgeschrittene ARIA-Techniken

   • Komplexe Interaktive Komponenten
   • Dynamische Inhalte und Single-Page Applications (SPAs)

10. Internationalisierung und Lokalisierung

    • Sprachunterstützung

11. Performance und Barrierefreiheit

    • Ladezeiten und Nutzererfahrung

12. Rechtliche Aspekte und Richtlinien

    • Compliance und Standards
    • Dokumentation und Erklärungen

13. Barrierefreiheit mit CSS-Frameworks und Komponentenbibliotheken

    • Tailwind CSS
    • Shoelace
    • Bootstrap
    • UIkit 3
    • Allgemeine Tipps für die Arbeit mit CSS-Frameworks

14. Open-Source-Lösungen für Barrierefreiheitstests und -verbesserungen

    • Übersicht der Tools
    • Detaillierte Beschreibungen und Tipps
    • Allgemeine Tipps zur Nutzung von Open-Source-Barrierefreiheitstools

15. JavaScript und Screenreader

    • Unterstützung von JavaScript durch Screenreader
    • Best Practices für barrierefreies JavaScript

1. Struktur und Semantik

1.1 Grundlegende HTML-Struktur

• Verwenden Sie semantische HTML5-Elemente

<header>
  <nav>
    <!-- Navigationsinhalt -->
  </nav>
</header>
<main>
  <article>
    <h1>Hauptüberschrift</h1>
    <!-- Hauptinhalt -->
  </article>
</main>
<footer>
  <!-- Fußzeileninhalt -->
</footer>

1.2 Überschriftenhierarchie

• Verwenden Sie <h1> bis <h6> in korrekter Reihenfolge

<h1>Haupttitel</h1>
<h2>Untertitel</h2>
<h3>Abschnittsüberschrift</h3>

1.3 Landmarks

• Nutzen Sie ARIA-Landmarks für wichtige Seitenabschnitte

<header role="banner">
<nav role="navigation">
<main role="main">
<footer role="contentinfo">

Tipp: Bei semantischen HTML5-Elementen ist die explizite Angabe der Landmark-Rolle oft redundant. Verwenden Sie sie nur, wenn nötig oder zur Verdeutlichung.

1.4 Von Screenreadern ignorierte oder speziell behandelte Tags

Screenreader behandeln verschiedene HTML-Tags unterschiedlich.

Üblicherweise ignorierte Tags:

• <style>
• <script>
• <noscript>
• <canvas> (ohne entsprechende Beschreibung)
• <svg> (ohne entsprechende Beschreibung oder Titel)

Speziell behandelte Tags:

• <iframe> (der Inhalt wird ignoriert, aber der Titel wird gelesen)
• <br> (wird als kurze Pause interpretiert)
• <hr> (kann je nach Screenreader als "horizontale Linie" oder Trennung angekündigt werden)
• <i>, <b>, <u> (werden normalerweise ignoriert, es sei denn, sie sind mit ARIA-Rollen versehen)

Tags, die je nach Kontext und Inhalt behandelt werden:

• <div> und <span> (normalerweise ignoriert, es sei denn, sie enthalten Text oder haben ARIA-Attribute)
• <table> (wird gelesen, aber die Darstellung hängt von der Komplexität und Struktur ab)

Wichtige Hinweise:

1. <img> ohne Alt-Text wird unterschiedlich behandelt (manche Screenreader lesen den Dateinamen, andere ignorieren das Bild komplett)
2. Dekorative Elemente wie ::before und ::after in CSS werden normalerweise ignoriert
3. Versteckte Elemente (display: none oder visibility: hidden) werden in der Regel übersprungen

Tipp: Verwenden Sie semantisches HTML und ARIA-Attribute, um sicherzustellen, dass Ihre Inhalte korrekt interpretiert werden. Testen Sie mit verschiedenen Screenreadern, da es Unterschiede in der Behandlung geben kann.

2. Inhalte

2.1 Bilder

• Fügen Sie alternative Texte hinzu

<img src="bild.jpg" alt="Beschreibung des Bildinhalts">

• Für dekorative Bilder:

<img src="hintergrund.jpg" alt="">

Tipp: Verwenden Sie leere alt-Attribute nur für rein dekorative Bilder, die keine relevanten Informationen vermitteln.

2.2 Links

• Verwenden Sie beschreibende Linktexte

<a href="produkte.html">Unsere Produktpalette ansehen</a>

• Für externe Links:

<a href="https://example.com" rel="external noopener">Partnerwebsite besuchen <span class="sr-only">(öffnet in neuem Tab)</span></a>

Tipp: Vermeiden Sie generische Linktexte wie "Klicken Sie hier" oder "Mehr". Der Linktext sollte das Ziel oder den Zweck des Links klar beschreiben.

2.3 Tabellen

• Strukturieren Sie Tabellen korrekt

<table>
  <caption>Produktübersicht</caption>
  <thead>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Produkt A</th>
      <td>10 €</td>
    </tr>
  </tbody>
</table>

Tipp: Verwenden Sie Tabellen nur für tabellarische Daten, nicht für Layout-Zwecke.

3. Formulare

3.1 Grundstruktur

• Verwenden Sie Labels und gruppieren Sie Formularelemente

<form>
  <fieldset>
    <legend>Persönliche Informationen</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
</form>

3.2 Fehlerbehandlung

• Verknüpfen Sie Fehlermeldungen mit den entsprechenden Feldern

<label for="password">Passwort:</label>
<input type="password" id="password" name="password" aria-describedby="password-error" required>
<p id="password-error" role="alert">Das Passwort muss mindestens 8 Zeichen lang sein.</p>

Tipp: Geben Sie klare Anweisungen zur Fehlerbehebung und positionieren Sie Fehlermeldungen nahe den betroffenen Feldern.

4. Tastaturzugänglichkeit

4.1 Fokus-Management

• Stellen Sie eine logische Tab-Reihenfolge sicher
• Implementieren Sie einen sichtbaren Fokus-Indikator

:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

Tipp: Entfernen Sie niemals den Fokus-Indikator vollständig. Wenn Sie ihn anpassen, stellen Sie sicher, dass er gut sichtbar bleibt.

4.2 Skiplinks

• Bieten Sie Skiplinks für Screenreader-Nutzer an

<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

Tipp: Positionieren Sie Skiplinks als erste fokussierbare Elemente auf der Seite.

5. ARIA (Accessible Rich Internet Applications)

5.1 Dynamischer Inhalt

• Verwenden Sie aria-live für dynamische Inhalte

<div aria-live="polite" aria-atomic="true">
  <!-- Dynamisch aktualisierter Inhalt -->
</div>

Tipp: Verwenden Sie aria-live="assertive" sparsam, da es die aktuelle Benutzeraktion unterbricht.

5.2 Erweiterte Widgets

• Nutzen Sie ARIA-Attribute für komplexe Komponenten

<button aria-expanded="false" aria-controls="dropdown-menu">
  Menü öffnen
</button>
<ul id="dropdown-menu" role="menu" hidden>
  <li role="menuitem"><a href="#">Option 1</a></li>
  <li role="menuitem"><a href="#">Option 2</a></li>
</ul>

Tipp: Testen Sie komplexe Widgets gründlich mit verschiedenen Screenreadern, da die Unterstützung variieren kann.

6. Visuelles Design

6.1 Farben und Kontrast

• Stellen Sie ausreichenden Farbkontrast sicher

body {
  color: #333; /* Dunkler Text */
  background-color: #fff; /* Heller Hintergrund */
}

Tipp: Verwenden Sie Tools wie den WebAIM Contrast Checker, um Ihre Farbkombinationen zu testen.

6.2 Responsive Design

• Implementieren Sie ein flexibles Layout

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 1 1 300px;
}

Tipp: Testen Sie Ihr Design auf verschiedenen Geräten und Bildschirmgrößen.

6.3 Schriftgrößen

• Verwenden Sie relative Einheiten für Schriftgrößen

body {
  font-size: 16px; /* Basis-Schriftgröße */
}
h1 {
  font-size: 2rem; /* Relativ zur Basis-Schriftgröße */
}

Tipp: Eine Basis-Schriftgröße von 16px ist ein guter Ausgangspunkt. Stellen Sie sicher, dass Text auch bei 200% Zoom noch lesbar ist.

6.4 Zeilenabstand und Textausrichtung

body {
  line-height: 1.5;
  text-align: left;
}
p {
  max-width: 60ch; /* ch-Einheit entspricht der Breite der "0" im aktuellen Font */
}

Tipp: Vermeiden Sie vollständig gerechtfertigten Text (text-align: justify), da ungleichmäßige Wortabstände die Lesbarkeit beeinträchtigen können.

7. Multimedia

7.1 Video-Untertitel

• Fügen Sie Untertitel zu Videos hinzu

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="de" label="Deutsch">
</video>

Tipp: Bieten Sie, wenn möglich, Untertitel in mehreren Sprachen an. Stellen Sie sicher, dass die Untertitel synchron zum Gesprochenen sind.

7.2 Audiobeschreibungen

• Bieten Sie Transkripte für Audioinhalte an

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>
<a href="transcript.html">Transkript lesen</a>

Tipp: Stellen Sie Transkripte in einem zugänglichen Textformat bereit, idealerweise auf derselben Seite wie der Audioinhalt.

8. Testing

8.1 Automatisierte Tests

• Nutzen Sie Tools wie axe oder WAVE für erste Überprüfungen

Tipp: Automatisierte Tests sind ein guter Ausgangspunkt, ersetzen aber keine manuellen Tests und Nutzertests.

8.2 Manuelle Tests

• Führen Sie Tastatur-Navigation-Tests durch
• Testen Sie mit Screenreadern (z.B. NVDA, JAWS)

Tipp: Erstellen Sie eine Checkliste für manuelle Tests und führen Sie diese regelmäßig durch, besonders nach größeren Änderungen.

8.3 Nutzertests

• Beziehen Sie Menschen mit Behinderungen in Ihre Testprozesse ein

Tipp: Planen Sie Nutzertests frühzeitig ein und führen Sie sie regelmäßig durch. Das Feedback von echten Nutzern ist unersetzlich für die Verbesserung der Barrierefreiheit.

9. Fortgeschrittene ARIA-Techniken

9.1 Komplexe Interaktive Komponenten

<button aria-label="Menü schließen" class="close-button">×</button>

<h2 id="section-title">Produktübersicht</h2>
<div aria-labelledby="section-title">
  <!-- Inhalt der Produktübersicht -->
</div>

Tipp: Verwenden Sie ARIA sparsam und nur dann, wenn native HTML-Elemente nicht ausreichen. Zu viel ARIA kann die Zugänglichkeit verschlechtern.

9.2 Dynamische Inhalte und Single-Page Applications (SPAs)

// Beispiel für Fokusmanagement in einer SPA
function navigateToPage(pageId) {
  // Aktualisiere den Inhalt
  updatePageContent(pageId);
  
  // Setze den Fokus auf den Hauptinhalt
  document.getElementById('main-content').focus();
}

Tipp: Testen Sie SPAs gründlich mit Screenreadern, um sicherzustellen, dass Seitenwechsel und dynamische Updates korrekt angekündigt werden.

10. Internationalisierung und Lokalisierung

10.1 Sprachunterstützung

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <!-- ... -->
</head>
<body>
    <p>Deutscher Text</p>
    <p lang="en">English text</p>
    <p lang="ar" dir="rtl">نص عربي</p>
</body>
</html>

Tipp: Berücksichtigen Sie bei der Gestaltung des Layouts, dass sich Textlängen in verschiedenen Sprachen stark unterscheiden können.

11. Performance und Barrierefreiheit

11.1 Ladezeiten und Nutzererfahrung

<img src="placeholder.jpg" data-src="large-image.jpg" alt="Beschreibung" loading="lazy">

Tipp: Schnelle Ladezeiten sind besonders wichtig für Nutzer mit langsamen Internetverbindungen oder älteren Geräten. Optimieren Sie die Performance, ohne die Zugänglichkeit zu beeinträchtigen.

12. Rechtliche Aspekte und Richtlinien

12.1 Compliance und Standards

Tipp: Halten Sie sich über Aktualisierungen der Richtlinien auf dem Laufenden. WCAG 2.2 ist in Vorbereitung und wird neue Erfolgskriterien einführen.

12.2 Dokumentation und Erklärungen

<footer>
  <a href="/barrierefreiheitserklaerung">Barrierefreiheitserklärung</a>
  <a href="/feedback">Feedback zur Barrierefreiheit geben</a>
</footer>

Tipp: Eine offene und transparente Kommunikation über den Stand der Barrierefreiheit kann das Vertrauen der Nutzer stärken und hilft bei der kontinuierlichen Verbesserung.

13. Barrierefreiheit mit CSS-Frameworks und Komponentenbibliotheken

13.1 Tailwind CSS

<button class="bg-blue-500 text-white py-2 px-4 rounded focus:ring-2 focus:ring-blue-300 focus:outline-none">
  <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 20 20">
    <!-- Icon-Pfad hier -->
  </svg>
  <span class="sr-only">Menü öffnen</span>
</button>

Tipp: Tailwind bietet viele nützliche Utility-Klassen für Barrierefreiheit. Nutzen Sie diese, aber achten Sie darauf, die semantische Struktur Ihres HTML nicht zu vernachlässigen.

13.2 Shoelace

<sl-form class="form-login">
  <sl-input label="Benutzername" required></sl-input>
  <sl-input label="Passwort" type="password" required toggle-password></sl-input>
  <sl-button type="submit">Anmelden</sl-button>
</sl-form>

Tipp: Shoelace-Komponenten sind standardmäßig barrierefrei gestaltet. Achten Sie trotzdem darauf, Labels und Beschreibungen korrekt zu setzen.

13.3 Bootstrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <!-- Weitere Menüpunkte -->
      </ul>
    </div>
  </div>
</nav>

Tipp: Bootstrap bietet viele eingebaute Barrierefreiheitsfunktionen. Stellen Sie sicher, dass Sie die empfohlenen ARIA-Attribute und Klassen verwenden.

13.4 UIkit 3

<div uk-dropdown="mode: click">
    <button class="uk-button uk-button-default" type="button" aria-expanded="false">Dropdown</button>
    <div class="uk-dropdown">
        <ul class="uk-nav uk-dropdown-nav">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</div>

Tipp: UIkit 3 bietet gute Grundlagen für Barrierefreiheit, aber überprüfen Sie immer die generierten ARIA-Attribute und passen Sie sie bei Bedarf an.

13.5 Allgemeine Tipps für die Arbeit mit CSS-Frameworks

1. Semantisches HTML: Achten Sie darauf, dass die Verwendung von Framework-Klassen nicht die semantische Struktur Ihres HTML beeinträchtigt.

2. Anpassung der Farbschemata: Überprüfen Sie immer die Kontrastwerte, auch wenn Sie vordefinierte Farbschemata verwenden.

3. Responsive Design: Nutzen Sie die responsive Funktionen der Frameworks, um eine gute Benutzererfahrung auf allen Geräten sicherzustellen.

4. Tastaturnavigation: Testen Sie gründlich, ob alle interaktiven Elemente mit der Tastatur bedienbar sind.

5. ARIA-Attribute: Ergänzen Sie bei Bedarf ARIA-Attribute, besonders bei komplexen, interaktiven Komponenten.

6. Screenreader-Tests: Führen Sie regelmäßige Tests mit Screenreadern durch, um sicherzustellen, dass die Framework-Komponenten wie erwartet funktionieren.

7. Dokumentation: Lesen Sie die Barrierefreiheits-Dokumentation des jeweiligen Frameworks sorgfältig.

8. Customizing: Beim Anpassen von Komponenten achten Sie darauf, keine Barrierefreiheitsfunktionen zu beeinträchtigen.

14. Open-Source-Lösungen für Barrierefreiheitstests und -verbesserungen

14.1 Übersicht der Tools

14.2 Detaillierte Beschreibungen und Tipps

Sa11y

Sa11y ist ein in-Browser-Barrierefreiheitstester, der sich leicht in Content-Management-Systeme integrieren lässt.

Tipps zur Verwendung:

• Integrieren Sie Sa11y in Ihr CMS für Echtzeit-Feedback an Content-Ersteller.
• Nutzen Sie die visuellen Indikatoren, um Probleme schnell zu identifizieren.

Beispiel-Integration:

<script src="https://cdn.jsdelivr.net/npm/sa11y@latest/dist/sa11y.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new Sa11y();
  });
</script>

Pa11y

Pa11y ist ein leistungsstarkes Kommandozeilen-Tool für automatisierte Barrierefreiheitstests.

Tipps zur Verwendung:

• Integrieren Sie Pa11y in Ihre CI/CD-Pipeline für automatische Tests bei jedem Build.
• Nutzen Sie benutzerdefinierte Konfigurationen für spezifische Projektanforderungen.

Beispiel-Verwendung:

npm install -g pa11y
pa11y https://example.com

axe-core

axe-core ist eine JavaScript-Bibliothek für Barrierefreiheitstests, die von vielen anderen Tools verwendet wird.

Tipps zur Verwendung:

• Integrieren Sie axe-core in Ihre Unit-Tests für kontinuierliche Barrierefreiheitsprüfungen.
• Nutzen Sie die API, um benutzerdefinierte Prüfungen zu erstellen.

Beispiel-Integration in Tests:

import { axe } from 'axe-core';

test('Prüfe Barrierefreiheit der Hauptseite', async () => {
  const results = await axe(document.body);
  expect(results.violations).toHaveLength(0);
});

WAVE

WAVE (Web Accessibility Evaluation Tool) ist sowohl als Browser-Erweiterung als auch als API verfügbar.

Tipps zur Verwendung:

• Nutzen Sie die Browser-Erweiterung für schnelle, visuelle Prüfungen während der Entwicklung.
• Verwenden Sie die API für automatisierte Tests in größeren Projekten.

Beispiel-API-Nutzung:

const WAVE = require('wave-api');
WAVE.evaluate('https://example.com')
  .then(report => console.log(report))
  .catch(error => console.error(error));

Lighthouse

Lighthouse ist in Chrome DevTools integriert und bietet umfassende Audits für Websites.

Tipps zur Verwendung:

• Führen Sie regelmäßige Lighthouse-Audits durch, um Barrierefreiheit zusammen mit Performance und SEO zu überprüfen.
• Nutzen Sie die CI-Integration für automatisierte Prüfungen.

Beispiel-Verwendung in CI:

- name: Run Lighthouse CI
  uses: treosh/lighthouse-ci-action@v8
  with:
    urls: |
      https://example.com
    budgetPath: ./budget.json
    uploadArtifacts: true

tota11y

tota11y ist ein leichtgewichtiges JavaScript-Plugin, das visuelle Annotationen für Barrierefreiheitsprobleme bietet.

Tipps zur Verwendung:

• Integrieren Sie tota11y in Ihre Entwicklungsumgebung für schnelles visuelles Feedback.
• Nutzen Sie es als Schulungstool für Entwickler und Designer.

Beispiel-Integration:

<script src="https://cdn.jsdelivr.net/npm/tota11y@0.1.6/build/tota11y.min.js"></script>

14.3 Allgemeine Tipps zur Nutzung von Open-Source-Barrierefreiheitstools

1. Kombination von Tools: Verwenden Sie mehrere Tools, da jedes seine Stärken und Schwächen hat.
2. Regelmäßige Tests: Integrieren Sie Barrierefreiheitstests in Ihren regulären Entwicklungsprozess.
3. Automatisierung: Nutzen Sie CI/CD-Integrationen für kontinuierliche Überwachung.
4. Manuelle Überprüfung: Verlassen Sie sich nicht ausschließlich auf automatisierte Tests. Manuelle Prüfungen bleiben wichtig.
5. Schulung: Nutzen Sie diese Tools, um Ihr Team in Barrierefreiheitspraktiken zu schulen.
6. Dokumentation: Halten Sie die Ergebnisse Ihrer Tests fest und dokumentieren Sie Verbesserungen.
7. Community-Engagement: Beteiligen Sie sich an den Open-Source-Communities dieser Tools, um von Erfahrungen anderer zu profitieren und beizutragen.

15. JavaScript und Screenreader

15.1 Unterstützung von JavaScript durch Screenreader

Die Unterstützung von JavaScript durch Screenreader hat sich in den letzten Jahren erheblich verbessert, aber es gibt immer noch einige wichtige Punkte zu beachten:

• Die meisten modernen Screenreader unterstützen JavaScript.
• Die Unterstützung kann je nach Screenreader, Browser und Betriebssystem variieren.
• Einige Nutzer deaktivieren JavaScript aus Sicherheits- oder Performance-Gründen.
• Dynamisch generierte Inhalte können übersehen werden, wenn sie nicht korrekt implementiert sind.

15.2 Best Practices für barrierefreies JavaScript

1. Progressive Enhancement

   • Stellen Sie sicher, dass die Kernfunktionalität ohne JavaScript verfügbar ist.
   • Verwenden Sie JavaScript, um die Benutzererfahrung zu verbessern, nicht um sie zu ermöglichen.

   <button onclick="submitForm()" type="submit">Senden</button>
   

2. ARIA Live Regions

   • Verwenden Sie aria-live für dynamisch aktualisierte Inhalte.
   • Wählen Sie den passenden Wert: polite, assertive oder off.

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

   document.getElementById('status-message').textContent = 'Formular erfolgreich gesendet';
   

3. Fokusmanagement

   • Setzen Sie den Fokus nach dynamischen Änderungen korrekt.
   • Vermeiden Sie unerwartete Fokuswechsel.

   function openModal() {
     const modal = document.getElementById('modal');
     modal.style.display = 'block';
     document.getElementById('modal-close-btn').focus();
   }
   

4. Tastaturunterstützung

   • Stellen Sie sicher, dass alle JavaScript-gesteuerten Interaktionen auch mit der Tastatur möglich sind.
   • Implementieren Sie benutzerdefinierte Tastatursteuerungen für komplexe Widgets.

   element.addEventListener('keydown', function(event) {
     if (event.key === 'Enter' || event.key === ' ') {
       // Aktion ausführen
     }
   });
   

5. Vermeiden Sie automatische Aktualisierungen

   • Geben Sie Nutzern die Kontrolle über Inhaltsaktualisierungen.
   • Wenn automatische Updates notwendig sind, informieren Sie die Nutzer darüber.

   <div aria-live="polite">
     Neue Nachrichten werden alle 5 Minuten geladen. 
     <button onclick="toggleAutoUpdate()">Automatische Updates deaktivieren</button>
   </div>
   

6. Fehlerbehandlung und Feedback

   • Kommunizieren Sie Fehler und Statusänderungen klar und zugänglich.
   • Verwenden Sie ARIA-Attribute wie aria-invalid und aria-describedby.

   <input type="text" id="username" aria-describedby="username-error">
   <div id="username-error" aria-live="polite"></div>
   

   function validateUsername() {
     const input = document.getElementById('username');
     const error = document.getElementById('username-error');
     if (input.value.length < 3) {
       input.setAttribute('aria-invalid', 'true');
       error.textContent = 'Benutzername muss mindestens 3 Zeichen lang sein.';
     } else {
       input.removeAttribute('aria-invalid');
       error.textContent = '';
     }
   }
   

7. Dynamische Inhalte

   • Verwenden Sie aria-busy="true", während Inhalte geladen werden.
   • Aktualisieren Sie den Seitentitel (<title>), wenn sich der Hauptinhalt ändert.

   <div id="content" aria-busy="false">
     <!-- Inhalt hier -->
   </div>
   

   async function loadContent() {
     const content = document.getElementById('content');
     content.setAttribute('aria-busy', 'true');
     // Inhalt laden
     content.setAttribute('aria-busy', 'false');
     document.title = 'Neue Seite - Meine Website';
   }
   

8. Testing

   • Testen Sie mit verschiedenen Screenreadern (JAWS, NVDA, VoiceOver, etc.).
   • Führen Sie Tests mit deaktiviertem JavaScript durch.
   • Nutzen Sie automatisierte Testing-Tools wie axe-core.

   import { axe } from 'axe-core';
   
   axe.run().then(results => {
     console.log(results.violations);
   });
   

Tipp: Orientieren Sie sich an den WAI-ARIA Authoring Practices für die Implementierung komplexer Widgets und Interaktionen. Diese bieten detaillierte Anleitungen für die Erstellung barrierefreier interaktiver Elemente.