Link ohne Namen
WCAG 2.2 2.4.4 Linkzweck (im Kontext), Stufe A
76 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Ein Screenreader sagt nur „Link“, man erfährt nicht, wohin er führt.
- Wo es in einem Shopify-Theme meist steckt
- Icon-Links im Header (Konto, Warenkorb), Social-Media-Icons im Footer, Links nur aus einem Bild auf Produktkarten und Kollektionskacheln.
- Richtung für eine Korrektur
- Geben Sie Icon-Links einen visuell verborgenen Text oder ein aria-label, zum Beispiel „Warenkorb“ oder „Instagram“. Bei einem Bildlink bekommt das Bild einen Alt-Text.
- Beispiele aus dem Demo-Shop
a.icona.small-block-topa.logo-list-block
Bild ohne alt-Attribut
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
73 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- 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
imgimg.desktop-only-mediaimg.loader-target
Klickbares Element, das weder Schaltfläche noch Link ist
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
13 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
div#block-template--19306870014233__26b67f67-cbc4-447f-b308-ff82b4953c74-1686433379655462fe-2div#block-41a7a086-72e1-41dd-a950-33b6c4358f31div#block-template--18194487083289__067e8ff0-4076-4e93-8118-d38b0bf41e6e-1678466762b1d973a2-2
Auswahlliste ohne Beschriftung
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
6 Vorkommen, gefunden auf: Startseite, Produktseite
- Warum es für Kundinnen und Kunden zählt
- Wer die Seite nicht sieht, weiß nicht, ob die Liste Größe, Farbe, Sortierung oder Land auswählt.
- Wo es in einem Shopify-Theme meist steckt
- Variantenauswahl auf der Produktseite, Sortierung auf Kollektionsseiten, Länder- und Sprachauswahl.
- Richtung für eine Korrektur
- Benennen Sie jede Auswahlliste mit einem label-Element (for und id) oder einem aria-label wie „Größe“ oder „Sortieren nach“.
- Beispiele aus dem Demo-Shop
select#option1select#option2select.barracuda
Dieselbe id kommt mehrfach vor
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
21 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
"localization_form", 2×"-1", 2×"-2", 2×
Kein Link zum Überspringen
WCAG 2.2 2.4.1 Blöcke umgehen, Stufe A
4 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Wer die Tastatur nutzt, muss auf jeder Seite durch Header und Menü tabben, bevor der Inhalt kommt.
- Wo es in einem Shopify-Theme meist steckt
- Direkt nach dem öffnenden body-Tag in layout/theme.liquid.
- Richtung für eine Korrektur
- Machen Sie „Zum Inhalt springen“ zum ersten fokussierbaren Link, der auf das main-Element zeigt und bei Fokus sichtbar wird.
Seite ohne h1-Überschrift
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
3 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Warenkorbseite
- 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.
Überschriftenebenen überspringen eine Stufe
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
2 Vorkommen, gefunden auf: Startseite, Produktseite
- 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
Leere Ü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
- Ein Screenreader kündigt eine Überschrift an, in der nichts steht.
- Wo es in einem Shopify-Theme meist steckt
- Im Theme-Editor leer gelassene Überschriften-Blöcke oder Überschriften, die nur ein Icon enthalten.
- Richtung für eine Korrektur
- Geben Sie das Überschriften-Tag nicht aus, wenn die Einstellung leer ist.
- Beispiele aus dem Demo-Shop
Icon ohne Textalternative und ohne Kennzeichnung als Dekoration
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
35 Vorkommen, gefunden auf: Startseite, Kollektionsseite, 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