Korrekturen zur Barrierefreiheit im Code Ihres Themes für Shopware

Das <html>-Element des Basis-Layouts der Storefront erhält ein gültiges lang-Attribut, sodass Screenreader die Seite in der richtigen Sprache aussprechen. Fehlt das Attribut, fügt das Rezept den Code der aktiven Sprache des Shops hinzu, zum Beispiel de-DE, den Wert, den das Basis-Template von Shopware selbst ausgibt. Gibt das Theme einen Locale-Code wie en_GB aus, der kein gültiges Sprach-Tag ist, wandelt das Template ihn jetzt in en-GB um. Eine Seite, deren Inhalt in einer anderen Sprache verfasst ist als der Shop, etwa ein deutscher Rechtstext in einem englischen Shop, bleibt Ihnen überlassen: Die Sprache dieses Inhalts wird in der Administration festgelegt oder im Text selbst ausgezeichnet.

Je nachdem, was der Scan gefunden hat, fügt das Rezept einen Skip-Link hinzu, zeichnet den Hauptinhalt aus oder benennt die Navigationsbereiche. Der Skip-Link wird auf jeder Seite zum ersten Element, das jemand mit der Tastatur erreicht. Er bleibt verborgen, bis er den Fokus erhält, und springt zum Hauptinhalt. Wo kein Template den Hauptinhalt als <main> auszeichnet, wird der Inhaltsbereich des Basis-Layouts zum <main>-Bereich der Seite. Der Text des Links ist das Snippet general.skipToContent, auf Englisch „Skip to main content“. Ein vorhandener Skip-Link wird auf den Hauptinhalt gerichtet. Navigationsbereiche ohne Namen erhalten einen, abgeleitet aus ihrer Überschrift oder ihrem Zweck, etwa „Main navigation“, „Service navigation“ oder „Breadcrumb“. Ein Navigationsbereich, dessen Zweck unklar ist oder der seinen Namen mit einem anderen teilen würde, bleibt einem Menschen überlassen.

Schreibt das Layout des Themes nur den Meta-Titel der Seite in den <title>, erhalten Kategorien und CMS-Seiten ohne Meta-Titel einen leeren Titel. Das Rezept behält den eigenen Titel des Themes und gibt ihm einen Ersatzwert: den Namen des Shops, übernommen von der Stelle, an der das Theme ihn schon ausgibt, oder, wenn es das nicht tut, aus dem Shopnamen in den Grundeinstellungen von Shopware. Keine Seite hat dann einen leeren Titel. Ein Titel, der nur aus dem Namen des Shops besteht, sagt trotzdem nicht, worum es auf der Seite geht; diese Seiten brauchen deshalb einen Meta-Titel in der Administration. Titel, die schon einen Ersatzwert oder einen festen Text haben, bleiben unverändert.

Eine Überschrift, die eine Ebene überspringt, etwa ein h3 direkt nach einem h1, rückt zur nächsten Ebene auf, und die weiteren Überschriften desselben Templates auf dieser oder einer tieferen Ebene rücken mit, sodass die eigene Gliederung des Templates erhalten bleibt. Legt das Template das Tag der Überschrift in einer Variablen fest, wird die Variable geändert. Klassen bleiben erhalten, und wo keine Klasse die Größe festlegt, bewahrt eine Bootstrap-Überschriftenklasse das bisherige Aussehen. Auf einer Seite ohne Hauptüberschrift wird das Element, das in ihrem eigenen Template schon als ihr Titel dient, zum h1 gemacht; sein Aussehen bleibt erhalten. Hat eine Seite kein solches Element, fügt das Rezept keine Überschrift hinzu, weil eine neue Überschrift einen Wortlaut braucht.

