Zusammenfassung / Ergänzung

Neben den grundlegenden Tests und Maßnahmen zur Barrierefreiheit gibt es noch einige zusätzliche Punkte und Details, die oft übersehen werden, aber für die Zugänglichkeit besonders wichtig sind. Hier sind einige Aspekte, die du noch genauer beachten oder zusätzlich umsetzen kannst:

1. ARIA-Rollen und -Attribute gezielt einsetzen

Es ist hilfreich, ARIA-Attribute wie role, aria-labelledby, aria-describedby, aria-live, und andere sparsam und gezielt einzusetzen. Die Überverwendung dieser Attribute kann dazu führen, dass Screenreader-Nutzer überflutet werden. Hier ein paar Details:

  • role-Attribut: Nutze dieses Attribut nur, wenn es notwendig ist. Viele HTML5-Elemente wie <nav>, <header>, und <footer> bringen bereits semantische Rollen mit, die von Screenreadern erkannt werden. Durch den Einsatz von role für standardmäßige HTML-Tags kann es sein, dass du mehr Verwirrung als Klarheit erzeugst.

    Beispiel: Ein <nav>-Element benötigt kein role="navigation", da die semantische Bedeutung bereits vorhanden ist.

  • Zusätzliche Attribute für komplexe Widgets: Bei komplexen Widgets wie Akkordeons oder Tabs können aria-expanded, aria-controls, und aria-selected helfen, den Status und die Interaktivität eines Elements besser verständlich zu machen.

    Beispiel für Akkordeon-Panel:

    <button aria-expanded="false" aria-controls="panel1">Mehr erfahren</button>
<div id="panel1" role="region" aria-hidden="true">
  <p>Zusätzlicher Inhalt</p>
</div>

2. Sprache und Texteinstellungen

Stelle sicher, dass die Sprache deiner Seite korrekt angegeben ist. Screenreader orientieren sich an der Spracheinstellung, um den Text in der passenden Sprache und mit der richtigen Aussprache vorzulesen.

  • Dokumentsprache festlegen: Im <html>-Tag sollte die Hauptsprache der Seite definiert sein.

    <html lang="de">

  • Sprachwechsel für spezifische Inhalte: Falls du fremdsprachige Absätze oder Wörter in anderen Sprachen hast, definiere deren Sprache ebenfalls.

    Beispiel:

    <p>Die englische Begrüßung lautet <span lang="en">Hello</span>.</p>

3. Konsistente und intuitive Navigation

Die Struktur und das Layout einer Webseite sollten für alle Nutzer verständlich und konsistent sein. Das bedeutet:

  • Konsistentes Layout: Verwende auf allen Seiten ähnliche Layouts und Positionen für Navigationselemente, damit sich Nutzer gut orientieren können.

  • Skip-Links und aria-current: Nutze Skip-Links (zum Hauptinhalt) und setze aria-current="page" im aktiven Navigationspunkt, um Screenreader-Nutzern die aktuelle Position zu verdeutlichen.

    Beispiel Skip-Link und aria-current:

    <a href="#maincontent" class="skip-link">Direkt zum Hauptinhalt</a>
<nav>
  <ul>
    <li><a href="/home" aria-current="page">Startseite</a></li>
    <li><a href="/about">Über uns</a></li>
  </ul>
</nav>

4. Medieninhalte zugänglich machen

Multimedia-Inhalte wie Videos und Audiodateien müssen mit Alternativen versehen werden, um sie zugänglich zu machen.

  • Untertitel für Videos: Füge Untertitel für Videos hinzu, um gehörlose oder schwerhörige Nutzer zu unterstützen.

  • Audiodeskription: Wenn ein Video wichtige visuelle Informationen enthält, die ohne Bild schwer zu verstehen sind, füge eine Audiodeskription hinzu.

  • Transkripte für Audioinhalte: Biete schriftliche Transkripte für Audiodateien an, sodass Nutzer, die Audio nicht hören können, die Inhalte lesen können.

    Beispiel Video-Element mit Untertitel:

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

5. Formulare richtig strukturieren

