Korrekturen zur Barrierefreiheit im Code Ihres Themes für WooCommerce

Das Rezept sorgt dafür, dass das <html>-Element Ihrer Header-Templates seine Sprache aus language_attributes() von WordPress übernimmt, das die Sprache der Website ausgibt oder die Sprache, die ein Plugin für Mehrsprachigkeit setzt, sodass Screenreader die Seite richtig aussprechen. Einem Header-Template, das die Sprache auslässt, wird der Aufruf hinzugefügt, und ein fest eingetragener lang-Wert, der nicht gültig ist, wird durch ihn ersetzt. Kommt der falsche Wert aus der Einstellung für die Sprache der Website in Ihrem WordPress-Adminbereich, ändert das Rezept nichts, weil das eine Einstellung ist und kein Theme-Code. Liest das Theme bereits ein Sprachfeld für jede Seite, etwa für deutsche Rechtstexte in einem englischen Shop, deklariert ein Filter in der functions.php die Sprache dieser Seite, und Kopf- und Fußbereich der Website behalten die Sprache des Shops. Ohne ein solches Feld rät das Rezept die Sprache nicht.

Jedes Header-Template ohne Skip-Link erhält einen Link „Skip to content“ direkt nach dem öffnenden <body>-Tag oder nach dem Aufruf von wp_body_open(), der darauf folgt. Er bleibt verborgen, bis er den Fokus erhält, und springt zum Inhalt der Seite. Ist Ihr Theme ein Child-Theme von Storefront und hat die Skip-Links von Storefront abgeschaltet, werden sie stattdessen wieder eingeschaltet. Haben die Templates noch keinen Hauptbereich, wird der Inhaltscontainer der Seiten-Templates, ein <div> mit der ID main oder der Klasse site-main, zu einem <main>-Element, das ihn als Hauptbereich der Seite auszeichnet; sprechen die Styles oder Skripte des Themes diesen Container als div an, bleibt er unverändert. Navigationsbereiche, deren Zweck in ihrer ID oder Klasse erkennbar ist, erhalten einen Namen, etwa „Primary navigation“, „Breadcrumb“, „Footer navigation“ oder „Pagination“. Ein vorhandener Skip-Link, der ins Leere zeigt, wird auf den Inhalt gerichtet. Der Linktext und die Namen werden auf Englisch hinzugefügt.

WordPress erzeugt den Seitentitel selbst, aus dem Namen der Seite oder des Produkts, der Seitenzahl einer Liste mit mehreren Seiten und dem Namen des Shops. Das Rezept behebt, was im Theme verhindert, dass dieser Titel erscheint. Ein Titel-Filter, der einen eigenen Titel zurückgibt, etwa aus einem SEO-Feld, greift auf den erzeugten Titel zurück, wenn das Feld leer ist. Ein fester <title>-Text in einem Header-Template wird durch den Titel ersetzt, den WordPress erzeugt. Bei einem Theme, das kein Child-Theme ist und überhaupt keinen Titel ausgibt, wird die Titelunterstützung von WordPress in der functions.php eingeschaltet. Stammt der Titel aus einem SEO-Plugin oder aus den eigenen Einstellungen einer Seite, ändert das Rezept nichts.

Eine Überschrift, die eine Ebene überspringt, etwa ein h4 direkt nach einem h2, erhält die nächste Ebene unterhalb der vorangehenden Überschrift, im Template oder in dem PHP-String, der sie ausgibt. Widget-Titel und Überschriften im Footer oder in einer Sidebar werden zu h2. Stammt der Sprung aus einem WooCommerce-Template, das direkt nach dem Seitentitel angezeigt wird, etwa aus den Überschriften für die Rechnungs- und die Versanddetails im Checkout, rücken die Überschriften derselben Ebene in den benachbarten Templates mit. Nur die Ebene ändert sich: Jede Überschrift behält ihre Klassen, und eine Überschrift, die die Styles oder Skripte des Themes über ihre Ebene ansprechen, bleibt unverändert. Eine Überschrift ohne Klasse übernimmt das Aussehen des Themes für ihre neue Ebene. Auf einer Seite ohne Hauptüberschrift wird das Element, das schon wie ihr Titel aussieht, mit einer Titelklasse, die auf mindestens 24 Pixel gesetzt ist, zum h1 gemacht. Hat eine Seite kein solches Element, fügt das Rezept keine Überschrift hinzu und überlässt es einem Menschen.