Das Haupt-Stylesheet erhält einen Fokusrahmen für die Tastaturbedienung: 2 Pixel breit, durchgezogen und 2 Pixel vom Element entfernt, in der Markenfarbe des Themes. Ist diese Farbe zu hell, wird die nächste Abstufung desselben Farbtons verwendet, die gegenüber dem Seitenhintergrund einen Kontrast von mindestens 3:1 hat. Regeln des Themes, die den Fokusrahmen beim Fokussieren entfernen, gelten nun nur noch für den Fokus per Maus: Ein Klick behält das Aussehen des Themes, und beim Tastaturfokus erscheint der Fokusrahmen. Regeln, die den Fokus auf andere Weise zeigen, bleiben erhalten. Auf dunklen Flächen, etwa einer Kopfleiste, braucht der Fokusrahmen möglicherweise eine hellere Farbe, was Ihr Entwicklungsteam in der Vorschau prüft.

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 Code des Templates schreibt, bleibt einem Menschen überlassen. Ein Scan meldet eine solche erzwungene Reihenfolge zweimal: über die axe-core-Regel tabindex, deren Befunde diese Änderung erhalten, und über die Prüfung vs-focus-order von Validiscan, deren Stufe MANUAL ist, sodass ihre Befunde mit einer Anleitung kommen.

Das Rezept entfernt user-scalable=no und jedes maximum-scale unter 2 aus dem Viewport-Tag der Storefront-Templates, meist in layout/meta.html.twig, sodass Besucherinnen und Besucher den Text auf dem Smartphone auf mindestens 200 % vergrößern können. Bei der Regel zur guten Praxis meta-viewport-large liegt die Grenze bei 5. Die übrigen Viewport-Einstellungen bleiben, wie sie waren. Diente die Sperre dazu, iOS am Hineinzoomen in Formularfelder zu hindern, erfüllt eine Schriftgröße von mindestens 16 Pixeln für die Felder denselben Zweck, ohne das Zoomen zu sperren.

Schaltflächen und Links, die der Scan kleiner als 24 × 24 Pixel gefunden hat, etwa Icons im Kopfbereich, Mengenschaltflächen oder Farbmuster, erhalten eine Mindestgröße von 24 × 24 Pixel. Die Mindestgröße wird in der eigenen Style-Regel des Themes ergänzt, die das Bedienelement klein gemacht hat, neben der Deklaration, die es verkleinert hat, sodass die Reihenfolge der Styles des Themes gleich bleibt und die Icons darin ihre Größe behalten. Ein Bedienelement, das ohne eine solche Regel klein ist, erhält im Haupt-Stylesheet eine Mindestgröße für seine Klasse. Ein Bedienelement, das das Rezept nicht anhand seiner Klasse bestimmen kann, bleibt einem Menschen überlassen.

Ist das Gerät von Besucherinnen und Besuchern auf reduzierte Bewegung eingestellt, lässt ein Block im Haupt-Stylesheet Animationen und Übergänge sofort enden und schaltet sanftes Scrollen ab. Der Block gilt für jedes Element der Seite und erfasst deshalb auch Animationen, die andere Stylesheets definieren, darunter die von Plugins. Startet das Storefront-Skript des Themes einen Timer, etwa das automatische Abspielen einer Slideshow, nur dann, wenn eine Option für das automatische Abspielen gesetzt ist, prüft diese Bedingung nun auch die Einstellung der Besucherinnen und Besucher. Andere Bewegung, die ein Skript startet, wird für die prüfende Person aufgeführt, nicht geraten.

Der Basis-Slider von Shopware, der Slider hinter dem Bilderslider des CMS, erhält neben seinen Pfeilen für Zurück und Weiter eine sichtbare, übersetzte Schaltfläche zum Anhalten und Fortsetzen. Ein Codeblock im Storefront-Skript des Themes verbindet die Schaltfläche über das eigene Slider-Plugin von Shopware mit dem automatischen Abspielen des Sliders. Steuert das Theme das automatische Abspielen mit einem eigenen Timer, erhält dieser Timer eine Zeile, die einen Schritt überspringt, solange der Slider angehalten ist. Die Schaltfläche bleibt verborgen, bis das Skript sie verbunden hat, und erscheint deshalb nie ohne ein automatisches Abspielen, das sie anhalten könnte. Für Besucherinnen und Besucher, deren Gerät reduzierte Bewegung verlangt, startet der Slider angehalten. Slider, die mit anderen Bibliotheken gebaut sind, bleiben einem Menschen überlassen.