Formulare sind ein wichtiger Bestandteil vieler Webseiten und können für Menschen mit Behinderungen besonders herausfordernd sein.

  • Beschriftungen (label) für alle Eingabefelder: Jedes Eingabefeld sollte ein zugeordnetes <label> haben. Nutze aria-labelledby oder aria-describedby nur dann, wenn ein visuelles Label nicht möglich ist.

    Beispiel für ein korrekt beschriftetes Eingabefeld:

    <label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">

  • Eindeutige Fehlermeldungen: Gib klare Fehlermeldungen an, die beschreiben, was genau korrigiert werden muss. Falls das Formular JavaScript-Validierung nutzt, stelle sicher, dass die Fehlermeldung für Screenreader lesbar ist (z. B. mit aria-live).

    Beispiel für eine dynamische Fehlermeldung:

    <span id="emailError" role="alert">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>

6. Farben und Kontraste

Die Farbgestaltung sollte so gewählt sein, dass alle Texte gut lesbar und unterscheidbar sind. Neben der Verwendung von Kontrast-Checkern gibt es weitere Details zu beachten:

  • Farben nicht allein als Informationsträger nutzen: Verlasse dich nicht nur auf Farben, um Informationen zu vermitteln (z. B. bei Statusanzeigen). Füge immer Text oder Symbole hinzu.

    Beispiel für eine Statusanzeige mit Text und Farbe:

    <span class="status pending">Wartend</span> <!-- Wartend-Status mit Text -->

7. Dynamische Inhalte und Modale Fenster zugänglich machen

Bei der Nutzung von dynamischen Inhalten wie modalen Fenstern, Akkordeons oder Tabs gibt es spezielle Anforderungen für die Zugänglichkeit:

  • Fokus-Management: Bei modalen Fenstern und Dialogen sollte der Fokus des Nutzers in das Fenster verlagert werden, sobald es geöffnet wird, und zurück zum vorherigen Element, wenn es geschlossen wird.

    Beispiel für ein modales Fenster mit Fokus-Management:

    <button onclick="openModal()">Mehr erfahren</button>
<div id="modal" role="dialog" aria-labelledby="modalTitle" tabindex="-1" hidden>
  <h2 id="modalTitle">Modales Fenster</h2>
  <button onclick="closeModal()">Schließen</button>
</div>

<script>
  function openModal() {
    const modal = document.getElementById('modal');
    modal.hidden = false;
    modal.focus();
  }

  function closeModal() {
    const modal = document.getElementById('modal');
    modal.hidden = true;
    document.querySelector('button[onclick="openModal()"]').focus();
  }
</script>

  • Tabellen dynamisch aktualisieren: Falls Tabellen oder Listen dynamische Inhalte erhalten, nutze aria-live-Regionen oder fokussiere auf das neue Element, um Nutzern die Aktualisierung zu signalisieren.

8. Zusätzliche Barrierefreiheitstests mit verschiedenen Hilfstechnologien

Ein letzter, oft vernachlässigter Punkt ist die Nutzung unterschiedlicher Hilfstechnologien zum Testen. Screenreader verhalten sich oft unterschiedlich, und was in einem funktioniert, kann in einem anderen nicht optimal sein. Du kannst also deine Seite mit mehreren Screenreadern (z. B. NVDA, JAWS, VoiceOver) und auch mit verschiedenen Browsern testen, um sicherzustellen, dass die Zugänglichkeit auf allen Geräten konsistent ist.

Zusammenfassung

Eine zugängliche Webseite zu gestalten erfordert nicht nur die Behebung offensichtlicher Barrieren, sondern auch die Berücksichtigung vieler Details. Einige der wichtigsten Punkte sind:

  1. Gezielte Nutzung von ARIA-Attributen: Setze ARIA-Attribute sparsam und durchdacht ein.

  2. Spracheinstellungen setzen: Definiere die Sprache der Seite und wechsle sie, wenn nötig, für fremdsprachige Inhalte.

  3. Konsistente Navigation: Eine konsistente und logische Navigation erleichtert die Bedienbarkeit.

  4. Medieninhalte anpassen: Sorge dafür, dass Multimedia-Inhalte wie Videos und Audios zugänglich sind.

  5. Formulare strukturieren: Jedes Eingabefeld braucht klare Labels und gut beschriebene Fehlermeldungen.

  6. Farben und Kontraste: Achte auf hohe Kontraste und nutze Farben nicht allein als Informationsträger.

  7. Dynamische Inhalte managen: Verwende Fokus-Management und Live-Regionen für modale Fenster und dynamische Inhalte.

Mit diesen zusätzlichen Details deckst du eine Vielzahl an Barrierefreiheitsaspekten ab und stellst sicher, dass die Webseite für möglichst viele Nutzergruppen zugänglich wird.

VorherigeWie kann ich meine Seite auf Barrierefreiheit testen?

Zuletzt aktualisiert