Korrekturen zur Barrierefreiheit im Code Ihres Themes für Shopify

Ein Layout, dessen <html>-Element kein lang-Attribut, ein leeres oder ein ungültiges hat, erhält die Sprache, in der Ihr Shop gerade angezeigt wird, sodass Screenreader die Seite in der richtigen Sprache vorlesen. Wo das Theme die eigene Sprache einer Seite bereits in einem Metafeld ablegt, zum Beispiel bei deutschen Rechtstexten in einem englischen Shop, verwendet das Layout dieses Metafeld, wenn es gesetzt ist. Ohne ein solches Feld rät das Rezept die Sprache einer Seite nicht.

Ein Skip-Link wird zum ersten Element jeder Seite. Wo das Theme für ihn noch keinen Text hat, lautet er auf Deutsch „Direkt zum Inhalt“ und auf Englisch „Skip to content“. Er bleibt verborgen, bis jemand ihn mit der Tastatur erreicht, und führt zum Hauptinhalt, der als Hauptbereich der Seite ausgezeichnet wird. Navigationsbereiche, die auf derselben Seite vorkommen, erhalten unterschiedliche Namen, etwa „Main menu“, „Footer menu“ oder „Breadcrumbs“, und Inhalt außerhalb aller Seitenbereiche, etwa eine Ankündigungsleiste, wird zu einer benannten Region. Ein vorhandener Skip-Link, der ins Leere zeigt, wird auf den Hauptinhalt gerichtet. Welche dieser Änderungen vorgenommen werden, hängt davon ab, was der Scan gefunden hat.

Jedes Layout, dessen <title> fehlt, leer ist oder auf jeder Seite derselbe feste Text ist, erhält einen Titel, der aus den Variablen von Shopify aufgebaut wird. Hat Ihr Haupt-Layout bereits einen Titel, der die Seite benennt, erhalten die anderen Layouts denselben. Andernfalls enthält der Titel den Seitentitel, die Seitennummer einer mehrseitigen Liste und den Namen des Shops, wobei das Wort für „Seite“ über die Sprachdateien des Themes übersetzt wird.

Eine Überschrift, die eine Ebene überspringt, etwa ein h4 direkt nach einem h2, erhält in der Section-Datei, in der sie steht, die nächste Ebene unterhalb der vorangehenden Überschrift. Wo das Theme Überschriften nach ihrer Ebene gestaltet, bewahrt eine kleine Style-Regel das bisherige Aussehen der Überschrift. Auf einer Seite ohne Hauptüberschrift wird das Element, das schon wie ihr Titel aussieht, zum h1 gemacht; auf der Startseite ist das die eigene Option des Themes, das Logo als h1 anzuzeigen. Hat eine Seite kein solches Element, fügt das Rezept keine verborgene Überschrift hinzu, weil das eine Inhaltsentscheidung ist.

Das Haupt-Stylesheet erhält einen Fokusrahmen für die Tastaturbedienung: 2 Pixel breit, durchgezogen und 2 Pixel vom Element entfernt, in der Akzentfarbe Ihres Themes (oder in seiner Textfarbe oder in Schwarz oder Weiß, wo das Theme keine Akzentfarbe hat), im selben Farbton so weit aufgehellt oder abgedunkelt, bis er gegenüber dem Seitenhintergrund einen Kontrast von mindestens 3:1 hat. Regeln des Themes, die den Fokusrahmen sonst weiterhin ausblenden würden, verlieren ihr outline: none, außer sie zeigen den Fokus auf andere Weise, etwa durch einen Rand oder einen Schatten. Der Fokusrahmen hat eine einzige Farbe für das ganze Theme. Auf Abschnitten mit dunklem Farbschema braucht er deshalb unter Umständen eine hellere Farbe; das prüft Ihr Entwicklungsteam in der Vorschau.

Ein tabindex größer als 0 zieht ein Element an den Anfang der Tastaturreihenfolge. Das Rezept entfernt ihn bei Links, Schaltflächen, Formularfeldern und anderen Elementen, die ohnehin den Fokus erhalten können, und setzt ihn bei anderen Elementen auf 0, sodass sie erreichbar bleiben, während die Tab-Taste der Reihenfolge der Seite folgt. Ein tabindex, den der Template-Code des Themes schreibt, bleibt einem Menschen überlassen. Das Rezept behandelt außerdem die Befunde der Prüfung der Fokusreihenfolge vs-focus-order, die einen tabindex größer als 0 betreffen; der Rest dieser Prüfung bleibt MANUAL.

