Screenreader-Test der Website
Hören, was Ihre Seite sagt
Überschriften, Links, verborgene Bereiche: drei Stellen im Hörtest.
Hörspur statt Sichtprüfung
Verfolgen Sie den Weg vom HTML bis zur Ansage
Ein Screenreader liest nicht das Bild der Seite vor. Er folgt der zugänglichen Struktur, den Namen und dem Fokus. Diese drei Spuren müssen zusammenpassen.
heading · level 2„Unsere Leistungen“Unsere Leistungen, Überschrift Ebene 2
Details finden Sie hier.
Link im Kontextlink„hier“hier, LinkZiel bleibt unbekannt
textbox · required„E-Mail“E-Mail, Eingabefeld, erforderlich
aria-hidden="true"Element verborgenkeine verlässliche AnsageFokus erreicht stillen Bereich
Zwei Systeme, dieselbe Prüflogik
Fünf Griffe vom Start bis zum Protokoll
NVDA bezeichnet Ihre konfigurierte NVDA-Taste. VO steht bei VoiceOver standardmäßig für Strg + Wahl oder die Feststelltaste.
- 1Vorleseprogramm startenNVDA Über das Windows-Startmenü öffnenVoiceOverCmd + F5
- 2Überschriften isolierenNVDANVDA + F7, „Überschriften“VoiceOverVO + U, „Überschriften“
- 3Linknamen isolierenNVDA Elementliste auf „Links“ stellenVoiceOver Rotorliste „Links“ wählen
- 4Fokusspur ablaufenBeide Mit Tab vorwärts gehenErwartung Name, Rolle und Zustand sind verständlich
- 5Beenden und Fundstelle sichernNVDANVDA + QVoiceOverCmd + F5
So prüfen Sie es
Hören, isolieren, fokussieren
- Lesefolge: Hören Sie die Seite einmal von oben nach unten. Inhalt und Reihenfolge müssen ohne Bild verständlich sein.
- Elementlisten: Prüfen Sie Überschriften und Links außerhalb ihres sichtbaren Kontexts.
- Fokus: Gehen Sie mit Tab durch alle Ziele. Pro Halt erwarten Sie eine verständliche Ansage.
- Zustände: Öffnen Sie Menüs oder Hinweise und wiederholen Sie die Spur im veränderten Zustand.
Grenze: Dieser Durchlauf ergänzt automatische Prüfungen. Er ersetzt keinen Test mit erfahrenen Screenreader-Nutzenden.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Abschnittstitel ohne Überschrift Regel p-as-heading
Groß und fett gestaltete Absätze lassen sich im Hörtest nicht anspringen. Als h2 oder h3 werden sie zu Haltepunkten.
Kritisch Links ohne Ziel im Text Regel link-name
In der Linkliste des Vorleseprogramms stehen nur die Linktexte. „Hier“ und „mehr“ nennen kein Ziel.
Zum Mitnehmen
Die Startseite, korrigiert
Echte Überschriften, sprechende Links, kein stiller Fokus.
Korrektur in 3 Schritten ansehen
Abschnittstitel als Überschrift auszeichnen
Der fett gestaltete Absatz wird zur h2. Die Klasse behält das Aussehen, das Vorleseprogramm bekommt einen Haltepunkt.
KorrekturvergleichSchritt 1 · HTML Vorher
<p class="titel-gross">Unsere Leistungen</p> <p>Wir beraten Sie zu …</p>Nachher
<h2 class="titel-gross">Unsere Leistungen</h2> <p>Wir beraten Sie zu …</p>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit der Überschriftennavigation durch die Seite. Jeder Abschnitt ist ein Halt.
Das Ziel in den Linktext schreiben
Der Linktext steht für sich. Er nennt das Ziel auch dann, wenn der Satz davor nicht gelesen wird.
KorrekturvergleichSchritt 2 · HTML Vorher
<p>Einen Termin buchen Sie <a href="/termin/">hier</a>.</p>Nachher
<p><a href="/termin/">Termin online buchen</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt sein Ziel.
Stille Fokusziele auflösen
Ein Bereich mit aria-hidden bleibt still, obwohl die Tab-Taste hineinführt. Entfernen Sie das Attribut oder den Bereich aus der Tab-Reihenfolge.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="hinweisbox" aria-hidden="true"> <a href="/newsletter/">Newsletter abonnieren</a> </div>Nachher
<div class="hinweisbox"> <a href="/newsletter/">Newsletter abonnieren</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab durch die ganze Seite. An jedem Halt sagt das Vorleseprogramm etwas.