So testen wir
AccessifyAI prüft einen Shopify-Shop anhand eines festen Regelsatzes. Diese Seite nennt jede Regel, das Erfolgskriterium der WCAG 2.2, unter dem sie meldet, wie sie in den Score eingeht und was sie nicht sehen kann. Sie richtet sich an Entwicklerinnen und Entwickler, Agenturen und alle, die abwägen, wie weit sie sich auf einen Scan verlassen können.
Zuletzt aktualisiert:
Der Scan testet 15 der 55 Erfolgskriterien der WCAG 2.2 auf den Stufen A und AA, einige davon nur teilweise, und meldet zwei Hinweise der Stufe AAA, die den Score nie senken. Seine Ergebnisse beschreiben, was die Regeln auf den erreichten Seiten gefunden haben. Sie sind keine Aussage über WCAG-Konformität und keine Bestätigung, dass ADA, EAA oder BFSG eingehalten werden.
Was der Scanner liest
Der Scanner ruft jede Seite per HTTP ab, so wie der Browser eines neuen Besuchers, und prüft das HTML, das der Shop schickt, mit Regeln für Shopify-Themes. Er führt kein JavaScript aus und stellt die Seite nicht dar. Er sieht das Markup, das Ihr Theme ausgibt, nicht das, was Skripte nach dem Laden ändern.
Er beginnt bei der angegebenen Adresse und folgt Links innerhalb desselben Shops. Der kostenlose Scan auf dieser Website liest 1 Seite. In der App liest ein Scan bis zu 10 Seiten im Plan Free, 50 in Basic und 500 in Pro. Feeds, Dateien, Kontoseiten und Rechtstexte überspringt er.
Ein neuer Besucher hat einen leeren Warenkorb und ist nicht angemeldet. Der Scanner sieht deshalb den leeren Warenkorb, den leeren Warenkorb-Einschub und den Header für abgemeldete Besucher. Für einen Shop hinter einer Passwortseite kann die App das Storefront-Passwort nutzen, das Sie eingeben.
Inhalte, die ein Browser nicht darstellt oder vor Hilfstechnologien verbirgt, überspringen die meisten Regeln, weil ein Screenreader sie auch nicht vorliest: Inhalte in noscript und template, Elemente mit dem Attribut hidden, Inline-Stile display:none oder visibility:hidden und Bereiche mit aria-hidden. Drei Regeln prüfen verborgene Elemente absichtlich: automatisch abgespielter Ton, doppelte IDs und fokussierbare Elemente mit aria-hidden.
Die Kriterien und die Regeln dahinter
Jedes Kriterium verweist auf die Erläuterung des W3C (englisch). Der Absatz darunter sagt, welchen Teil die Regeln erfassen. Die Regelnamen sind die aus dem Dashboard, gefolgt von der Gewichtung.
1.1.1 Nicht-Text-Inhalt
Stufe A. Erläuterung des W3C: 1.1.1
Prüft, ob Bilder und Symbole eine Textalternative haben und ob diese kein Dateiname und kein Platzhalterwort ist. Ob der Text das Bild richtig beschreibt oder ob ein Bild nur Dekoration ist, beurteilt ein Mensch.
- Foto hat keine Beschreibung (kritisch)Ein img-Element ohne alt-Attribut. Als dekorativ markierte Bilder (role="presentation", role="none" oder aria-hidden="true") und verborgene Bilder werden übersprungen; alt="" gilt als dekorativ.
- Foto-Beschreibung ist nur ein Dateiname (hoch)Ein Alt-Text, der nur „image“, „photo“, „picture“, „img“ oder „untitled“ lautet oder auf .jpg, .jpeg, .png, .gif, .webp oder .svg endet.
- Foto-Beschreibung ist zu lang (gering)Ein Alt-Text mit mehr als 125 Zeichen.
- Symbol hat keine Beschreibung (gering)Ein svg-Element außerhalb von Links, Buttons und benannten Bedienelementen, nicht mit aria-hidden="true" oder role="presentation" markiert, ohne aria-label, aria-labelledby oder title. Ein dekoratives Symbol braucht nur aria-hidden="true".
1.3.1 Info und Beziehungen
Stufe A. Erläuterung des W3C: 1.3.1
Prüft Überschriften, Formularbeschriftungen sowie die Landmarks für Hauptinhalt und Navigation im Markup. Tabellen, Listen, visuelle Gruppierung und Lesereihenfolge prüft der Scan nicht.
- Seite hat keine Hauptüberschrift (hoch)Eine Seite mit Überschriften, aber ohne h1.
- Seite hat mehr als eine Hauptüberschrift (gering)Mehr als eine sichtbare h1 auf einer Seite. Einmal pro Seite gemeldet.
- Überschriften in falscher Reihenfolge (hoch)Eine Überschrift, die mehr als eine Ebene unter der vorherigen liegt, etwa eine h4 direkt nach einer h2.
- Leere Überschrift auf der Seite (hoch)Eine sichtbare Überschrift ohne Text, aria-label, aria-labelledby, Bild-Alt oder SVG-Titel.
- Formularfeld ohne Label (kritisch)Ein input (außer hidden, submit, button, reset oder image) ohne label-Element, umschließendes label, aria-label, aria-labelledby oder title. Ein Platzhalter allein zählt nicht.
- Kommentarfeld ohne Label (kritisch)Eine textarea ohne label, aria-label, aria-labelledby oder title.
- Auswahlliste ohne Label (kritisch)Ein select ohne label, aria-label, aria-labelledby oder title. Das name-Attribut ist keine Beschriftung.
- Kein Hauptinhalt-Landmark (hoch)Eine vollständige Seite (title, Header oder Hauptbereich, schließendes body-Tag) ohne main-Element und ohne role="main".
- Menü nicht als Navigation gekennzeichnet (gering)Eine vollständige Seite mit einer Liste oder einem Header mit drei oder mehr Links, aber ohne nav-Element und ohne role="navigation".
1.4.2 Audio-Steuerelement
Stufe A. Erläuterung des W3C: 1.4.2
Prüft Video- und Audio-Elemente mit Autoplay. Ton, den ein Skript oder ein eingebetteter Player startet, sieht der Scan nicht.
- Video spielt beim Laden Ton ab (kritisch)Ein video- oder audio-Element mit autoplay, ohne muted und ohne controls. Verborgene Player zählen mit, weil ihr Ton trotzdem läuft.
1.4.3 Kontrast (Minimum)
Stufe AA. Erläuterung des W3C: 1.4.3
Prüft Text, dessen Farbe und Hintergrund beide im style-Attribut des Elements selbst stehen. Farben aus den Stylesheets des Themes, CSS-Variablen, Verläufe und Text auf Bildern misst der Scan nicht. Die meisten Kontrastprobleme eines Themes brauchen deshalb einen Kontrastprüfer und einen Menschen.
- Text zu blass zum Lesen (kritisch unter 3:1, sonst hoch)Text, dessen Inline-Farbe und -Hintergrund ein Verhältnis unter 4,5:1 ergeben, bei großem Text unter 3:1 (24px oder 18,66px fett; h1 bis h3 mit den Standardgrößen des Browsers). Kritisch unter 3:1, sonst hoch.
1.4.4 Textgröße ändern
Stufe AA. Erläuterung des W3C: 1.4.4
Prüft das Viewport-Meta-Tag auf Einstellungen, die das Zoomen mit zwei Fingern sperren. Ob die Seite bei 200 % noch funktioniert, prüft ein Mensch.
- Kundinnen und Kunden können Ihren Shop nicht zoomen (kritisch)Ein Viewport-Meta-Tag mit user-scalable=no oder 0 oder mit maximum-scale unter 2.
2.4.1 Blöcke umgehen
Stufe A. Erläuterung des W3C: 2.4.1
Prüft auf Seiten mit Header oder Navigation, ob ein Sprunglink zum Hauptinhalt existiert, und ob eingebettete Frames einen Titel haben.
- Kein Skip-Menu-Link (hoch)Eine Seite mit Navigation oder Header-Links, bei der keiner der ersten zehn seiteninternen Links auf den Hauptinhalt zeigt.
- Eingebetteter Inhalt hat kein Label (kritisch)Ein sichtbarer iframe ohne title oder mit leerem title.
2.4.2 Seite mit Titel
Stufe A. Erläuterung des W3C: 2.4.2
Prüft, ob die Seite ein nicht leeres title-Element hat. Ob der Titel die Seite beschreibt, beurteilt ein Mensch.
- Browser-Tab hat keinen Titel (kritisch)Eine Seite ohne title-Element oder mit leerem.
2.4.3 Fokus-Reihenfolge
Stufe A. Erläuterung des W3C: 2.4.3
Prüft auf positive tabindex-Werte, die die Tab-Reihenfolge umstellen. Ob der Fokus sinnvoll wandert, auch in Menüs, Einschübe und Dialoge, zeigt nur ein Tastaturtest.
- Tab-Reihenfolge durcheinander (hoch)Ein dargestelltes Element mit einem tabindex über 0.
2.4.4 Linkzweck (im Kontext)
Stufe A. Erläuterung des W3C: 2.4.4
Prüft auf Links ganz ohne zugänglichen Namen. Ob ein benannter Link sagt, wohin er führt, beurteilt ein Mensch.
- Link ohne Text (kritisch)Ein Link ohne Text, aria-label, aria-labelledby oder title und ohne Bild-Alt, benanntes Kindelement oder SVG-Titel darin.
2.4.11 Fokus nicht verdeckt (Minimum)
Stufe AA, neu in WCAG 2.2. Erläuterung des W3C: 2.4.11
Markiert fixierte oder klebende Elemente am oberen Seitenrand als prüfenswert. Ob sie ein fokussiertes Element verdecken, zeigt nur ein Tastaturtest mit Scrollen.
- Sticky Header könnte ein fokussiertes Feld verdecken, bitte manuell prüfen (gering)Ein Element, dessen style-Attribut position fixed oder sticky mit top zwischen 0 und 80px setzt.
- Sticky Element verdeckt den Fokus (gering)Eine Regel in einem style-Block der Seite mit derselben fixierten oder klebenden Position am oberen Rand. Verlinkte Stylesheet-Dateien liest der Scan nicht.
2.5.8 Zielgröße (Minimum)
Stufe AA, neu in WCAG 2.2. Erläuterung des W3C: 2.5.8
Misst Bedienelemente, deren Breite und Höhe in Pixeln im eigenen style-Attribut stehen. Größen aus Stylesheets misst der Scan nicht.
- Button zu klein zum Antippen (hoch)Ein Button, Link, Eingabefeld oder Element mit Button-Rolle, dessen Inline-Breite und -Höhe samt Innenabstand und Rahmen unter 24 mal 24 CSS-Pixeln liegen. Einfache Links in Absätzen und Listeneinträgen sind ausgenommen.
3.1.1 Sprache der Seite
Stufe A. Erläuterung des W3C: 3.1.1
Prüft, ob das html-Element ein lang-Attribut hat. Ob der Wert zur Sprache der Seite passt, beurteilt ein Mensch.
- Sprache der Seite nicht gesetzt (kritisch)Ein html-Element ohne lang-Attribut.
3.2.1 Bei Fokus
Stufe A. Erläuterung des W3C: 3.2.1
Prüft auf Elemente, die beim Laden den Fokus an sich ziehen. Änderungen, die ein Skript beim Fokussieren auslöst, sieht der Scan nicht.
- Seite zieht beim Laden den Fokus (gering)Ein dargestelltes Element mit dem Attribut autofocus.
3.3.8 Barrierefreie Authentifizierung (Minimum)
Stufe AA, neu in WCAG 2.2. Erläuterung des W3C: 3.3.8
Erkennt reCAPTCHA- und hCaptcha-Widgets in Login- oder Kontoformularen. Andere Rätsel und die Frage, ob es eine Alternative gibt, beurteilt ein Mensch.
- CAPTCHA blockiert einige Kundinnen und Kunden (hoch)Ein reCAPTCHA- oder hCaptcha-Widget in einem Formular mit Passwortfeld oder mit Login-, Anmelde- oder Kontobezug. CAPTCHAs in Kontakt-, Newsletter- und Bewertungsformularen meldet der Scan nicht.
4.1.2 Name, Rolle, Wert
Stufe A. Erläuterung des W3C: 4.1.2
Prüft Namen von Buttons, Button-Eingaben und Frames, klickbare Elemente ohne Rolle, ARIA-Verweise, versteckte fokussierbare Elemente und doppelte IDs. Eigene Widgets mit ARIA-Rollen und Zustände wie aufgeklappt oder ausgewählt prüft der Scan nicht.
- Eingebetteter Inhalt hat kein Label (kritisch)Ein sichtbarer iframe ohne title oder mit leerem title.
- Button ohne Text (kritisch)Ein button-Element ohne Text, aria-label, aria-labelledby oder title und ohne Bild-Alt oder SVG-Titel darin.
- Klickbares Element nicht als klickbar markiert (kritisch)Ein div oder span mit onclick-Attribut und ohne Rolle. Klick-Handler, die ein Skript hinzufügt, sieht der Scan nicht.
- Defekte Barrierefreiheits-Verknüpfung (hoch)Ein aria-labelledby oder aria-describedby, das auf eine auf der Seite fehlende ID zeigt. Einmal pro fehlender ID gemeldet.
- Verstecktes Element ist per Tabulator erreichbar (kritisch)Ein fokussierbares Element (Link mit href, Button, Formularfeld oder tabindex ab 0), das selbst aria-hidden="true" trägt. Deaktivierte Elemente und ein negativer tabindex sind ausgenommen.
- Such- oder Absende-Button ohne Label (kritisch)Ein input vom Typ button, image, submit oder reset ohne verwendbaren Namen. Submit und Reset ohne value-Attribut erhalten den Standardnamen des Browsers und bestehen.
- Zwei Elemente teilen dieselbe ID (hoch)Dieselbe ID an mehr als einem Element, verborgene eingeschlossen, weil Labels und ARIA-Verweise dann auf das falsche zeigen. Einmal pro ID gemeldet.
Zwei Hinweise der Stufe AAA
Diese Befunde erscheinen im Bericht als Hinweise. Sie gehören zur Stufe AAA, die EAA und BFSG nicht verlangen, und ändern den Score nicht.
2.4.9 Linkzweck (nur Link)
Stufe AAA. Erläuterung des W3C: 2.4.9
Ein Linktext wie „Mehr lesen“ erscheint als Hinweis. Im Kontext, etwa in einer Karte, deren Überschrift den Artikel nennt, kann er 2.4.4 trotzdem erfüllen.
- Generischer Linktext wie Hier klicken oder Mehr lesen (gering)Ein Link, dessen ganzer Name „click here“, „here“, „read more“, „more“, „link“ oder „learn more“ lautet. AAA-Hinweis, zählt nicht zum Score.
3.2.5 Änderung auf Anfrage
Stufe AAA. Erläuterung des W3C: 3.2.5
Ein Link, der ohne Hinweis einen neuen Tab öffnet, erscheint als Hinweis.
- Link öffnet stillschweigend einen neuen Tab (AAA) (gering)Ein Link mit target="_blank" ohne Text „new window“ oder „new tab“ und ohne visuell verborgenen Hinweis. AAA-Hinweis, zählt nicht zum Score.
Gewichtung und Score
Jede Regel hat eine feste Gewichtung, siehe oben. Der Score beginnt bei 100, und jede Regel, die scheitert, zieht einmal 10 Punkte ab, wenn sie kritisch ist, 5 bei hoch und 1 bei gering. Jedes weitere Element, an dem dieselbe Regel scheitert, zieht 20 % davon zusätzlich ab, höchstens das 2-Fache der Punkte der Regel, sodass eine Regel nie mehr als das 3-Fache ihrer Punkte abzieht und eine einzelne Vorlagen-Gewohnheit wie eine doppelte ID den Score nicht allein leeren kann. Dieselbe Regel am selben Element auf vielen Seiten zählt einmal, weil sie eine Korrektur in einer Vorlage ist. Der Score sinkt höchstens bis 0, und Hinweise der Stufe AAA ziehen nichts ab. Diese Regel gilt seit dem 30. September 2026; frühere Scans wurden danach neu berechnet.
Das Dashboard beginnt mit der Zahl der 15 getesteten Kriterien ohne offenen Befund und zeigt den Score darunter.
Der Score fasst zusammen, was dieser Scan auf den erreichten Seiten gefunden hat. Er ist kein Anteil an der WCAG, und 100 bedeutet weder WCAG-Konformität noch die Einhaltung eines Gesetzes.
Geplante Scans vergleichen jedes Ergebnis mit dem vorherigen. Ein Rückgang um mehr als 5 Punkte oder ein neuer kritischer Befund wird als Rückschritt gemeldet.
Bekannte Grenzen
- Kein JavaScript. Einschübe, Dialoge, Filter, Variantenauswahl und alles, was ein Skript aufbaut, prüft der Scan nur so weit, wie ihr Markup im Quelltext der Seite steht. Fokuswechsel, Tastaturfallen und Live-Ansagen testet er nicht.
- Keine Darstellung. Kontrast und Zielgröße misst der Scan nur aus Inline-Stilen. Farben und Größen aus den Stylesheet-Dateien des Themes, Hover- und Fokuszustände und Layouts bei anderen Bildschirmbreiten sieht er nicht.
- Markup, nicht Bedeutung. Die Regeln prüfen, ob Namen, Beschriftungen und Alt-Texte vorhanden und keine Platzhalter sind. Ob sie stimmen, prüfen sie nicht.
- Eigene Widgets. ARIA-Rollen wie radio, tab, listbox oder menu und Zustände wie aria-expanded oder aria-checked prüft der Scan nicht.
- Nicht erreichte Seiten und Zustände. Seiten über dem Limit des Plans, Seiten hinter einem Kundenlogin, ein gefüllter Warenkorb und Fehlermeldungen nach dem Absenden eines Formulars werden nicht gescannt.
- Eingebettete Frames. Inhalte in iframes, etwa Videos, Karten und manche App-Widgets, scannt er nicht. Geprüft wird nur der Titel des Frames.
- Fehler. Kann eine Regel eine Barriere nicht sicher von korrektem Markup unterscheiden, bleibt sie still statt zu raten. Sie kann trotzdem in beide Richtungen irren.
Was immer ein Mensch prüfen muss
Das Dashboard nennt neben dem Score sechs Prüfungen, die ein Scan nicht leisten kann. Ausgewählt sind sie nach dem, was in Shopify-Shops am häufigsten schiefgeht:
- Ob jeder Alt-Text sagt, wozu das Bild da ist, nicht nur, was es zeigt
- Stöbern, in den Warenkorb legen und bezahlen nur mit der Tastatur, mit stets sichtbarem Fokus
- Kontrast von Text auf Fotos und Bannern sowie von Hover- und Fokuszuständen
- Untertitel und Transkripte für Video und Audio
- Seiten bei 400 % Zoom und auf einem schmalen Handybildschirm, ohne seitliches Scrollen
- Fehlermeldungen in Formularen: klar, direkt am Feld und mit einem Hinweis zur Korrektur
Die übrigen Kriterien der Stufen A und AA testet der Scan gar nicht. Mehrere davon entscheiden, ob jemand kaufen kann: Tastaturbedienung und Tastaturfallen (2.1.1, 2.1.2), sichtbarer Fokus (2.4.7), Umbruch bei schmaler Darstellung (1.4.10), Kontrast von Bedienelementen und Fokusrahmen (1.4.11), Fehlermeldungen (3.3.1) und Statusmeldungen wie Änderungen im Warenkorb (4.1.3). Diese Punkte findet ein Mensch mit Tastatur und Screenreader.
KI-Entwürfe für Alt-Texte
In Basic und Pro kann die App Alt-Texte für Produktbilder entwerfen. Ein Entwurf ist ein Vorschlag: Sie lesen ihn, bearbeiten ihn und übernehmen ihn, und der ersetzte Text bleibt erhalten. In Ihren Shop wird erst etwas geschrieben, wenn Sie übernehmen.
In Basic entsteht der Entwurf aus Titel und Beschreibung des Produkts, ohne das Foto anzusehen. In Pro geht das Foto selbst an das Modell, sodass der Entwurf beschreibt, was das Bild zeigt. Entwürfe sind auf 125 Zeichen begrenzt.
Die KI weiß nicht, wozu ein Bild auf der Seite steht, was Kundinnen und Kunden daraus brauchen oder ob es nur Dekoration ist. Dieses Urteil bleibt auf der Liste der Handprüfungen oben.
Welche Dienste diese Daten verarbeiten, steht in der Datenschutzerklärung.
Änderungsprotokoll
- Der Score zählt jede Regel, die scheitert, einmal, mit einem begrenzten Anteil für jedes weitere Element, an dem sie scheitert, sodass eine einzelne Vorlagen-Gewohnheit wie eine doppelte ID den Score nicht mehr leert. Frühere Scans wurden mit derselben Regel neu berechnet.
- Diese Seite veröffentlicht, mit jeder Regel, ihrem Kriterium, ihrer Gewichtung und ihren Grenzen.
- Das Dashboard beginnt jetzt mit der Zahl der bestandenen unter den 15 getesteten Kriterien, markiert die drei in WCAG 2.2 neuen Kriterien, nennt die Prüfungen, die ein Mensch vornimmt, und bezeichnet KI-Alt-Texte als Entwurf.
- Ein Scan, der keine Seite erreicht, nennt jetzt den Grund: Passwortseite, falsches Passwort oder Shop nicht erreichbar. Stoppt das Seitenlimit des Plans einen Scan, nennt der Bericht mindestens die Zahl der ungelesenen Seiten.
- Eine gemeinsame Längengrenze für Alt-Texte, 125 Zeichen, für Scanner, Generator und Editor.
- Fehlalarme entfernt, jeder vor der Korrektur nachgestellt: „Mehr lesen“-Links von 2.4.4 (A) zu einem Hinweis nach 2.4.9 (AAA); reine Symbole von kritisch auf gering; Kontrastwerte aus color-mix() und ähnlichen Funktionen übersprungen statt falsch gelesen; rem, em und Standardgrößen von Überschriften für die Schwelle für großen Text; Innenabstand und Rahmen bei der Zielgröße mitgezählt; deaktivierte versteckte Bedienelemente, textareas mit title und fixierte Fußzeilen nicht mehr gemeldet; die Regel für das Navigations-Landmark auf Seiten mit Menü beschränkt.
- Inhalte in noscript und unter verborgenen Elternelementen erzeugen keine Befunde mehr. Ein Logo-Bild mit Alt-Text zählt als Überschriftentext. Absende-Buttons ohne value-Attribut bestehen mit dem Standardnamen des Browsers. Die Erkennung von Sprunglinks prüft die ersten zehn seiteninternen Links, und nur auf Seiten mit etwas zum Überspringen. Ein defekter ARIA-Verweis, der sich in jeder Produktkarte wiederholt, wird einmal gemeldet. Die Zoom-Regel erkennt maximum-scale=1 am Ende des Tags und user-scalable=0. Shops, die auf einen anderen Host umleiten, werden über die erste Seite hinaus gescannt.
Fragen und Korrekturen
Meldet eine Regel etwas, das keine Barriere ist, oder übersieht sie eine, die sie finden sollte, schreiben Sie uns mit der Adresse der Seite und dem Befund. Änderungen an Regeln stehen im Protokoll oben.
Der kostenlose Scan auf der Startseite liest eine Seite und zeigt die Befunde dieser Regeln. Kostenlosen Scan starten