Anklickbare Elemente, die nur mit der Maus funktionieren, etwa die Punkte einer Slideshow oder die Auswahlmöglichkeiten in einem Cookie-Banner, die aus <div>- oder <span>-Elementen gebaut sind, werden zu echten <button>-Elementen. Jede Klasse und jedes Attribut bleibt erhalten, sodass das Skript des Themes weiter funktioniert, und die Eingabetaste und die Leertaste bewirken nun, was ein Klick bewirkt. Eine Schaltfläche ohne Namen erhält einen aus ihrem Zweck, zum Beispiel „Load slide 2 of 3“, und ein kleines Style-Reset bewahrt ihr Aussehen. Ein Element, auf das kein Skript reagiert oder dessen Zweck unklar ist, bleibt unverändert.

Das Rezept entfernt user-scalable=no und jedes maximum-scale unter 5 aus den Viewport-Tags in den Liquid-Dateien des Themes, sodass Besucherinnen und Besucher Ihren Shop mit zwei Fingern bis auf 500 % vergrößern können. Die übrigen Viewport-Einstellungen bleiben genau so, wie sie waren. Eine Zoombegrenzung, die der Template-Code des Themes setzt, bleibt einem Menschen überlassen.

Bedienelemente, die der Scan als zu klein befunden hat, etwa Icons im Header, Farbfelder oder Mengenschaltflächen, erhalten im Haupt-Stylesheet eine Mindestgröße von 24 × 24 Pixel, angesprochen über ihre Klasse. Die Icons darin behalten ihre Größe. Ein Link oder ein anderes Element, das das Theme inline lässt, wird auf inline-flex gesetzt, mit zentriertem Icon, weil Inline-Elemente eine Mindestgröße ignorieren.

Besteht Text die Kontrastprüfung nicht und ist seine Farbe an einer einzigen Stelle definiert, wird diese Farbe auf die nächste hellere oder dunklere Abstufung desselben Farbtons gesetzt, die gegenüber jedem Hintergrund, den der Scan für sie gemeldet hat, den erforderlichen Kontrast erreicht. Die Stelle kann die Stylesheet-Regel sein, die den Text gestaltet, oder eine CSS-Variable oder eine Farbeinstellung in config/settings_data.json, die sonst nichts im Theme verwendet. Eine Farbe, die in Liquid berechnet oder mehrfach definiert wird, bleibt einem Menschen überlassen, ebenso eine gemeinsam genutzte Farbe, weil eine Änderung Farbpaare beträfe, die der Scan nicht gemessen hat.

Ist das Gerät einer Besucherin oder eines Besuchers auf „Bewegung reduzieren“ eingestellt, lässt ein Block am Ende des Haupt-Stylesheets jede CSS-Animation nur einmal und so kurz ablaufen, dass man sie nicht sieht, verkürzt Übergänge und schaltet sanftes Scrollen ab. Startet das Skript des Themes das automatische Abspielen einer Slideshow selbst, wird der Start für diese Besucherinnen und Besucher übersprungen. Bewegung, die ein Skript eines Drittanbieters steuert, ändert dieses Rezept nicht.

Eine Slideshow, die sich von selbst bewegt, erhält unter ihren Bedienelementen eine sichtbare, übersetzte Schaltfläche zum Anhalten und Fortsetzen, die nur angezeigt wird, wenn das automatische Abspielen eingeschaltet ist. Ein kurzes Skript in der Haupt-Skriptdatei des Themes verbindet die Schaltfläche mit dem automatischen Abspielen des Sliders selbst: der Slideshow von Dawn, Swiper, Slick, Flickity, Splide oder einer CSS-Animation. Für Besucherinnen und Besucher, deren Gerät auf „Bewegung reduzieren“ eingestellt ist, startet die Slideshow angehalten.

<blink>- und <marquee>-Elemente im Theme werden zu statischen Elementen mit demselben Inhalt, denselben Klassen und denselben IDs: ein <span> für blink, ein <div> für marquee oder ein <span>, wenn das marquee in einem Absatz oder einem Link steht. Die Scroll-Einstellungen des marquee werden entfernt, sodass sich kein Text von selbst bewegt.

