Screenreader-Test im Onlineshop mit NVDA und VoiceOver selbst machen
Veröffentlicht am 28. Oktober 2026
Für einen Screenreader-Test schalten Sie unter Windows den kostenlosen Screenreader NVDA ein oder auf Mac und iPhone das eingebaute VoiceOver und gehen Ihre Kaufstrecke von der Startseite bis vor die Zahlung nur mit Tastatur oder Gesten durch. Sie prüfen dabei, ob das Gesprochene zu jedem Bild, Link, Schalter und Formularfeld sagt, was es ist, wie es heißt und in welchem Zustand es ist; jede Stelle, an der das nicht stimmt, notieren Sie.
Dieser Artikel zeigt Ihnen Installation und Einschalten, die wenigen Befehle, die Sie wirklich brauchen, einen getakteten Ablauf durch Startseite, Kategorie, Produktseite, Warenkorb und Checkout, die passende WCAG-Zuordnung, ein Protokoll und eine Checkliste. Er gehört zu unserer Übersicht Website auf Barrierefreiheit prüfen. Der Screenreader-Test baut auf dem Tastaturtest ohne Maus auf: Machen Sie den zuerst, denn was die Tastatur nicht erreicht, erreicht auch der Screenreader nicht zuverlässig.
Was der Screenreader-Test findet, was andere Tests nicht finden
Der Tastaturtest zeigt, ob Sie jedes Element erreichen und bedienen können. Ein automatischer Scan zeigt, ob zum Beispiel ein Alternativtext oder ein Feldname im Code steht. Erst der Screenreader-Test zeigt, was eine blinde Kundin tatsächlich hört: ob „Schalter“ ohne Namen angesagt wird, ob die gewählte Größe als ausgewählt gilt, ob nach „In den Warenkorb“ irgendetwas gesagt wird.
Das W3C beschreibt genau diese drei Angaben als Kern des Kriteriums 4.1.2 Name, Rolle, Wert: Bedienelemente brauchen einen Namen, eine Rolle und, wo vorhanden, einen Zustand, etwa ob ein Kontrollfeld angehakt oder ein aufklappbarer Bereich geöffnet ist.
Welcher Screenreader für Ihren Test
Die WebAIM-Umfrage unter Screenreader-Nutzern vom Juli und August 2026 mit 1.780 gültigen Antworten (WebAIM Screen Reader User Survey #11) zeigt:
| Ergebnis der Umfrage 2026 | Wert |
|---|---|
| Hauptscreenreader am Computer: JAWS | 55,0 % |
| Hauptscreenreader am Computer: NVDA | 32,9 % |
| Hauptscreenreader am Computer: VoiceOver | 6,5 % |
| In Europa: JAWS zu NVDA als Hauptscreenreader | 42,8 % zu 42,3 % |
| Am Handy oder Tablet häufig genutzt: VoiceOver | 72,2 % |
| Am Handy oder Tablet häufig genutzt: TalkBack (Android) | 29,5 % |
Diese Anleitung deckt JAWS nicht ab. NVDA ist laut NVDA-Benutzerhandbuch „völlig kostenlos“, VoiceOver ist auf Mac und iPhone eingebaut. Daraus ergibt sich unsere Empfehlung:
| Ihre Geräte | Was Sie testen | Warum |
|---|---|---|
| Windows-PC und iPhone | NVDA am PC, VoiceOver am iPhone | Deckt einen kostenlosen Desktop-Screenreader und den am Handy meistgenutzten ab |
| Nur Mac und iPhone | VoiceOver am iPhone zuerst, dann VoiceOver am Mac | Nur 6,5 % der Befragten nutzen VoiceOver am Computer als Hauptscreenreader, am Handy nutzen es 72,2 %; das iPhone ist darum wichtiger |
| Nur Windows-PC | NVDA | Bitten Sie für das Handy jemanden mit iPhone um einen Durchgang |
| Android-Handy | TalkBack ist nicht Teil dieser Anleitung | Die Prüfpunkte unten gelten trotzdem |
Vorbereitung: rund 10 Minuten (unsere Empfehlung)
- Kopfhörer aufsetzen, damit Sie jede Ansage verstehen.
- Testprodukt wählen: eines mit Varianten (Größe, Farbe) und mehreren Bildern.
- Testdaten bereitlegen: eine Lieferadresse, eine Test-E-Mail-Adresse. Sie brechen vor der Zahlung ab und bestellen nichts.
- Protokoll öffnen (Vorlage weiter unten), auf einem zweiten Gerät oder auf Papier.
- Tastaturtest erledigt? Wenn nicht, zuerst den Tastaturtest machen.
NVDA unter Windows einrichten
NVDA läuft laut Handbuch auf den 64-Bit-Ausgaben von Windows 10 und Windows 11 und braucht mindestens 500 MB Speicherplatz. Die folgenden Angaben beziehen sich auf das Benutzerhandbuch von NVDA 2026.3.
- Laden Sie NVDA von nvaccess.org/download herunter (Schritte im Handbuch).
- Starten Sie die Datei. NVDA lädt eine temporäre Kopie und spricht ab dann selbst. Stimmen Sie der Lizenz zu und wählen Sie eine der Optionen (Handbuch): „NVDA auf diesem Computer installieren“ oder „Weiter ausführen“. Mit „Weiter ausführen“ läuft NVDA nur bis zum Beenden oder Herunterfahren, und Einstellungen werden nicht gespeichert. Für einen einmaligen Test reicht das.
- Merken Sie sich die NVDA-Taste: Das ist standardmäßig die Einfügen-Taste oder, bei ausgeschaltetem Nummernblock, die Null auf dem Nummernblock; sie kann auch auf die Feststelltaste gelegt werden, was auf Laptops ohne Einfügen-Taste hilft (Handbuch). In den Tabellen unten steht „NVDA+“ für diese Taste.
- Öffnen Sie den Sprachausgaben-Betrachter: NVDA-Menü mit NVDA+N, dann „Werkzeuge“, dann „Sprachausgaben-Betrachter“. Das Fenster zeigt als Text, was NVDA spricht (Handbuch). Von dort kopieren Sie Ansagen wörtlich ins Protokoll.
- Öffnen Sie Ihren Shop in Chrome, Edge oder Firefox. Alle drei stellt NVDA im Lesemodus dar (Handbuch).
Die NVDA-Befehle für den Shop-Test
Alle Angaben aus dem NVDA-Benutzerhandbuch, Abschnitte Im Web navigieren, Lesemodus und Schnellnavigationstasten.
| Was Sie tun wollen | Taste |
|---|---|
| NVDA starten (installierte Version) | Strg+Alt+N |
| NVDA beenden | NVDA+Q, dann Eingabetaste |
| Sprechen sofort stoppen | Strg |
| Seitentitel (Fenstertitel) ansagen | NVDA+T |
| Ab hier alles vorlesen | NVDA+Pfeil nach unten (Laptop: NVDA+A) |
| Nächste Überschrift, vorherige Überschrift | H, Umschalt+H |
| Nächste Überschrift der Ebene 1, 2, 3 | 1, 2, 3 |
| Nächste Sprungmarke (Bereich wie Navigation, Hauptinhalt) | D |
| Nächster Link | K |
| Nächstes Formularfeld | F |
| Nächster Schalter | B |
| Nächstes Eingabefeld | E |
| Nächstes Kombinationsfeld (Auswahlliste) | C |
| Nächstes Kontrollfeld, nächster Auswahlschalter | X, R |
| Nächste Grafik | G |
| Liste aller Links, Überschriften und weiterer Elemente | NVDA+F7 |
| Zwischen Lese- und Interaktionsmodus wechseln | NVDA+Leertaste |
| Interaktionsmodus verlassen | Escape |
Mit Umschalt vor einem Buchstaben springen Sie rückwärts. Springen Sie mit Tab in ein Eingabefeld, wechselt NVDA laut Handbuch von selbst in den Interaktionsmodus, damit Ihre Eingaben im Feld landen; mit Escape geht es zurück in den Lesemodus. Springen Sie dagegen mit E oder F zu einem Feld, bleibt NVDA im Lesemodus; drücken Sie dann die Eingabetaste oder die Leertaste, bevor Sie tippen, sonst lösen Ihre Buchstaben und Ziffern Sprungbefehle aus (Handbuch). Links und Schalter lösen Sie so aus wie im Tastaturtest. Zum Üben schaltet NVDA+1 die Eingabehilfe ein: NVDA sagt dann zu jeder Taste, was sie tut, ohne sie auszuführen (Handbuch).
VoiceOver auf dem Mac einschalten
Die Angaben stammen aus dem VoiceOver-Benutzerhandbuch für den Mac von Apple (Stand macOS 27).
- Einschalten und ausschalten mit Command-F5. Alternativ: Menü „Apple“ > „Systemeinstellungen“, in der Seitenleiste „Bedienungshilfen“, dann „VoiceOver“ (Apple).
- VO-Taste: „VO“ steht für Control und Option gleichzeitig oder die Feststelltaste. Für Befehle mit F1 bis F12 brauchen Sie standardmäßig zusätzlich die Fn-Taste (Apple).
- Mitlesen: Das Beschriftungs-Panel zeigt an, was VoiceOver vorliest; VO-Fn-Command-F10 blendet es ein oder aus (Apple).
- Üben: VO-K startet die Tastaturhilfe, die Tasten ansagt, ohne sie auszuführen (Apple).
Die VoiceOver-Befehle (Mac) für den Shop-Test
| Was Sie tun wollen | Taste | Quelle |
|---|---|---|
| Sprechen kurz anhalten und fortsetzen | Control | Apple |
| Zum nächsten oder vorherigen Element | VO-Rechtspfeil, VO-Linkspfeil | Apple, Navigation |
| Ab hier bis Seitenende vorlesen | VO-A | Apple, Webbefehle |
| Nächste Überschrift, vorherige Überschrift | VO-Command-H, VO-Command-Umschalt-H | Apple, Suchbefehle |
| Nächster Link | VO-Command-L | Apple, Suchbefehle |
| Nächstes Steuerelement (Feld, Schalter) | VO-Command-J | Apple, Suchbefehle |
| Nächste Grafik | VO-Command-G | Apple, Suchbefehle |
| Rotorliste öffnen (Listen von Überschriften, Links und mehr) | VO-U, dann Links- oder Rechtspfeil für die Liste, Auf- oder Abwärtspfeil für den Eintrag | Apple, Rotor |
| Element auslösen (Link, Schalter) | VO-Leertaste | Apple, Interaktion |
| In eine Gruppe hinein, wieder heraus | VO-Umschalt-Abwärtspfeil, VO-Umschalt-Aufwärtspfeil | Apple, Interaktion |
| Bildschirm schwarz schalten (Bildschirmvorhang) | VO-Umschalt-Fn-F11 | Apple, allgemeine Befehle |
VoiceOver auf dem iPhone einschalten
Wichtig vorab: Mit VoiceOver ändern sich die Gesten, mit denen Sie das iPhone bedienen (Apple). Richten Sie deshalb zuerst den Bedienungshilfen-Kurzbefehl ein, damit Sie VoiceOver jederzeit wieder ausschalten können: „Einstellungen“ > „Bedienungshilfen“ > „Bedienungshilfen-Kurzbefehl“, dort VoiceOver wählen. Danach schaltet dreimaliges Drücken der Seitentaste (beim iPhone SE der Home-Taste) VoiceOver ein und aus (Apple).
Alternativ schalten Sie VoiceOver unter „Einstellungen“ > „Bedienungshilfen“ > „VoiceOver“ ein. Dort finden Sie auch die „VoiceOver-Übungen“, in denen Sie Gesten gefahrlos ausprobieren (Apple).
| Was Sie tun wollen | Geste | Quelle |
|---|---|---|
| Nächstes, vorheriges Element | Mit einem Finger nach rechts, nach links streichen | Apple, Gesten |
| Ausgewähltes Element auslösen | Doppeltippen | Apple, Gesten |
| Ganzen Bildschirm ab oben vorlesen | Mit zwei Fingern nach oben streichen | Apple, Gesten |
| Vorlesen anhalten, fortsetzen | Mit zwei Fingern tippen | Apple, Gesten |
| Seite weiterblättern | Mit drei Fingern nach oben streichen | Apple, Gesten |
| Rotor wählen, z. B. „Überschriften“ | Zwei Finger drehen wie an einer Wählscheibe | Apple, Rotor |
| Mit dem Rotor zur nächsten oder vorherigen Überschrift | Mit einem Finger nach oben oder unten streichen | Apple, Rotor |
| Bildschirm schwarz schalten (Bildschirmvorhang) | Mit drei Fingern dreimal tippen | Apple, Gesten |
Testen Sie am iPhone in Safari: In der WebAIM-Umfrage 2026 ist Safari mit 56,0 % der meistgenutzte mobile Browser der Befragten (WebAIM).
Der Testablauf durch die Kaufstrecke
Die Zeitangaben sind unsere Empfehlung für einen ersten Durchgang, beide Durchgänge eingerechnet: rund 65 Minuten für die Schritte 1 bis 5 mit einem Screenreader am Computer, dazu 15 Minuten am iPhone und 10 Minuten Vorbereitung. Machen Sie jeden Schritt zuerst sehend mit eingeblendetem Text (Sprachausgaben-Betrachter oder Beschriftungs-Panel), dann ein zweites Mal ohne hinzusehen.
Die genaue Formulierung einer Ansage hängt von Screenreader, Browser und Version ab. Entscheidend ist, dass Name, Rolle und Zustand vorkommen. Die Beispiele in Anführungszeichen unten sind sinngemäß, nicht wörtlich.
1. Startseite: 10 Minuten
| Was Sie tun | NVDA | VoiceOver Mac | Was Sie hören müssen | WCAG |
|---|---|---|---|---|
| Seitentitel abfragen | NVDA+T | VO-Fn-F2 (Zusammenfassung des Fensters, Apple) | Ein Titel, der Thema oder Zweck der Seite nennt, keine leere Angabe; unsere Empfehlung: mit Shopname, nicht nur „Startseite“ | 2.4.2 |
| Ein paar Sätze vorlesen lassen | NVDA+Pfeil nach unten | VO-A | Deutsche Aussprache. Klingt der Text wie mit englischer Stimme gelesen, ist die Seitensprache falsch gesetzt | 3.1.1 |
| Überschriften durchgehen | H, dann NVDA+F7 | VO-U, Liste „Überschriften“ | Überschriften, die als Überschriften angesagt werden und das Thema des Abschnitts nennen; keine leeren Überschriften. Unsere Empfehlung: eine Hauptüberschrift (Ebene 1), darunter eine sinnvolle Gliederung | 1.3.1, 2.4.6 |
| Bereiche durchgehen | D | VO-U, Liste der Orientierungspunkte, falls angeboten | Navigation, Hauptinhalt, Fußzeile als Bereiche | 1.3.1, 2.4.1 |
| Linkliste öffnen | NVDA+F7 | VO-U, Liste „Links“ | Jeder Link verständlich: „Warenkorb“, „Suche“, „Mein Konto“, nicht „Link“, „Mehr“ oder ein Dateiname | 2.4.4, 4.1.2 |
| Cookie-Hinweis bedienen | B für Schalter | VO-Command-J | Der Hinweis ist erreichbar, die Schalter haben klare Namen | 4.1.2 |
2. Kategorieseite und Filter: 15 Minuten
| Was Sie tun | NVDA | VoiceOver Mac | Was Sie hören müssen | WCAG |
|---|---|---|---|---|
| Zur Produktliste springen | H oder 2 | VO-Command-H | Überschrift der Kategorie, Produktnamen als Überschriften oder Links | 1.3.1 |
| Ein Produkt in der Liste vorlesen | Pfeil nach unten | VO-Rechtspfeil | Name, Preis und ggf. „ausverkauft“ als Text, nicht nur als Farbe oder Symbol | 1.1.1, 1.3.1, 1.4.1 |
| Filterbereich öffnen | B, dann auslösen | VO-Command-J, dann VO-Leertaste | Name des Filters und Zustand „reduziert“ oder „erweitert“ | 4.1.2 |
| Einen Filter setzen | X | VO-Command-J, dann VO-Leertaste | Name des Filterwerts und „aktiviert“ oder „nicht aktiviert“ | 4.1.2 |
| Auf das Ergebnis achten | nichts drücken | nichts drücken | Eine Ansage wie „24 Produkte“, ohne dass Sie suchen müssen | 4.1.3 |
Das W3C nennt als Beispiel für 4.1.3 einen verwandten Fall: Nach einer Suche erscheint „5 results returned“, und der Screenreader sagt „Five results returned“ an (Understanding 4.1.3). Mehr zum Filter selbst finden Sie unter Produktfilter barrierefrei gestalten.
3. Produktseite mit Varianten: 15 Minuten
| Was Sie tun | NVDA | VoiceOver Mac | Was Sie hören müssen | WCAG |
|---|---|---|---|---|
| Seitentitel und Hauptüberschrift | NVDA+T, dann 1 | VO-Fn-F2, dann VO-Command-H | Produktname in beiden | 2.4.2, 2.4.6 |
| Bilder durchgehen | G | VO-Command-G | Eine Beschreibung, die zum Produkt passt; kein Dateiname wie „IMG_2041.jpg“, keine leere Ansage „Grafik“ | 1.1.1 |
| Bildergalerie bedienen | B | VO-Command-J | „Nächstes Bild“, „Vorheriges Bild“ statt „Schalter“ ohne Namen | 4.1.2 |
| Größe wählen | F, C oder R | VO-Command-J | Feldname „Größe“, die Rolle (Auswahlliste oder Auswahlschalter) und die aktuelle Auswahl | 3.3.2, 4.1.2 |
| Farbe über Farbfelder wählen | B oder R | VO-Command-J | Der Farbname („Dunkelblau“) und „ausgewählt“; nicht nur „Schalter“ | 1.1.1, 4.1.2 |
| Nicht lieferbare Variante | Pfeiltasten | VO-Rechtspfeil | „nicht verfügbar“ oder „ausverkauft“ als Text | 1.3.1 |
| Menge ändern | E, dann Eingabetaste, Zahl tippen, Escape | VO-Command-J | „Menge“ als Feldname; Plus und Minus als „Menge erhöhen“, „Menge verringern“ | 4.1.2 |
| In den Warenkorb legen | B, dann auslösen | VO-Command-J, dann VO-Leertaste | Eine Bestätigung wie „In den Warenkorb gelegt“ oder der neue Warenkorbstand | 4.1.3 |
| Seitlicher Mini-Warenkorb öffnet sich | Pfeil nach unten, Tab | VO-Rechtspfeil | Sperrt das Fenster den Rest der Seite, landen Sie darin, nicht hinter ihm auf der Produktseite; sonst erreichen Sie es direkt als Nächstes | 2.4.3 |
Auch hier ist das Beispiel des W3C ein Shop: Nach „Add to Shopping Cart“ erscheint „5 items“ beim Warenkorbsymbol, und der Screenreader sagt „Five items“ oder „Shopping cart, five items“ an (Understanding 4.1.3). Für ein Fenster, das den Rest der Seite sperrt, beschreibt das W3C, dass der Fokus beim Öffnen in das Fenster gesetzt wird (Understanding 2.4.3). Gute Bildbeschreibungen schreiben Sie mit Alternativtexten für Produktbilder.
4. Warenkorb: 10 Minuten
| Was Sie tun | NVDA | VoiceOver Mac | Was Sie hören müssen | WCAG |
|---|---|---|---|---|
| Warenkorb vorlesen | NVDA+Pfeil nach unten | VO-A | Je Artikel Name, Variante, Menge, Preis in sinnvoller Reihenfolge; ist es eine Tabelle, die Spaltenköpfe | 1.3.1, 1.3.2 |
| Menge ändern | E | VO-Command-J | Feldname mit Produktbezug, nicht fünfmal nur „Menge“ ohne Zuordnung | 2.4.6, 4.1.2 |
| Artikel entfernen | B | VO-Command-J | „Entfernen“ oder „Produktname entfernen“ statt „Schalter“ oder „X“ | 4.1.2 |
| Neue Summe | nichts drücken | nichts drücken | Die geänderte Summe oder eine Bestätigung wird angesagt | 4.1.3 |
| Gutscheinfeld mit falschem Code | E, dann Eingabetaste, Code tippen, Eingabetaste | VO-Command-J | Eine Fehlermeldung als Text, die angesagt wird | 3.3.1, 4.1.3 |
5. Checkout bis vor die Zahlung: 15 Minuten
| Was Sie tun | NVDA | VoiceOver Mac | Was Sie hören müssen | WCAG |
|---|---|---|---|---|
| Alle Felder durchgehen | F | VO-Command-J | Jedes Feld mit Namen („Vorname“, „Postleitzahl“), Pflichtfelder als „erforderlich“ oder mit „Pflichtfeld“ im Namen | 1.3.1, 3.3.2 |
| Land oder Anrede wählen | C oder R | VO-Command-J | Name, Rolle und aktuelle Auswahl | 4.1.2 |
| Bewusst ein Pflichtfeld leer lassen und weiter | B, dann auslösen | VO-Command-J, dann VO-Leertaste | Eine Fehlermeldung, die sagt, welches Feld falsch ist; sie wird angesagt oder der Fokus springt zum Feld | 3.3.1, 4.1.3 |
| Postleitzahl falsch eingeben | E, dann Eingabetaste, falsche Zahl tippen, Tab | VO-Command-J | Die Meldung gehört hörbar zum Feld | 3.3.1 |
| Versandart wählen | R | VO-Command-J | Jede Option mit Preis und Lieferzeit als Text, die gewählte als „ausgewählt“ | 4.1.2 |
| Kontrollfeld für AGB oder Newsletter | X | VO-Command-J | Der Text daneben wird als Name angesagt, Zustand „aktiviert“ oder „nicht aktiviert“ | 4.1.2 |
| Bis zur Zahlungsauswahl gehen, dann abbrechen | H, B | VO-Command-H | Schritt und Überschrift jeder Checkout-Seite („Lieferung“, „Zahlung“) | 2.4.2, 2.4.6 |
Das W3C-Beispiel zu 4.1.3 nennt auch das Postleitzahlfeld: Nach einer falschen Eingabe erscheint „Invalid entry“, und der Screenreader sagt „Invalid entry“ oder „Postal code, invalid entry“ (Understanding 4.1.3). Alle Prüfpunkte rund um die Kaufstrecke vertieft Barrierefreier Checkout.
6. Dasselbe am iPhone: 15 Minuten
Wiederholen Sie die Schritte 1 bis 5 in Safari am iPhone, verkürzt: Streichen Sie mit einem Finger nach rechts durch jede Seite, stellen Sie den Rotor auf „Überschriften“ und springen Sie mit Streichen nach oben oder unten von Überschrift zu Überschrift (Apple, Rotor). Achten Sie besonders auf das mobile Menü, den Filter als ausklappbares Fenster und den Mini-Warenkorb: Diese Teile können mobil anders aussehen und anders gebaut sein als am Computer. Hören Sie dort auf dieselben Dinge wie oben.
Fehler, die Sie hören können, und wer sie behebt
Die Spalten „Wahrscheinliche Ursache“ und „Wer behebt“ sind unsere Einschätzung; in Ihrem Shop kann es anders verteilt sein, etwa wenn eine Agentur das Theme angepasst hat.
| Was Sie hören | Wahrscheinliche Ursache | Wer behebt |
|---|---|---|
| „Grafik“ ohne Text oder ein Dateiname bei Produktbildern | Alternativtext fehlt | Sie selbst, im Produkt im Shop-Backend |
| „Link“ oder „Schalter“ ohne Namen bei Warenkorb, Suche, Konto | Symbol ohne Textalternative im Theme | Theme-Entwickler oder Agentur |
| Farbfelder nur als „Schalter“ | Variantenauswahl im Theme ohne Namen und Zustand | Theme-Entwickler oder Agentur |
| Nach „In den Warenkorb“ Stille | Keine Statusmeldung | Theme-Entwickler oder Agentur |
| Filter ohne „aktiviert“ und ohne Ergebnisansage | Filter-App oder Filtermodul | Anbieter der App oder des Plugins |
| Fehlermeldung im Checkout nicht angesagt | Formular im Theme oder Checkout des Shopsystems | Theme-Entwickler; beim fest vorgegebenen Checkout der Hersteller des Shopsystems |
| Keine Hauptüberschrift, Überschriften als reiner Fettdruck | Seitenvorlage oder Seitenbaukasten | Theme-Entwickler; bei eigenen Inhaltsseiten Sie selbst |
| Englische Aussprache auf deutscher Seite | Seitensprache falsch gesetzt | Theme-Entwickler oder Einstellung im Shopsystem |
| Zahlungsfelder ohne Namen | Eingebettetes Formular des Zahlungsdienstes | Zahlungsanbieter |
Geben Sie jeder Stelle, die Sie weitergeben, das Protokoll mit: die wörtliche Ansage, die Seite, den Befehl und das WCAG-Kriterium. Damit kann ein Entwickler den Fehler nachstellen.
Protokoll: Vorlage
Ein Protokoll pro Screenreader und Gerät. Kopf: Datum, Screenreader mit Version, Browser, Gerät, Prüfer. Dann eine Zeile je Befund:
| Nr. | Seite | Was ich getan habe | Was ich gehört habe (wörtlich) | Was ich erwartet habe | WCAG | Wer behebt | Dringlichkeit |
|---|---|---|---|---|---|---|---|
| Beispiel 1 | Produktseite „Wollmütze“ | B, Farbfeld | „Schalter“ | „Dunkelblau, Schalter, ausgewählt“ | 4.1.2 | Theme | Hoch: Kauf in gewünschter Farbe blind nicht möglich |
| Beispiel 2 | Warenkorb | Artikel mit „Entfernen“ gelöscht | nichts | „Artikel entfernt, Summe 24,90 Euro“ | 4.1.3 | Theme | Mittel: Ergebnis nur durch Nachlesen erkennbar |
Die beiden Zeilen sind erfundene Beispiele zur Veranschaulichung. Als Dringlichkeit schlagen wir vor: hoch, wenn ein Kauf blind nicht abschließbar ist; mittel, wenn er nur mit Umwegen gelingt; niedrig, wenn es stört, aber nicht hindert. Das ist unsere Empfehlung, keine Vorgabe der WCAG. Bewahren Sie das Protokoll mit Datum auf; es zeigt, was Sie geprüft haben und was danach behoben wurde.
Was ein Laie mit Screenreader nicht sieht
Ein eigener Screenreader-Test ist wertvoll, aber er hat Grenzen, die Sie kennen sollten:
- Sie hören anders als geübte Nutzer. In der WebAIM-Umfrage 2026 springen Befragte mit fortgeschrittenen Kenntnissen auf langen Seiten zu 72,1 % zuerst über Überschriften, Anfänger nur zu 41,4 % (WebAIM). Unsere Einschätzung: Geübte Nutzer kommen mit manchen Schwächen zurecht, an denen Sie scheitern, und umgekehrt fallen ihnen Dinge auf, die Sie überhören.
- Sie sehen den Bildschirm. Unsere Einschätzung: Wer weiß, wo der Schalter ist, hält eine unklare Ansage leicht für ausreichend. Darum der zweite Durchgang mit Bildschirmvorhang oder ohne hinzusehen.
- Ein Screenreader ist nicht alle. Der meistgenutzte Hauptscreenreader am Computer ist laut WebAIM JAWS, den diese Anleitung nicht abdeckt; Ergebnisse unterscheiden sich außerdem nach Browser.
- Nicht jede seltsame Ansage ist Ihr Fehler. Manches liegt am Screenreader oder Browser. Prüfen Sie im Zweifel mit einem zweiten Browser.
- Der Test ersetzt keine vollständige Prüfung. Er deckt die Kaufstrecke ab, nicht alle WCAG-Kriterien. Kontraste, Zoom und Untertitel prüfen Sie anders; den Weg dorthin zeigt die Übersicht Website auf Barrierefreiheit prüfen.
Wenn Sie es sich leisten können, lassen Sie die Kaufstrecke zusätzlich von einer Person testen, die täglich einen Screenreader nutzt.
Checkliste Screenreader-Test
- Tastaturtest vorher erledigt
- NVDA (Windows) oder VoiceOver (Mac, iPhone) eingeschaltet, Ausschalten geübt, am iPhone Bedienungshilfen-Kurzbefehl eingerichtet
- Sprachausgaben-Betrachter oder Beschriftungs-Panel offen, Protokoll bereit
- Startseite: Seitentitel sinnvoll, deutsche Aussprache, Überschriften als Überschriften angesagt, Bereiche vorhanden, alle Links mit verständlichem Namen
- Kategorie: Produktnamen und Preise hörbar, Filter mit Namen und Zustand, Ergebnisanzahl wird angesagt
- Produktseite: Bilder beschrieben, Galerie-Schalter benannt, Größe und Farbe mit Namen und Auswahlzustand, nicht lieferbare Varianten als Text
- Warenkorb legen: Bestätigung wird angesagt, Mini-Warenkorb ist direkt erreichbar (sperrt er die Seite, bekommt er den Fokus)
- Warenkorb: Artikel verständlich vorgelesen, Mengenfelder und Entfernen-Schalter eindeutig, neue Summe angesagt, Gutscheinfehler angesagt
- Checkout: jedes Feld benannt, Pflichtfelder erkennbar, Fehlermeldungen angesagt und dem Feld zugeordnet, Versandarten mit Preis und Zustand
- Zweiter Durchgang ohne hinzusehen
- Dasselbe am iPhone mit VoiceOver in Safari
- Jeder Befund mit wörtlicher Ansage, WCAG-Kriterium, Zuständigkeit und Dringlichkeit im Protokoll
- Befunde an Theme-Entwickler, App-Anbieter oder Zahlungsanbieter weitergegeben, eigene Inhalte selbst korrigiert
- Nach der Behebung denselben Schritt erneut getestet
Ihr nächster Schritt
Dieser Ratgeber ist keine Rechtsberatung. Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Wie jedes automatische Werkzeug findet er nur einen Teil der Barrieren; den Screenreader-Test durch die Kaufstrecke machen Sie weiterhin selbst.
Stand: 28.10.2026. Quellen gelesen am 28.10.2026.