Das Haupt-Stylesheet des Themes erhält einen Fokusrahmen für die Tastaturbedienung: 2 Pixel breit, durchgezogen und 2 Pixel vom Element entfernt, in einer Farbe, die das Theme schon verwendet. Das ist eine Farbvariable, deren Name focus, accent, brand, primary oder link enthält, sonst die Farbe von Links oder des Fließtexts. Die erste davon mit einem Kontrast von mindestens 3:1 gegenüber dem Seitenhintergrund wird verwendet; hat keine ihn, wird die erste im selben Farbton heller oder dunkler gemacht, bis sie ihn hat. Auf dunklen Flächen mit hellem Text, etwa einer dunklen Kopfleiste, übernimmt der Fokusrahmen die helle Textfarbe. Ein outline: none beim Fokussieren, das nichts an seine Stelle setzt, wird aus den Regeln des Themes entfernt; Regeln, die den Fokusrahmen nur bei Mausklicks ausblenden, bleiben. Ein Theme, das schon einen sichtbaren Fokusrahmen hat und keine Regel, die ihn ausblendet, bleibt unverändert.

Ein tabindex größer als 0 zieht ein Element an den Anfang der Tastaturreihenfolge. Das Rezept entfernt ihn bei Links, Schaltflächen und Formularfeldern, 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. Geändert wird nur das Tag im Template, das das gemeldete Element ausgibt. Ein tabindex, den PHP-Code ausgibt oder ein Skript setzt, bleibt einem Menschen überlassen.

In einem Cookie-Banner oder einer Slideshow, die zu Ihrem Theme gehört, werden anklickbare <span>-, <div>-, <li>- oder <i>-Elemente, die nur mit der Maus funktionieren, zu echten <button>-Elementen. Jede Klasse und jedes Attribut bleibt erhalten, sodass die Styles und Skripte des Themes weiter funktionieren, und die Eingabetaste und die Leertaste bewirken nun, was ein Klick bewirkt. Ein kurzes Style-Reset für genau diese Klassen bewahrt ihr Aussehen. Eine Schaltfläche im selben Banner oder in derselben Slideshow, die nur ein Icon zeigt, erhält einen englischen Namen, wie unten bei den Namen für Icons beschrieben. Ein Element, auf das kein Skript reagiert, eines, das die Styles oder Skripte des Themes über seinen Tag-Namen ansprechen, oder ein leeres Element, dessen Zweck unklar ist, bleibt unverändert.

Das Rezept entfernt user-scalable=no und ein maximum-scale unter 2 aus dem Viewport-Tag, in den Header-Templates oder im PHP-Code, der das Tag ausgibt, sodass Besucherinnen und Besucher wieder mit zwei Fingern in Ihren Shop hineinzoomen können. Für die strengere Regel meta-viewport-large von axe-core wird jedes maximum-scale unter 5 entfernt. Die übrigen Viewport-Einstellungen bleiben genau, wie sie waren. Ein Viewport-Tag, dessen Inhalt PHP berechnet, oder eines, das ein Plugin ausgibt, bleibt einem Menschen überlassen.

Bedienelemente, die der Scan kleiner als 24 × 24 Pixel gefunden hat, etwa Social-Media-Icons, Farbmuster oder Mengenschaltflächen, erhalten diese Mindestgröße. Das Rezept findet die Stylesheet-Regeln, die genau diesen Elementen eine feste Breite oder Höhe unter 24 Pixeln geben, und hebt sie auf 24 Pixel an; legt das Element sein Icon mit Flexbox oder Grid aus, wird das Icon zentriert, damit es nicht in einer Ecke sitzt. Ein Bedienelement, dessen Größe aus dem Padding oder aus seinem Inhalt kommt, lässt sich aus den Stylesheets nicht messen und bleibt einem Menschen überlassen.