Ein Video, das von selbst abspielt, erhält muted und playsinline, sodass es wie ein Hintergrundvideo stumm weiterläuft, und der Filter video_tag von Shopify erhält muted: true. Audio, das von selbst startet, tut das danach nicht mehr. Eingebettete YouTube- und Vimeo-Player bleiben einem Menschen überlassen. In einem Scan von Validiscan wird Ton, der von selbst startet, von der Medienprüfung vs-media gemeldet; sie tritt an die Stelle der axe-core-Regel, die dieses Rezept abdeckt. vs-media hat die Stufe MANUAL, und auf Shopify wird dieses Rezept für ihre Befunde nicht verwendet.

Ein Formularfeld, dessen Beschriftung auf der Seite schon sichtbar, aber nicht mit dem Feld verbunden ist, wird verbunden: Ein <label> daneben erhält ein for, das auf das Feld zeigt, oder ein Text unmittelbar vor dem Feld, etwa der Name einer Größen- oder Farboption, wird über aria-labelledby zu seiner Beschriftung, sodass sich das Layout nicht ändert. Screenreader lesen die Beschriftung dann vor, wenn das Feld den Fokus erhält. Ein Feld, das nur einen Platzhalter hat, bleibt einem Menschen überlassen, weil das Schreiben einer Beschriftung eine Inhaltsentscheidung ist.

Adress-, Konto-, Anmelde- und Kontaktfelder, die der Scan beanstandet hat, erhalten den autocomplete-Wert für das, wonach sie fragen, etwa E-Mail-Adresse, Vor- und Nachname, Straßenadresse, Postleitzahl, Land, Telefonnummer oder Passwort. Der Wert wird aus Typ, Name, Beschriftung und Platzhalter des Felds abgeleitet. Gibt ein Snippet seine Felder anhand von Parametern aus, geben die Felder einen Parameter autocomplete aus, und jeder render-Aufruf des Snippets übergibt den Wert, den seine eigenen Argumente verlangen. Browser können die Felder dann ausfüllen, und assistive Technologien erkennen, wofür jedes Feld gedacht ist. Ein Feld, dessen Zweck der Code nicht zeigt, bleibt unverändert.

Der Teil einer Seite, den das Skript des Themes neu schreibt, wenn Kundinnen und Kunden eine andere Variante wählen oder eine Menge ändern, etwa der Preis, der Hinweis zum Bestand oder die Zwischensumme des Warenkorbs, wird als Live-Region für Statusmeldungen markiert. Screenreader sagen den neuen Wert dann an, ohne dass Kundinnen und Kunden dorthin wechseln müssen. Das Skript des Themes selbst wird nicht geändert. Ein Bereich, der auch Schaltflächen oder Links enthält, die dabei mitgelesen würden, bleibt unverändert.

Schaltflächen und Links, die nur ein Icon zeigen, etwa für Suche, Warenkorb, Konto, Pfeile einer Slideshow, Mengenschaltflächen und Cookie-Auswahl, erhalten einen Namen, der sagt, was sie tun, sofern der Code ihren Zweck zeigt. Der Name ist ein visuell verborgener Text im Bedienelement oder ein aria-label, wo das Theme keine Klasse für verborgenen Text hat. Ein Logo-Link, dessen Bild keine Textalternative hat, erhält den Namen Ihres Shops. Ein Bedienelement, dessen Name aus Ihren eigenen Inhalten stammen müsste, bleibt einem Menschen überlassen.

Ein Bild wird nur dann als dekorativ markiert, wenn der Code belegt, dass es nichts beiträgt: Es steht in einem Link oder einer Schaltfläche mit eigenem Text, es ist ein Icon neben seiner eigenen Textbeschriftung, oder es ist ein Abstandshalter oder eine Trennlinie. Ein <img> erhält dann ein leeres alt="", ein SVG-Icon erhält aria-hidden="true", sodass Screenreader es überspringen, statt einen Dateinamen oder das Wort „Bild“ vorzulesen. Jedes andere Bild ist Inhalt, und seine Textalternative bleibt einem Menschen überlassen.

Ein eingebetteter Frame ohne Titel, etwa eine Karte oder ein YouTube- oder Vimeo-Video, erhält einen übersetzten Titel, der sagt, was er zeigt. Das Rezept entnimmt ihn der Quelladresse oder dem Inhalt des Frames. Ein Frame, dessen Inhalt der Code nicht zeigt, erhält keinen allgemeinen Titel; er bleibt einem Menschen überlassen.