Für Screenreader verborgen, aber per Tab erreichbar
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
18 Vorkommen, gefunden auf: Kollektionsseite
- Warum es für Kundinnen und Kunden zählt
- Wer die Tastatur nutzt, landet auf einem Element, das der Screenreader nicht ansagt.
- Wo es in einem Shopify-Theme meist steckt
- Geklonte Karussell-Slides, per aria-hidden verborgene Drawer und Mobilmenüs, Schnellkauf-Schaltflächen in verborgenen Slides.
- Richtung für eine Korrektur
- Wenn ein Bereich mit aria-hidden verborgen wird, nehmen Sie seine Bedienelemente mit tabindex="-1" oder dem Attribut inert auch aus der Tab-Reihenfolge.
- Beispiele aus dem Demo-Shop
input#Sort-fake-1-template--22668261458221__collection-maininput#Sort-fake-2-template--22668261458221__collection-maininput#Sort-fake-3-template--22668261458221__collection-main
Klickbares Element, das weder Schaltfläche noch Link ist
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
7 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Ein div oder span mit Klick-Handler ist mit der Tab-Taste nicht erreichbar und wird nicht als klickbar angesagt.
- Wo es in einem Shopify-Theme meist steckt
- Eigene Farbfelder, Akkordeons, Tabs und Schnellansicht-Auslöser aus div- oder span-Elementen.
- Richtung für eine Korrektur
- Verwenden Sie für Aktionen ein button-Element und für Navigation einen Link.
- Beispiele aus dem Demo-Shop
Formularfeld ohne Beschriftung
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
5 Vorkommen, gefunden auf: Kollektionsseite, Produktseite
- Warum es für Kundinnen und Kunden zählt
- Ohne Beschriftung sagt ein Screenreader nur „Eingabefeld“. Man erfährt nicht, ob E-Mail-Adresse, Menge oder Rabattcode gemeint ist.
- Wo es in einem Shopify-Theme meist steckt
- Newsletter-Anmeldung im Footer, Suchfeld im Header, Mengenfelder im Warenkorb, Preisfilter auf Kollektionsseiten.
- Richtung für eine Korrektur
- Verbinden Sie jedes Feld über for und id mit einem label-Element (es darf visuell verborgen sein) oder geben Sie ihm ein aria-label. Ein Platzhalter ersetzt keine Beschriftung.
- Beispiele aus dem Demo-Shop
input#min-price (type="number")input#max-price (type="number")input#drawer-min-price (type="number")
Bild ohne alt-Attribut
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
1 Vorkommen, gefunden auf: Startseite
- Warum es für Kundinnen und Kunden zählt
- Ein Screenreader überspringt das Bild oder liest den Dateinamen vor. Blinde Kundinnen und Kunden erfahren nicht, was das Produktfoto zeigt.
- Wo es in einem Shopify-Theme meist steckt
- Snippets für Produktkarten und Produktmedien, Bildbanner, Slideshow-Sektionen und Bild-mit-Text-Sektionen, manchmal auch das Logo im Header.
- Richtung für eine Korrektur
- Geben Sie den beim Bild gespeicherten Alt-Text aus, mit dem Produkt- oder Sektionstitel als Ersatz, und versehen Sie rein dekorative Bilder mit einem leeren alt="".
- Beispiele aus dem Demo-Shop
Dieselbe id kommt mehrfach vor
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
138 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Beschriftungen, Fehlermeldungen und ARIA-Verweise können auf das falsche Element zeigen, sodass ein Feld oder Bedienelement seinen Namen verliert.
- Wo es in einem Shopify-Theme meist steckt
- Sektionen, die doppelt auf einer Seite stehen, etwa Desktop- und Mobil-Header, Warenkorb-Drawer und Warenkorbseite, oder Länder- und Sprachauswahl in Header und Footer.
- Richtung für eine Korrektur
- Machen Sie erzeugte ids eindeutig, zum Beispiel indem Sie die Sektions-id anhängen.
- Beispiele aus dem Demo-Shop
"locale_code", 3×"HeaderDrawer-fresh-foods-dairy-eggs-cheese", 2×"predictive-search-results-list", 2×
aria-labelledby oder aria-describedby verweist auf ein fehlendes Element
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
4 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Das Element sollte Namen oder Beschreibung von einem anderen Element übernehmen, das nicht auf der Seite ist. Der Screenreader hat nichts vorzulesen.
- Wo es in einem Shopify-Theme meist steckt
- Produktkarten, die auf Sale- oder Ausverkauft-Badges verweisen, die nur manchmal erscheinen, Fehlermeldungen in Formularen, Dialoge.
- Richtung für eine Korrektur
- Geben Sie den Verweis nur aus, wenn das Zielelement vorhanden ist, oder geben Sie das Zielelement immer aus.
- Beispiele aus dem Demo-Shop
aria-labelledby → "promoted-products"
Überschriftenebenen überspringen eine Stufe
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
1 Vorkommen, gefunden auf: Startseite
- Warum es für Kundinnen und Kunden zählt
- Wer sich über Überschriften durch eine Seite bewegt, erwartet eine saubere Verschachtelung. Ein Sprung von h2 auf h4 wirkt, als fehle etwas.
- Wo es in einem Shopify-Theme meist steckt
- Sektionsüberschriften, Titel in Produktkarten und Spaltenüberschriften im Footer, deren Ebene nach Schriftgröße gewählt wurde.
- Richtung für eine Korrektur
- Wählen Sie die Ebene nach dem Aufbau der Seite und steuern Sie die Größe über eine CSS-Klasse.
- Beispiele aus dem Demo-Shop
Seite ohne h1-Überschrift
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
1 Vorkommen, gefunden auf: Kollektionsseite
- Warum es für Kundinnen und Kunden zählt
- Wer einen Screenreader nutzt, springt oft zuerst zur Überschrift erster Ebene, um zu erfahren, worum es auf der Seite geht.
- Wo es in einem Shopify-Theme meist steckt
- Der Haupttitel einer Vorlage: Kollektionsbanner, Produkttitel in der Hauptproduktsektion, Warenkorbtitel. Manche Vorlagen gestalten den Titel wie eine Überschrift, ohne ein h1 zu verwenden.
- Richtung für eine Korrektur
- Geben Sie den Haupttitel jeder Vorlage als genau ein h1 aus.
Icon ohne Textalternative und ohne Kennzeichnung als Dekoration
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
25 Vorkommen, gefunden auf: Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Trägt das Icon eine Bedeutung, etwa eine Zahlungsart oder „kostenloser Versand“, fehlt sie im Screenreader. Ist es Dekoration, sollte es für Screenreader verborgen sein.
- Wo es in einem Shopify-Theme meist steckt
- Icon-Snippets, Zahlungs-Icons im Footer, Vertrauens- und Feature-Icons.
- Richtung für eine Korrektur
- Verbergen Sie dekorative Icons mit aria-hidden="true". Bedeutungstragende Icons bekommen role="img" und ein aria-label oder ein title-Element.
- Was der Test sehen kann
- Der Test kann dekorative und bedeutungstragende Icons nicht unterscheiden. Jeder dieser Befunde braucht einen kurzen Blick.
- Beispiele aus dem Demo-Shop
Menü nicht als Navigation ausgezeichnet
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
1 Vorkommen, gefunden auf: Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Wer einen Screenreader nutzt, kann nicht direkt zum Menü springen.
- Wo es in einem Shopify-Theme meist steckt
- Header-Menü und Footer-Menüs.
- Richtung für eine Korrektur
- Umschließen Sie jedes Menü mit einem nav-Element und benennen Sie es mit aria-label, wenn es mehrere gibt.