Screenreader-Kompatibilität: Struktur, Namen, Zustände

Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher. Ob Dein Angebot erfasst ist, erklärt die BFSG-Check-Lösung. Die folgenden Prüfungen helfen Dir, technische Barrieren auf Deiner Website zu finden.

Screenreader geben Inhalte als Sprache oder über eine Braillezeile aus. Fehlende Namen, unklare Überschriften und verlorener Fokus können die Nutzung verhindern.

Barrierefreiheit ist kein direkter Google-Rankingfaktor (Google Search Central). Klare Überschriften helfen Menschen bei der Orientierung und Suchmaschinen beim Einordnen der Inhalte.

1. Klare HTML-Struktur & semantisches Markup für barrierefreies Webdesign und Accessibility

Strukturierte Inhalte verbessern nicht nur das Nutzererlebnis, sondern auch die Erfassbarkeit durch Screenreader & Suchmaschinen.

Korrekte Überschriften-Hierarchie (H1–H6)

• Listen-Tags (<ul>, <ol>) für Aufzählungen statt bloßem Fließtext

• ARIA-Labels (aria-label, aria-labelledby) für interaktive Elemente

Beispiel für klare HTML-Struktur & semantische Elemente:

• Falsch:

<div class="title">Kontakt</div>

• Richtig:

<h2>Kontakt</h2>

2. Aussagekräftige Alt-Texte für Bilder & Grafiken – für visuelle Barrierefreiheit

Ein fehlender oder schlechter Alt-Text macht Bilder für Screenreader-Nutzer unverständlich. Alt-Attribute helfen Screenreader-Nutzer:innen, visuelle Inhalte zu verstehen.

Beispiel für richtig gesetzte Alt-Texte:

• Falsch:

<img src="produkt.jpg" alt="" />

• Richtig:

<img src="produkt.jpg" alt="Smartphone mit barrierefreier App-Oberfläche" />

3. Formulare & Buttons für barrierefreie Interaktion mit Screenreadern

Unzugängliche Formulare sind eine große Barriere für Nutzer mit Sehbehinderungen.

• Jedes Feld braucht ein <label>-Element

• Fehlermeldungen als Text statt nur Farbe anzeigen

Tastatur-Navigation ermöglichen (tabindex="0")

Gutes Beispiel für ein barrierefreies Eingabefeld:

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

4. Tastatur-Navigation & Fokus-Management für bessere Zugänglichkeit optimieren

Viele Nutzer verwenden keine Maus – die gesamte Navigation muss per Tastatur funktionieren.

• Fokus-Stile (:focus) sichtbar machen

• Escape-Taste für modale Fenster aktivieren

Tab-Reihenfolge optimieren (tabindex)

Die Cookie-Banner-Checkliste zeigt einen fehlenden Dialognamen und die Prüfung nach dem Öffnen der Einstellungen.

5. Dynamische Inhalte & Pop-ups screenreaderfreundlich gestalten

Live-Inhalte & interaktive Komponenten benötigen besondere Screenreader-Behandlung:

aria-live="polite" für automatische Meldungen

• Keine automatisch startenden Videos ohne Pause-Button

• Pop-ups mit Fokus-Management & semantischer Auszeichnung

Beispiel für eine barrierefreie Live-Meldung:

<div aria-live="polite">Neue Nachricht eingetroffen.</div>

Weitere Kriterien findest Du im WCAG-Hub. Nutze das Accessibility Audit für maschinell prüfbare Befunde und ergänze manuelle Tests.