Besteht Text die Kontrastprüfung nicht und ist seine Farbe an einer Stelle in den Stylesheets des Themes definiert, als CSS-Variable oder als Farbe der Regel, die diesen Text gestaltet, wird diese Farbe auf die nächste hellere oder dunklere Abstufung desselben Farbtons verschoben, die den vom Scan ermittelten erforderlichen Kontrast erreicht, und zwar gegenüber jedem Hintergrund, den er gemessen hat. Eine Farbe, die an mehreren Stellen definiert ist, die auch Elemente verändern würde, deren Kontrast der Scan nicht gemessen hat, oder die das Theme auch für Hintergründe oder Ränder verwendet, bleibt einem Menschen überlassen.

Ist das Gerät von Besucherinnen und Besuchern auf reduzierte Bewegung eingestellt, lässt ein Block am Ende des Haupt-Stylesheets des Themes jede Animation nur einmal und so kurz ablaufen, dass man sie nicht sieht; sie bleibt dann in ihrem Endzustand stehen. Übergänge erfolgen sofort, und sanftes Scrollen wird abgeschaltet. Starten die eigenen Skripte des Themes das automatische Abspielen einer Slideshow, mit Slick, Swiper, Splide, Owl oder Flickity, startet es nur für Besucherinnen und Besucher, die keine reduzierte Bewegung verlangt haben. Bewegung, die von einem Plugin oder einem Inline-Skript stammt, wird nicht geändert.

Eine Slideshow in den Templates Ihres Themes, die sich von selbst bewegt, erhält eine sichtbare Schaltfläche zum Anhalten und Fortsetzen, auf Englisch beschriftet mit „Pause slideshow“ und „Play slideshow“. Die Schaltfläche wird zum ersten Element der Slideshow, sodass Menschen, die mit der Tastatur navigieren, sie vor den Slides erreichen. Ein kurzes Skript in der Haupt-Skriptdatei des Themes verbindet die Schaltfläche mit dem automatischen Abspielen des Sliders selbst: einer CSS-Animation des Themes, Slick, Swiper oder Flickity. Für Besucherinnen und Besucher, deren Gerät reduzierte Bewegung verlangt, startet die Slideshow angehalten. Ein Slider, den ein Plugin oder ein Inline-Skript steuert, bleibt einem Menschen überlassen.

<blink>- und <marquee>-Elemente in den Templates des Themes und in PHP-Strings, die sie ausgeben, 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 steht. Die Scroll-Einstellungen des marquee werden entfernt, sodass sich kein Text von selbst bewegt. Ein Element, das der Code an verschiedenen Stellen öffnet und schließt, bleibt einem Menschen überlassen.

Ein Video in den Templates des Themes, das von selbst abspielt, erhält muted und playsinline, sodass es stumm weiterläuft und auf iPhones innerhalb der Seite statt im Vollbild abgespielt wird; hat das Video Bedienelemente, können Besucherinnen und Besucher den Ton weiterhin einschalten. Audio, das von selbst startet, tut das danach nicht mehr. Medien, die ein Skript startet, 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, die dieses Rezept abdeckt. vs-media hat die Stufe MANUAL (siehe die Liste weiter unten), sodass ein solcher Befund auf WooCommerce mit einer Anleitung kommt statt mit dieser Änderung.

Ein Formularfeld, dessen Beschriftung schon im Template steht, aber nicht mit dem Feld verbunden ist, wird verbunden: Das <label> direkt vor dem Feld oder direkt nach einem Kontrollkästchen oder einem Radiobutton erhält ein for, das auf das Feld zeigt, oder ein als Beschriftung ausgezeichnetes Textelement wird über aria-labelledby verbunden. Screenreader lesen die Beschriftung dann vor, wenn das Feld den Fokus erhält, und ein Klick auf ein verbundenes <label> setzt den Fokus auf das Feld. Ein Feld, das nur einen Platzhalter hat, bleibt einem Menschen überlassen, weil eine Beschriftung zu schreiben eine Inhaltsentscheidung ist.

