Bild ohne alt-Attribut
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
11 Vorkommen, gefunden auf: Startseite, Produktseite
- 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
img.running-content-image__imgimg
Link ohne Namen
WCAG 2.2 2.4.4 Linkzweck (im Kontext), Stufe A
9 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
Auswahlliste ohne Beschriftung
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
4 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- 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.js-predictive-search-product-type
Schaltfläche ohne Namen
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
2 Vorkommen, gefunden auf: Kollektionsseite
- Warum es für Kundinnen und Kunden zählt
- Man hört „Schaltfläche“, ohne zu erfahren, ob sie ein Menü schließt, etwas in den Warenkorb legt oder die Suche öffnet.
- Wo es in einem Shopify-Theme meist steckt
- Schaltflächen nur mit Icon: Schließen von Drawern, Pfeile von Slidern, Plus und Minus bei der Menge, Menü- und Suchschalter.
- Richtung für eine Korrektur
- Geben Sie der Schaltfläche ein aria-label oder einen visuell verborgenen Text und blenden Sie das Icon darin mit aria-hidden="true" aus.
- Beispiele aus dem Demo-Shop
Dieselbe id kommt mehrfach vor
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
34 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite
- 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
"productQuickViewForm-template--22967009804592__product_lists_nKyC7H-8510035919152", 2×"productQuickViewForm-template--22967009804592__product_lists_nKyC7H-8510035427632", 2×"productQuickViewForm-template--22967009804592__product_lists_nKyC7H-8510035198256", 2×
Alt-Text ist ein Dateiname oder ein Platzhalterwort
WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A
19 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- Warum es für Kundinnen und Kunden zählt
- Wer „IMG_2841.jpg“ oder „Bild“ vorgelesen bekommt, erfährt nichts über das Produkt.
- Wo es in einem Shopify-Theme meist steckt
- Meist Inhalt: Alt-Texte, die im Shopify-Admin für Produktmedien und Sektionsbilder eingetragen sind. Manche Themes greifen bei leerem Alt-Text auf den Dateinamen zurück.
- Richtung für eine Korrektur
- Beschreiben Sie das Bild im Admin, und lassen Sie das Theme bei leerem Alt-Text auf den Produkt- oder Sektionstitel zurückgreifen statt auf den Dateinamen.
- Beispiele aus dem Demo-Shop
img.h-100img.media-mbimg.js-image-lazy
aria-labelledby oder aria-describedby verweist auf ein fehlendes Element
WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A
10 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 → "sectionHeading-0aeee28410c0"aria-labelledby → "sectionHeading-fcb23f9ad06d"aria-labelledby → "sectionHeading-02e09aebf718"
Leere Überschrift
WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A
4 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite
- 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
6 Vorkommen, gefunden auf: Produktseite
- 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