Website Screenreader Test
Jedes Bedienelement sagt seinen Namen
Schaltfläche, Link, Formularfeld, Auswahlfeld: vier Namen im Test.
Hörprobe mit System
Testen Sie die Antwort, nicht nur die Ansage
Ein guter Durchlauf verfolgt ein Bedienelement vom Namen über Rolle und Zustand bis zur hörbaren Reaktion. Diese Karte zeigt denselben Test mit NVDA und VoiceOver.
Das Bedienelement unter dem akustischen Mikroskop
Konzeptdarstellung eines zugeklappten Filters vor und nach der Aktivierung.
„Filter, Schaltfläche, zugeklappt“
NameFilter
RolleSchaltfläche
Zustandzugeklappt
ErgebnisBereich erscheint
NVDA: Struktur direkt anspringen
NVDA ist standardmäßig Einfg oder Feststelltaste.
Vergleichen Sie die Einträge in der Elementliste mit der sichtbaren Seite. Leere Namen und fehlende Ziele werden dort schnell sichtbar.
VoiceOver: Kategorien im Rotor prüfen
VO steht für Ctrl + Option oder Feststelltaste.
Prüfen Sie nacheinander Überschriften, Links und Formularelemente. Der Rotor zeigt, ob Name und Typ auch ohne visuellen Zusammenhang verständlich sind.
Das Testprotokoll: Soll-Ausgabe und Beobachtung trennen
Schreiben Sie wörtlich auf, was angesagt wird und was nach der Bedienung geschieht.
Link„Versandkosten, Link“
Enter öffnet das benannte ZielSuchfeld„Suchbegriff, Eingabefeld“
Beschriftung bleibt beim Tippen klarKontrollfeld„Nur vorrätig, nicht ausgewählt“
Zustand wechselt nach LeertasteDialog„Termin bestätigen, Dialog“
Fokus gelangt hinein und danach zurückWas dieser Durchlauf sichtbar macht
Name · Rolle · Zustand · Fokusreihenfolge · Reaktion auf Bedienung
Was Sie zusätzlich prüfen
Kontrast · Vergrößerung und Umbruch · Zeigerbedienung · Untertitel · Verständlichkeit
So führen Sie den Test aus
- Öffnen Sie eine repräsentative Seite und starten Sie den Screenreader.
- Erfassen Sie zuerst Überschriften, Links und Formularelemente über Liste oder Rotor.
- Bedienen Sie jede Funktion nur mit der Tastatur und hören Sie Name, Rolle und Zustand.
- Prüfen Sie nach der Aktion Ergebnis, neue Meldungen und den Fokusort.
- Notieren Sie Soll-Ausgabe, Ist-Ausgabe, URL und genaue Fundstelle.
Aus dem Prüfbericht
Vier Bedienelemente, vier Befunde
Kritisch Die Schaltfläche bleibt stumm Regel button-name
Im Test sagt das Vorleseprogramm nur „Schaltfläche“. Ein Symbol ohne Wort braucht ein aria-label, das die Aktion benennt.
Kritisch Ein Link ohne Ziel Regel link-name
In der Linkliste steht ein leerer Eintrag. Der sichtbare Linktext nennt das Ziel und wird zugleich sein Name.
Kritisch Das Formularfeld hat keinen Namen Regel label
Der Text daneben gehört technisch nicht zum Feld. Ein label mit for oder ein aria-labelledby verbindet beide.
Kritisch Das Auswahlfeld nennt nur seinen Zustand Regel aria-toggle-field-name
„Nicht ausgewählt“ ohne Option sagt nichts. Ein Feld mit role="checkbox" braucht aria-label oder aria-labelledby.
Zum Mitnehmen
Die Bedienelemente, korrigiert
Drei kleine Ergänzungen im HTML. Aussehen und Funktion bleiben gleich.
Korrektur in 3 Schritten ansehen
Die Symbolschaltfläche benennen
Das Symbol bleibt sichtbar und für Vorleseprogramme verborgen. aria-label liefert das Wort, das im Test angesagt wird.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button"> <span aria-hidden="true">⇄</span> </button>Nachher
<button type="button" aria-label="Start und Ziel tauschen"> <span aria-hidden="true">⇄</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Mit Tab auf die Schaltfläche. Sie hören jetzt „Start und Ziel tauschen, Schaltfläche“.
Das Feld mit seinem Text verbinden
Der sichtbare Text bekommt eine id, das Feld verweist mit aria-labelledby darauf. Position und Aussehen bleiben gleich.
KorrekturvergleichSchritt 2 · HTML Vorher
<span>Suchbegriff</span> <input id="suche" type="search" name="q">Nachher
<span id="suche-label">Suchbegriff</span> <input id="suche" type="search" name="q" aria-labelledby="suche-label">Markierte Zeilen wurden geändert
So prüfen Sie es Im Test sagt das Vorleseprogramm „Suchbegriff, Eingabefeld“ statt nur „Eingabefeld“.
Das Auswahlfeld beschriften
Ein Feld mit der Rolle checkbox meldet sonst nur seinen Zustand. aria-label ergänzt, welche Option es schaltet.
KorrekturvergleichSchritt 3 · ARIA Vorher
<div role="checkbox" aria-checked="false" tabindex="0"> <span aria-hidden="true">◇</span> </div>Nachher
<div role="checkbox" aria-checked="false" tabindex="0" aria-label="Newsletter abonnieren"> <span aria-hidden="true">◇</span> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Sie hören „Newsletter abonnieren, Kontrollfeld, nicht ausgewählt“ statt nur den Zustand.