<blink>- und <marquee>-Elemente in den Twig-Templates 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 ähnlichen Textelement 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 in Safari auf dem Smartphone innerhalb der Seite abgespielt wird, statt den Vollbildplayer zu öffnen. Audio, das von selbst startet, tut das danach nicht mehr; Besucherinnen und Besucher starten es selbst. Automatisches Abspielen, das der Code eines Templates oder ein Skript festlegt, und in Frames eingebettete Player bleiben einem Menschen überlassen. In einem Scan meldet die Medienprüfung vs-media von Validiscan Ton, der von selbst startet; sie tritt an die Stelle der axe-core-Regel no-autoplay-audio. vs-media, die auch Untertitel und Transkripte abdeckt, hat die Stufe MANUAL, sodass ein solcher Befund auf Shopware mit einer Anleitung kommt statt mit dieser Änderung.

Ein Formularfeld, dessen Beschriftung schon auf der Seite steht, direkt vor dem Feld, wird mit diesem Text verbunden. Ein <label> ohne for erhält ein for, das auf das Feld zeigt. Ein Textelement, das das Theme über seine Klasse als Titel oder Beschriftung auszeichnet, etwa der Name einer Variantengruppe auf einer Produktseite, wird zum <label> des Felds und behält seine Klassen und seine eigene Zeile. 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 eine Beschriftung zu schreiben eine Inhaltsentscheidung ist.

Felder, die nach den eigenen Daten der Kundinnen und Kunden fragen, etwa in den Formularen für Registrierung, Adresse, Anmeldung, Kontakt und Newsletter, erhalten den autocomplete-Wert für das, wonach sie fragen, etwa E-Mail-Adresse, Vor- und Nachname, Postleitzahl, Telefonnummer oder Passwort. Der Wert wird aus Typ, Name, ID, Beschriftung und Platzhalter des Felds abgeleitet. Passwörter erhalten in Registrierungsformularen new-password und sonst current-password. Felder für Suche, Gutschein, Menge, Captcha und Nachricht bleiben, wie sie sind, und ein Wert, den der Code eines Templates schreibt, bleibt einem Menschen überlassen. Browser können die Felder dann ausfüllen, und assistive Technologien erkennen, wofür jedes Feld gedacht ist.

Die Teile einer Seite, die das Storefront-Skript an Ort und Stelle aktualisiert, etwa der Preis, nachdem Kundinnen und Kunden eine Variante gewählt haben, die Verfügbarkeit oder die Summen des Warenkorbs, werden zu Live-Regionen mit der Einstellung „polite“. Screenreader lesen den neuen Wert dann einmal vollständig vor, ohne zu unterbrechen. Ersetzt ein Skript das Element selbst statt seines Inhalts, würde eine Live-Region nicht funktionieren; deshalb überlässt das Rezept dieses Element einem Menschen.

Ein eingebetteter Frame ohne Titel, etwa eine Karte oder ein YouTube- oder Vimeo-Video, erhält aus den Snippet-Dateien des Themes einen übersetzten Titel, der sagt, was er zeigt. Das Rezept liest aus der Adresse des Frames, seiner Klasse und seinem Namen oder aus dem umgebenden Template, was der Frame zeigt. Ein Frame, dessen Inhalt der Code nicht verrät, erhält vom Rezept keinen Titel, weil ein erfundener Titel schlechter ist als keiner.