Felder in den Templates des Themes, die nach Daten über die Kundinnen und Kunden fragen, etwa Anmelde-, Registrierungs- und Checkout-Felder, erhalten den autocomplete-Wert für das, wonach sie fragen, etwa E-Mail-Adresse, Benutzername, aktuelles oder neues Passwort, Vor- und Nachname, Firma, Adresse, Postleitzahl, Land oder Telefonnummer. Der Wert wird aus Typ, Name, ID und Beschriftung des Felds abgeleitet. Ein Wert, der fehlt, off ist oder ungültig ist, wird ersetzt; ein gültiger bleibt. Die eigenen Felder von WooCommerce für die Rechnungs- und die Versandadresse gibt WooCommerce aus, nicht das Theme, daher setzt ein Filter in der functions.php ihre Werte. Er läuft nach den eigenen Filtern des Themes für diese Felder, die die Werte entfernen können. Felder, die keine personenbezogenen Daten abfragen, etwa Felder für Suche, Gutschein oder Menge, bleiben, wie sie sind, ebenso ein Feld, dessen Zweck der Code nicht zeigt.

Wählen Kundinnen und Kunden eine andere Größe oder Farbe, wird der Bereich, der Preis und Bestand der gewählten Variante zeigt, an Ort und Stelle neu geschrieben. Dieser Bereich wird zu einer Live-Region, sodass Screenreader den neuen Preis und Bestand ansagen, ohne dass die Kundinnen und Kunden dorthin wechseln müssen. Der Warenkorb-Link im Kopfbereich wird beim Hinzufügen eines Produkts als Ganzes ersetzt und kann die Ansage deshalb nicht selbst übernehmen. Daneben fügt das Rezept eine visuell verborgene Statusmeldung hinzu, und ein kurzer Block im Skript des Themes schreibt „Product added to your cart.“ oder „Product removed from your cart.“ hinein, wenn WooCommerce die Änderung meldet. Beide Meldungen werden auf Englisch hinzugefügt. Ein Bereich, der schon eine Live-Region ist oder in einer Live-Region liegt, oder den das eigene Skript des Themes als Ganzes ersetzt, bleibt unverändert.

Schaltflächen und Links, die nur ein Icon zeigen, erhalten einen Namen, der sagt, was sie tun, sofern der Code ihren Zweck zeigt: aus dem eigenen Namen des Icons, aus der Klasse oder ID des Bedienelements oder daraus, wohin ein Link führt, etwa zum Warenkorb, zur Kontoseite oder zu einem sozialen Netzwerk. Beispiele sind „Search“, „Cart“, „My account“, „Show password“, „Close“ und „Menu“. Der Name ist ein visuell verborgener Text im Bedienelement oder ein aria-label, wo das Theme keine Klasse für verborgenen Text hat, und er wird auf Englisch hinzugefügt. Namen sozialer Netzwerke sind Markennamen und bleiben, wie sie sind. Ein Bedienelement, dessen Zweck der Code nicht zeigt, 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, etwa ein Logo neben dem Shopnamen, es ist ein kleines Icon neben seiner eigenen Textbeschriftung, oder es ist ein Abstandshalter oder Trenner. Ein <img> erhält dann ein leeres alt="", und ein SVG-Icon erhält aria-hidden="true", sodass Screenreader es überspringen, statt eine unbenannte Grafik anzusagen. 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 Titel auf Englisch, der sagt, was er zeigt. Das Rezept entnimmt ihn dem Titel einer im Theme eingebetteten Datei, dem Anbieter in der Adresse des Frames oder Wörtern wie map oder video in seiner Klasse oder ID. Ein Frame, dessen Inhalt der Code nicht zeigt, erhält keinen allgemeinen Titel; er bleibt einem Menschen überlassen.