Ein automatischer Scanner findet viele Barrieren, aber er kann eine Frage nicht beantworten: Lässt sich Ihr Store tatsächlich mit einem Screenreader bedienen? Diese Antwort liefert nur ein manueller Test mit einer echten Sprachausgabe. NVDA ist dafür das gängigste Werkzeug, weil es kostenlos, weit verbreitet und auf jedem Windows-Rechner in wenigen Minuten einsatzbereit ist. Dieser Beitrag führt Sie Schritt für Schritt durch einen vollständigen Screenreader-Test Ihres Shopify-Stores: Installation, die wichtigsten Tastenkombinationen, das systematische Durchgehen von Startseite, Produktseite und Checkout, die typischen Shopify-Stolperstellen und die saubere Dokumentation der Befunde.
Screenreader-Nutzer hören die Seite, statt sie zu sehen. Die Sprachausgabe liest Überschriften, Links, Schaltflächen, Formularfelder und Bildbeschreibungen vor und stützt sich dabei vollständig auf den zugrunde liegenden Code und die Tastaturschnittstelle. Wenn eine Schaltfläche keinen Namen hat, sagt der Screenreader nur "Schaltfläche", ohne zu verraten, was sie tut. Wenn ein Bild keinen Alternativtext trägt, liest manche Konfiguration den Dateinamen vor oder überspringt das Bild ganz. Solche Lücken erkennt ein automatisches Werkzeug teils, aber ob die Reihenfolge der Ansagen für einen hörenden Nutzer Sinn ergibt, ob ein Overlay angekündigt wird oder ob ein dynamisch nachgeladener Inhalt überhaupt bemerkt wird, zeigt erst der echte Hörtest. Genau deshalb gilt der manuelle Screenreader-Test als unverzichtbarer Bestandteil jeder ernsthaften Prüfung.
Das BFSG (BGBl. 2021 I S. 2970) setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um. Online-Shops fallen nach § 1 Abs. 3 Nr. 5 BFSG als "Dienstleistungen im elektronischen Geschäftsverkehr" in den Anwendungsbereich. Über Anlage I der EU-Richtlinie 2019/882 verweist das BFSG auf die harmonisierte Norm EN 301 549 v3.2.1, die in ihrem Kapitel 9 die WCAG-2.1-AA-Erfolgskriterien für Webinhalte übernimmt. Das Gesetz ist seit dem 28. Juni 2025 durchsetzbar und gilt für alle Anbieter oberhalb der Kleinstunternehmen-Schwelle.
Bei Verstößen sieht § 37 BFSG Bußgelder vor. Nach § 37 Abs. 2 BFSG beträgt der Rahmen für das nicht konforme Anbieten oder Erbringen einer Dienstleistung bis zu 100.000 EUR, für bestimmte Auskunfts- und Mitwirkungspflichten bis zu 10.000 EUR. AccessifyAI hilft, solche Verstöße zu finden und zu beheben, garantiert aber keine Rechtskonformität oder BFSG-Konformität. Die rechtliche Verantwortung trägt nach § 8 BFSG der Diensteanbieter, also der Händler.
Vom Anwendungsbereich ausgenommen sind nach § 3 Abs. 3 BFSG nur Kleinstunternehmen, also Unternehmen mit weniger als zehn Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme unter zwei Millionen EUR. Beide Bedingungen müssen kumulativ erfüllt sein.
Ein Screenreader-Test prüft mehrere dieser über EN 301 549 v3.2.1 verbindlichen Kriterien zugleich, vor allem WCAG 1.1.1 (Nicht-Text-Inhalte), 1.3.1 (Info und Beziehungen), 2.4.6 (Überschriften und Beschriftungen), 4.1.2 (Name, Rolle, Wert) und 4.1.3 (Statusmeldungen).
NVDA (NonVisual Desktop Access) ist ein kostenloser Open-Source-Screenreader für Windows. Wenn Sie an einem Mac arbeiten, steht dort mit VoiceOver bereits ein eingebauter Screenreader bereit; die nachfolgende Tastenlogik gilt dann sinngemäß, die Tasten unterscheiden sich aber. Für den Test unter Windows gehen Sie so vor:
- Laden Sie NVDA von der offiziellen Seite des Herstellers NV Access herunter (nvaccess.org).
- Starten Sie die heruntergeladene Datei. Sie können NVDA fest installieren oder als portable Variante ohne Installation ausführen. Für einen einmaligen Test genügt die portable Variante.
- Nach dem Start spricht NVDA sofort. Mit der Tastenkombination Strg pausieren Sie die Sprachausgabe jederzeit kurz.
- Verwenden Sie für den Test einen aktuellen Browser. NVDA arbeitet zuverlässig mit Firefox und mit Chrome zusammen.
Ein Hinweis vorweg: Setzen Sie zuerst Kopfhörer auf und stellen Sie die Sprechgeschwindigkeit niedrig ein, falls die Standardgeschwindigkeit zu schnell ist. Sie finden die Einstellung im NVDA-Menü unter "Einstellungen" und dort unter "Stimme". Ein zu schnelles Tempo erschwert den ersten Test unnötig.
NVDA nutzt eine sogenannte Sondertaste, die NVDA-Taste. Standardmäßig ist das die Einfügen-Taste (Insert), bei portablen Installationen oft zusätzlich die Dauergroßschreibtaste (Caps Lock). In den folgenden Kombinationen steht "NVDA" für diese Sondertaste.
Für den Store-Test brauchen Sie nur eine überschaubare Auswahl an Befehlen. Diese Tasten funktionieren, während der Fokus im Browser-Inhalt steht (dem sogenannten Lesemodus):
| Taste |
Funktion |
| Pfeil nach unten |
Liest die nächste Zeile vor |
| H |
Springt zur nächsten Überschrift |
| 1 bis 6 |
Springt zur nächsten Überschrift der Ebene 1 bis 6 |
| K |
Springt zum nächsten Link |
| B |
Springt zur nächsten Schaltfläche |
| F |
Springt zum nächsten Formularfeld |
| D |
Springt zum nächsten Sprungbereich (Landmark/Region) |
| G |
Springt zur nächsten Grafik |
| T |
Springt zur nächsten Tabelle |
| NVDA + F7 |
Öffnet die Elementliste (alle Überschriften, Links, Sprungbereiche) |
| Tabulator |
Bewegt den Fokus zum nächsten bedienbaren Element |
| Eingabetaste |
Aktiviert Link oder Schaltfläche |
| NVDA + Leertaste |
Wechselt zwischen Lesemodus und Fokusmodus |
Die Großbuchstaben springen jeweils vorwärts. Mit gehaltener Umschalttaste springen Sie rückwärts, also etwa Umschalt + H zur vorherigen Überschrift. Diese Sprungbefehle sind das eigentliche Werkzeug des Tests, denn ein Screenreader-Nutzer navigiert selten Zeile für Zeile, sondern hangelt sich an Überschriften, Sprungbereichen und Formularfeldern entlang.
Testen Sie immer den real installierten Store mit allen aktiven Apps und in der aktuell ausgespielten Theme-Version, nicht das nackte Auslieferungs-Theme. Viele Barrieren stammen nicht aus dem Theme selbst, sondern aus App-Embeds, die eigenes HTML und JavaScript einspielen. Öffnen Sie Ihren Store also wie ein echter Kunde und arbeiten Sie sich der Reihe nach durch die drei wichtigsten Stationen: Startseite, Produktseite, Checkout.
Öffnen Sie die Startseite und drücken Sie zunächst NVDA + F7, um die Elementliste zu öffnen. Wählen Sie dort die Ansicht "Überschriften". Sie hören jetzt die Überschriftenstruktur Ihrer Startseite als Gliederung. Prüfen Sie zwei Dinge:
- Gibt es genau eine Überschrift der Ebene 1 (h1), und beschreibt sie sinnvoll, worum es auf der Seite geht?
- Bauen die weiteren Ebenen logisch aufeinander auf, ohne Sprünge von h1 direkt zu h4?
Schließen Sie die Elementliste und steigen Sie mit der Taste H durch die Überschriften. Drücken Sie dann D, um die Sprungbereiche durchzugehen. Ein gut strukturierter Store meldet hier nacheinander Bereiche wie "Banner", "Navigation", "Hauptinhalt" und "Fußzeile". Fehlen diese Sprungbereiche, muss sich ein Screenreader-Nutzer die ganze Seite linear anhören, was mühsam ist (relevant für WCAG 1.3.1).
Drücken Sie als Nächstes G mehrfach, um die Grafiken durchzugehen. Achten Sie genau darauf, was NVDA bei jedem Bild vorliest. Sinnvoll ist ein knapper, beschreibender Alternativtext. Problematisch sind Dateinamen wie "IMG_4827.jpg", die als Text vorgelesen werden, sowie rein dekorative Bilder, die nicht ausgeblendet sind und unnötig vorgelesen werden.
Gehen Sie zuletzt mit der Taste K durch die Links und mit B durch die Schaltflächen. Jeder Link und jede Schaltfläche muss einen aussagekräftigen Namen haben. Ein Slider-Pfeil, der nur als "Schaltfläche" angekündigt wird, oder fünf identische "Mehr erfahren"-Links ohne Kontext sind typische Befunde (WCAG 2.4.6 und 4.1.2).
Die Produktseite ist die wichtigste Verkaufsstation und zugleich die mit den meisten beweglichen Teilen. Öffnen Sie ein typisches Produkt und arbeiten Sie folgende Punkte ab.
Produktname und Preis. Steigen Sie mit H durch die Überschriften. Der Produktname sollte als Überschrift, üblicherweise h1, angesagt werden. Lesen Sie mit den Pfeiltasten weiter und prüfen Sie, ob der Preis als Text vorgelesen wird. Preise, die nur als Bild oder über reines CSS dargestellt werden, bleiben für die Sprachausgabe stumm.
Produktbildergalerie. Gehen Sie mit G durch die Bilder. Das Hauptbild braucht eine Beschreibung, die das Produkt benennt. Die Miniaturansichten der Galerie sind oft Schaltflächen, die das Hauptbild wechseln. Prüfen Sie mit B, ob diese Schaltflächen einen verständlichen Namen tragen oder nur als "Schaltfläche" ohne Inhalt erscheinen.
Variantenauswahl. Hier liegt eine der häufigsten Shopify-Stolperstellen. Wechseln Sie mit F durch die Formularfelder oder mit Tabulator durch die bedienbaren Elemente. Die Auswahl von Größe und Farbe muss als beschriftetes Formularelement angekündigt werden, etwa als Auswahlliste oder als Gruppe von Optionsfeldern mit einer vorgelesenen Beschriftung wie "Größe". Viele Themes setzen die Variantenauswahl als gestaltete Schaltflächen oder als reine Farbflächen um, die NVDA nur als unbenannte Schaltfläche oder gar nicht ankündigt. Dann weiß ein Screenreader-Nutzer nicht, welche Variante er gerade wählt (WCAG 4.1.2).
In den Warenkorb. Suchen Sie mit B die Schaltfläche "In den Warenkorb" und lösen Sie sie mit der Eingabetaste aus. Jetzt kommt der entscheidende Test: Wird das Hinzufügen angesagt? Viele Shopify-Themes laden den Warenkorb per JavaScript nach, ohne die Seite neu zu laden. Wenn keine Statusmeldung erfolgt, bleibt der Nutzer im Unklaren, ob das Produkt im Warenkorb gelandet ist. Eine korrekt umgesetzte Bestätigung wird über einen Live-Bereich automatisch vorgelesen, etwa "Produkt zum Warenkorb hinzugefügt" (WCAG 4.1.3, Statusmeldungen).
Cart-Drawer. Öffnet sich nach dem Klick ein seitlicher Warenkorb (Drawer), prüfen Sie, ob der Fokus dorthin wandert und ob NVDA den geöffneten Bereich ankündigt. Drücken Sie Escape und achten Sie darauf, ob sich der Drawer schließen lässt und der Fokus zurückkehrt.
Der von Shopify gepflegte Standard-Checkout ist auf Barrierefreiheit ausgelegt. Eigene Erweiterungen über Checkout Extensibility fallen jedoch nach § 8 BFSG in Ihre Verantwortung. Gehen Sie den Checkout mit NVDA durch und konzentrieren Sie sich auf Ihre eigenen Bausteine.
Wechseln Sie mit F durch die Formularfelder. Jedes Feld muss eine vorgelesene Beschriftung haben. NVDA sollte also "E-Mail, Bearbeitungsfeld" sagen und nicht nur "Bearbeitungsfeld". Felder ohne Beschriftung sind ein klarer Verstoß gegen WCAG 1.3.1 und 4.1.2.
Prüfen Sie das Verhalten bei Fehlern. Lassen Sie absichtlich ein Pflichtfeld leer und lösen Sie die Weiter-Schaltfläche aus. Eine barrierefreie Fehlerbehandlung kündigt die Fehlermeldung an und führt den Fokus zum betroffenen Feld, sodass ein Screenreader-Nutzer erfährt, was zu korrigieren ist. Eine Fehlermeldung, die nur farblich erscheint, ohne vorgelesen zu werden, ist für die Sprachausgabe unsichtbar.
Achten Sie zuletzt auf selbst hinzugefügte Felder wie eine Geschenknachricht, eine Lieferterminauswahl oder ein Zustimmungs-Häkchen. Jedes dieser Felder muss beschriftet, per Tastatur erreichbar und mit NVDA bedienbar sein.
| Stolperstelle |
Was NVDA verrät |
Betroffenes Kriterium |
| Variantenauswahl ohne Beschriftung |
"Schaltfläche" ohne Inhalt, keine Ansage der Variante |
WCAG 4.1.2 |
| "In den Warenkorb" ohne Statusmeldung |
Nach dem Aktivieren bleibt es still |
WCAG 4.1.3 |
| Produktbilder mit Dateinamen statt Alternativtext |
NVDA liest "IMG_4827.jpg" |
WCAG 1.1.1 |
| Slider- und Galerie-Pfeile ohne Namen |
Nur "Schaltfläche" wird angesagt |
WCAG 4.1.2 |
| Fehlende oder durcheinandergeratene Überschriften |
Elementliste zeigt Lücken oder Sprünge |
WCAG 1.3.1, 2.4.6 |
| Fehlende Sprungbereiche |
Taste D findet keine Regionen |
WCAG 1.3.1 |
| Formularfelder ohne Beschriftung |
"Bearbeitungsfeld" ohne Feldname |
WCAG 1.3.1, 4.1.2 |
| Modal/Overlay nicht angekündigt |
NVDA bleibt im Hintergrundinhalt |
WCAG 4.1.2 |
Welche dieser Punkte in Ihrem konkreten Store auftreten, hängt von Theme-Version, Farbeinstellungen und installierten Apps ab und lässt sich nur am installierten Store feststellen.
Ein Test ist nur so viel wert wie seine Dokumentation. Notieren Sie für jeden Befund vier Angaben, damit er später nachvollziehbar und behebbar ist:
- Seite und Element. Wo trat der Befund auf? Beispiel: Produktseite, Variantenauswahl "Größe".
- Was NVDA gesagt hat. Notieren Sie die tatsächliche Ansage wörtlich, etwa "Schaltfläche" ohne Namen.
- Was erwartet wäre. Beispiel: NVDA sollte "Größe, Auswahlliste, M" ansagen.
- Betroffenes WCAG-Kriterium. Ordnen Sie den Befund einem Erfolgskriterium zu, etwa WCAG 4.1.2.
Eine einfache Tabelle in einem Dokument genügt. Diese Struktur hilft Ihnen oder Ihrer Entwicklung später, jeden Punkt gezielt im Theme oder in der betreffenden Section zu beheben, statt vage von "irgendwo gibt es ein Problem" auszugehen.
Ein einzelner Tester deckt nicht jeden Fall ab, und niemand bedient einen Screenreader auf Anhieb so flüssig wie ein täglicher Nutzer. Ihr erster Durchlauf wird trotzdem schon die gröbsten Barrieren aufdecken: stumme Bestätigungen, unbeschriftete Felder, namenlose Schaltflächen und vorgelesene Dateinamen. Für ein belastbares Gesamtbild kombinieren Sie den manuellen Hörtest mit dem Tastaturtest und einer automatischen Prüfung, denn jede Methode findet andere Lücken. Kein einzelnes Verfahren und kein Werkzeug kann für sich Rechtskonformität garantieren.
| Werkzeug |
Zweck |
Kosten |
| NVDA Screenreader |
Manueller Hörtest unter Windows |
kostenlos |
| VoiceOver |
Eingebauter Screenreader unter macOS und iOS |
kostenlos |
| Manueller Tastaturtest |
Fokusreihenfolge, Fokusfallen, Erreichbarkeit |
kostenlos |
| axe DevTools |
Erkennt fehlende Namen, ARIA-Probleme, Strukturfehler |
kostenlose Variante |
| WAVE (WebAIM) |
Visuelle Markierung von Struktur- und Beschriftungsfehlern |
kostenlos |
| AccessifyAI |
Shopify-spezifische Überprüfung mit Liquid-Korrekturvorschlägen |
Free-Tier, ab 9,99 USD/Monat |
Welche dieser Screenreader-Probleme in Ihrem konkreten Store stecken, zeigt nur ein echter Test auf Ihrer aktuellen Theme-Version und im installierten Zustand mit allen aktiven Apps. Ich habe AccessifyAI entwickelt, weil allgemeine Werkzeuge zwar einen Verstoß melden, aber nicht sagen, in welcher Liquid-Datei oder welchem Section-Snippet die Korrektur erfolgen muss. AccessifyAI ordnet den Befund dem Shopify-Code-Modell zu und gibt statt eines Overlays einen Korrekturvorschlag als Liquid-Diff aus, den Sie vor der Übernahme begutachten können. Wenn Sie zunächst nur sehen wollen, wie es um Ihren Store steht, können Sie ohne Installation den kostenlosen On-Page-Scanner auf accessifyai.de nutzen. Die App selbst finden Sie im Shopify App Store.
- Installieren Sie NVDA unter Windows oder bereiten Sie VoiceOver am Mac vor und stellen Sie die Sprechgeschwindigkeit niedrig ein.
- Üben Sie fünf Minuten lang die Tasten H, K, B, F, D, G und NVDA + F7 auf einer beliebigen Seite.
- Testen Sie die Startseite über Überschriften, Sprungbereiche, Grafiken, Links und Schaltflächen.
- Gehen Sie die Produktseite durch und prüfen Sie besonders Variantenauswahl und die Statusmeldung beim Hinzufügen zum Warenkorb.
- Prüfen Sie eigene Checkout-Felder samt Beschriftung und Fehlerbehandlung.
- Dokumentieren Sie jeden Befund mit Seite, NVDA-Ansage, Erwartung und WCAG-Kriterium.
- Planen Sie eine erneute Prüfung nach jedem Theme-Update und nach jeder neuen App-Installation, da beide neue Barrieren einführen können.
Weitere fachliche Vertiefung finden Sie in unserem Beitrag zur Tastaturbedienung im Shopify-Store und in der Anleitung zu Alternativtexten für Produktbilder.
Ihr eigener Durchlauf deckt bereits die gröbsten Barrieren auf und ist ein sinnvoller erster Schritt. Ein erfahrener Screenreader-Nutzer bedient die Sprachausgabe allerdings flüssiger und bemerkt feinere Probleme. Für einen ersten Befund genügt Ihr eigener Test, für ein belastbares Gesamtbild ist ein erfahrener Tester wertvoll.
NVDA arbeitet zuverlässig mit aktuellen Versionen von Firefox und Chrome zusammen. Verwenden Sie denselben Browser, den auch Ihre Kunden überwiegend nutzen, und prüfen Sie im Zweifel in mehr als einem Browser.
Im Lesemodus navigieren Sie mit Pfeiltasten und Sprungbefehlen wie H oder K durch den Inhalt. Im Fokusmodus geben Tastendrücke direkt an Formularfelder weiter, etwa zum Tippen in ein Textfeld. NVDA wechselt oft automatisch, manuell schalten Sie mit NVDA + Leertaste um.
Nein, beide ergänzen sich. Ein automatischer Scanner findet etwa fehlende Alternativtexte oder unbeschriftete Felder zuverlässig. Ob Ansagen in sinnvoller Reihenfolge erfolgen, ob eine Statusmeldung vorgelesen wird oder ob ein Overlay angekündigt wird, zeigt erst der manuelle Hörtest. Für ein vollständiges Bild brauchen Sie beides.
Nein. Kein einzelner Test und kein Werkzeug kann Rechtskonformität garantieren. Ein NVDA-Test prüft wichtige Kriterien wie WCAG 1.1.1, 1.3.1, 4.1.2 und 4.1.3, deckt aber nicht alle Anforderungen ab. Werkzeuge, auch AccessifyAI, helfen beim Finden und Beheben von Verstößen. Die rechtliche Verantwortung trägt nach § 8 BFSG der Händler.
Nach § 8 BFSG ist fortlaufende Konformität gefordert, nicht eine einmalige Prüfung. Jedes Theme-Update, jede eigene Section und jede neue App kann eine Barriere einführen. Eine erneute Prüfung nach jedem strukturellen Eingriff ist sinnvoll.
Ein manueller Screenreader-Test mit NVDA zeigt, ob sich Ihr Shopify-Store tatsächlich ohne Bildschirm bedienen lässt, und ergänzt damit automatische Werkzeuge um genau die Befunde, die diese nicht zuverlässig erfassen. Mit einer kleinen Auswahl an Tasten, vor allem H für Überschriften, D für Sprungbereiche, F für Formularfelder, B für Schaltflächen, G für Grafiken und NVDA + F7 für die Elementliste, gehen Sie Startseite, Produktseite und Checkout systematisch durch. Die häufigsten Shopify-Stolperstellen sind unbeschriftete Variantenauswahlen, eine stumme Bestätigung beim Hinzufügen zum Warenkorb, als Dateiname vorgelesene Produktbilder, namenlose Slider-Schaltflächen und Formularfelder ohne Beschriftung. Dokumentieren Sie jeden Befund mit Seite, tatsächlicher NVDA-Ansage, Erwartung und WCAG-Kriterium, immer im installierten Zustand und auf der aktuell ausgespielten Theme-Version. Über EN 301 549 v3.2.1 sind die geprüften Kriterien nach dem BFSG verbindlich, eine Konformitätsgarantie liefert der Test allein jedoch nicht.