Besteht Text die Kontrastprüfung nicht und ist seine Farbe an genau einer Stelle im Theme definiert, wird diese Stelle auf die nächste Abstufung desselben Farbtons geändert, die den erforderlichen Kontrast erreicht, sodass das Design wiedererkennbar bleibt. Eine Stelle kann ein Farbfeld in der theme.json zusammen mit der SCSS-Variablen sein, die es wiederholt, eine SCSS-Variable oder CSS-Variable, die nur für Text verwendet wird, oder eine einzelne color-Deklaration. Eine Farbe, die an mehreren Stellen oder auch als Hintergrund oder Rand verwendet wird, und die grundlegenden Farbfelder von Shopware für Marke, Ränder, Hintergründe, Statusmeldungen und die Kaufen-Schaltfläche bleiben einem Menschen überlassen. Eine Farbe, die in den Theme-Einstellungen der Administration gespeichert ist, überschreibt die theme.json: Wurde sie dort geändert, muss sie auch dort geändert werden. Die Regel color-contrast hat die Stufe ASSISTED, deshalb geht ein Kontrastbefund in einem Projekt den Weg ASSISTED, und dieses Rezept wird darauf nicht angewendet.

Ein Bild wird nur dann als dekorativ markiert, wenn das Template belegt, dass es nichts beiträgt: Es steht in einem Link oder einer Schaltfläche, die auf andere Weise einen Namen hat, es ist ein Icon neben seiner eigenen Textbeschriftung, oder es ist ein Abstandshalter oder Trenner. Ein <img> erhält ein leeres alt, ein Bild, das mit dem Tag sw_thumbnails von Shopware ausgegeben wird, erhält in seinen Attributen ein leeres alt, und SVG-Icons erhalten aria-hidden="true", sodass Screenreader sie überspringen, statt einen Dateinamen vorzulesen. Jedes andere Bild ist Inhalt, etwa die Zahlungslogos in einer Fußzeile, und seine Textalternative braucht Worte, die ein Mensch wählt. Die Regeln, die dieses Rezept abdeckt, haben die Stufe ASSISTED; deshalb gehen ihre Befunde in einem Projekt den Weg ASSISTED, und dieses Rezept wird darauf nicht angewendet.

Anklickbare <div>-, <span>-, <i>- und <li>-Elemente in Slidern und Cookie-Bannern sowie Links ohne Adresse, die nur auf eine Maus reagieren, werden zu echten Schaltflächen. Klassen, Data-Attribute und IDs bleiben erhalten, sodass das Skript des Themes sie wie bisher findet, und die Eingabetaste und die Leertaste bewirken nun, was ein Klick bewirkt. Ein Listenelement behält seinen Platz in der Liste; die Schaltfläche wird darin eingesetzt. Ein Bedienelement ohne Text erhält aus seinem Zweck einen übersetzten Namen, auf Englisch etwa „Show slide 2“, und ein kleines Style-Reset bewahrt sein Aussehen. Ein Bedienelement ohne Text, dessen Zweck unklar ist oder dessen Gestaltung von seinem Tag oder seiner Position abhängt, bleibt einem Menschen überlassen. In einem Projekt wird dieses Rezept an Slideshow-Befunden von vs-carousel versucht; Befunde der Cookie-Banner-Prüfung vs-cookie-banner haben die Stufe ASSISTED und gehen den Weg ASSISTED.

Schaltflächen und Links, die nur ein Icon zeigen, etwa für Suche, Warenkorb, Konto, den Logo-Link, Pfeile eines Sliders, Mengenschaltflächen und Cookie-Auswahl, erhalten ein übersetztes aria-label, das sagt, was sie tun. Der Zweck wird aus den Klassen des Bedienelements, seinem Linkziel, dem Icon darin und der umgebenden Komponente abgelesen. Ein Bedienelement, dessen Zweck der Code nicht verrät, etwa ein Social-Media-Link, dessen Netzwerk als Datenwert hinterlegt ist, bleibt einem Menschen überlassen, weil ein erfundener Name schlechter ist als keiner. In einem Projekt wird dieses Rezept an den Slideshow-Bedienelementen versucht, die vs-carousel meldet; andere Bedienelemente mit nur einem Icon werden von Regeln der Stufe ASSISTED gemeldet und gehen den Weg ASSISTED.