Was ist Screenreader-Textvorschau?

Screen Reader Text Preview zeigt, wie assistive Technologien Ihren HTML-Inhalt vorlesen. Es legt den barrierefreien Namen, die Rolle und die Lesereihenfolge jedes Elements offen, damit Sie fehlende Beschriftungen, kaputte Überschriftenstruktur und ARIA-Probleme finden, bevor echte Nutzer darauf stoßen.

Das Tool analysiert Ihr HTML auf dieselbe Art, wie ein Screenreader seinen Accessibility-Tree aufbaut: visuelles Layout wird verworfen, aria-label und aria-labelledby werden aufgelöst, der Alt-Text von Bildern aufgesammelt und das Ergebnis zu einer linearen Lesereihenfolge geglättet. Im Issues-Panel landen Links ohne barrierefreien Namen, Sprünge in der Überschriftenebene, Bilder ohne Alt-Text und Formularfelder ohne Label.

Anleitung

1. Fügen Sie Ihren HTML-Inhalt ein oder geben Sie eine URL zur Analyse ein.
2. Überprüfen Sie die linearisierte Lesereihenfolge und den Barrierefreiheitsbaum der Elemente.
3. Beheben Sie gemeldete Probleme und testen Sie erneut, bis der Lesefluss klar ist.

Wann verwenden

• Bevor eine Landingpage online geht, die einen WCAG-AA-Audit bestehen muss.
• Wenn ein NVDA- oder VoiceOver-Nutzer ein verwirrendes Navigationsmenü gemeldet hat.
• Nach dem Update eines Drittanbieter-Widgets das HTML auf Accessibility-Regressionen prüfen.

Ergebnis

Ein Entwickler fügt ein Navigationsmenü ein. Das Tool zeigt, dass 3 Links keinen barrierefreien Namen haben und die Überschriftenreihenfolge von h1 direkt auf h4 springt — das verwirrt Screenreader-Nutzer.

Häufige Fragen

Ersetzt das einen Test mit einem echten Screenreader?

Nein. NVDA, JAWS und VoiceOver haben jeweils eigene Macken in der Ansage von Live-Regionen, Tabellenköpfen und dynamischen Inhalten. Nutzen Sie das Tool, um die offensichtlichen Probleme (fehlende Labels, kaputte Überschriftenreihenfolge) abzufangen, bevor Sie Zeit in einen echten Screenreader stecken.

Warum wird mein dekoratives Icon als Problem markiert?

Screenreader sprechen standardmäßig jedes img aus. Bei rein dekorativen Icons gehören ein leeres alt-Attribut und aria-hidden="true" dran, dann überspringt das Tool sie in der Lesereihenfolge. Verwenden Sie nicht alt="Icon" oder alt="Deko", das ist schlechter als nichts.

Wie sieht die richtige Überschriftenreihenfolge aus?

Genau ein h1 pro Seite, und nach unten dürfen keine Ebenen übersprungen werden (auf h2 folgt nicht h4). Nach oben springen ist okay. Screenreader-Nutzer navigieren von Überschrift zu Überschrift, eine kaputte Hierarchie macht die Seite zum Labyrinth.

Braucht jedes interaktive Element ein aria-label?

Nein. Ein Button mit sichtbarem Text braucht kein aria-label, der sichtbare Text wird automatisch zum barrierefreien Namen. Fügen Sie aria-label nur hinzu, wenn kein sichtbarer Text vorhanden ist (reine Icon-Buttons) oder der sichtbare Text nicht beschreibend genug ist (eine Reihe von "Mehr lesen"-Links).

Kann ich eine ganze Seite einfügen?

Ja, fügen Sie das vollständige HTML ein. Scripts, Styles und Meta-Tags werden ignoriert, der Fokus liegt auf dem Body. Bei sehr großen Seiten lohnt es sich, abschnittsweise zu prüfen, damit die Liste der Probleme lesbar bleibt.

Ähnliche Tools