Korrekturen zur Barrierefreiheit im Code Ihres Themes für Magento

Magento legt die Sprache einer Seite anhand des Locales ihrer Store View fest, etwa en für das Locale en_US, und gibt sie über sein Root-Template aus. Überschreibt Ihr Theme dieses Template und gibt ein eigenes lang aus, meist den Locale-Code en_US, der kein gültiges Sprach-Tag ist, oder gar kein lang, gibt das Template wieder die eigenen Attribute von Magento aus, sodass jede Seite ein gültiges lang erhält. Ein lang, das im Layout-XML in der Locale-Form gesetzt ist, etwa de_DE, wird zu de-DE. Eine Seite, deren Inhalt in einer anderen Sprache verfasst ist als ihre Store View, etwa eine deutsche Rechtsseite in einem englischen Store, bleibt Ihnen überlassen: Liefern Sie sie aus einer Store View in dieser Sprache aus, oder zeichnen Sie die Sprache im Inhalt selbst aus.

Das Theme Luma von Magento hat oben auf jeder Seite einen Link „Skip to Content“, der zum Anfang des Hauptinhalts springt, und dieser Inhalt ist der <main>-Bereich der Seite. Ein Theme kann beides verlieren. Hat das Theme den Link in seinem Layout-XML entfernt, macht das Rezept die Entfernung rückgängig. Gibt das eigene Header-Template des Themes den Link nie aus, fügt das Rezept ihn dort mit den Klassen von Luma hinzu; würden die Stylesheets des Themes ihn ungestaltet lassen, fügt das Rezept Styles hinzu, die ihn verborgen halten, bis er den Tastaturfokus erhält. Rendert das Layout-XML den Hauptinhalt als anderes Element, etwa als <div>, wird er wieder zu <main>. Navigationsbereiche ohne Namen erhalten einen, der sagt, was sie enthalten, etwa „Main menu“, „Footer links“ oder „Breadcrumbs“; ein Bereich, dessen Zweck der Code nicht zeigt oder der seinen Namen mit einem anderen teilen würde, bleibt einem Menschen überlassen. Inhalt außerhalb von Kopfbereich, Hauptbereich und Fußbereich, etwa eine Aktionsleiste, wird nicht verschoben: Das Verschieben ist eine Änderung an Ihrem Layout, die Ihr Entwicklungsteam im Layout-XML vornimmt.

Magento gibt jeder Seite einen eigenen Titel, etwa den Namen des Produkts oder der Kategorie oder „Search results for:“ und den Suchbegriff, mit dem Präfix oder Suffix, das für Ihren Store festgelegt ist. Ein Theme kann ihn mit einem leeren <title> im Layout-XML überschreiben, und die Seite hat dann keinen Titel. Das Rezept entfernt solche leeren Titel, sodass der eigene Titel von Magento wieder gilt. Titel mit Text sind Ihr Wortlaut und bleiben, wie sie sind. Leert keine Layout-Datei des Themes den Titel, ändert das Rezept nichts: Der Titel kommt dann von der Seite selbst und aus den HTML-Head-Einstellungen im Magento-Adminbereich.

Eine Überschrift, die eine Ebene überspringt, etwa ein h4 direkt nach einem h2, rückt zur nächsten Ebene auf, und die Überschriften, die ihr im selben Template auf ihrer Ebene oder tiefer folgen, rücken mit. Klassen bleiben erhalten, sodass Styles, die das Theme über Klassen setzt, weiter gelten; Styles, die das Theme über das Tag der Überschrift setzt, prüft Ihr Entwicklungsteam. Lässt sich die Ebene der vorangehenden Überschrift weder aus dem Scan noch aus demselben Template ablesen, bleibt die Überschrift einem Menschen überlassen. Magento gibt den Titel jeder Seite als h1 aus. Ein Theme, das den Titel auf einer Seite mit display: none ausblendet, entfernt das einzige h1 der Seite; das Rezept blendet ihn deshalb stattdessen nur visuell aus, so wie die eigenen Styles von Magento Text ausblenden, und das h1 bleibt in der Gliederung, die Screenreader verwenden. Ein Titel, der im Layout-XML entfernt wurde, bleibt einem Menschen überlassen, weil ihn wiederherzustellen das Aussehen der Seite verändern würde.

Das Stylesheet des Themes erhält einen Fokusrahmen für die Tastaturbedienung: 2 Pixel breit, durchgezogen und 2 Pixel vom Element entfernt, in der Markenfarbe des Themes. Die Farbe stammt aus einer Variablen für die Marken- oder Primärfarbe, sonst von der primären Schaltfläche, sonst von der Linkfarbe und wird angepasst, bis sie gegenüber dem Seitenhintergrund einen Kontrast von mindestens 3:1 hat. Flächen mit eigenem Hintergrund, etwa eine dunkle Kopfleiste, erhalten eine Farbe für den Fokusrahmen, die dort diesen Kontrast hat. Regeln des Themes, die den Fokusrahmen von Links, Schaltflächen und anderen Bedienelementen beim Fokussieren entfernen, werden herausgenommen, außer sie zeigen den Fokus auf andere Weise, etwa durch einen Rand oder einen Schatten.

Ein tabindex größer als 0 zieht ein Element an den Anfang der Tastaturreihenfolge. Solche Werte wirken nur relativ zueinander auf der ganzen Seite; sobald sich zeigt, dass ein gemeldetes Element in den Templates des Themes einen trägt, entfernt das Rezept jeden festen positiven tabindex in den Templates des Themes, auch bei Elementen, die der Befund nicht aufgeführt hat. Links, Schaltflächen und Formularfelder verlieren das Attribut; andere Elemente erhalten tabindex="0", sodass sie erreichbar bleiben, während die Tab-Taste der Reihenfolge der Seite folgt. Ein tabindex, den PHP-Code berechnet, bleibt einem Menschen überlassen. Die Prüfung vs-focus-order von Validiscan meldet auch einen Fokus, der aus anderen Gründen auf der Seite umherspringt, etwa weil Styles Inhalt an eine andere Stelle setzen; sie hat die Stufe MANUAL, sodass ihre Befunde mit einer Anleitung kommen, nicht mit dieser Änderung.

Das Rezept entfernt user-scalable=no und jedes maximum-scale unter 2 aus dem Viewport-Tag im Layout-XML des Themes, etwa in der default_head_blocks.xml, wo Luma es deklariert, oder in seinen Templates, sodass Besucherinnen und Besucher die Seite auf dem Smartphone zoomen können. Bei der Regel zur guten Praxis meta-viewport-large liegt die Grenze bei 5. Die übrigen Viewport-Einstellungen bleiben, wie sie waren. Ein Viewport-Wert, den PHP-Code berechnet, wird für Ihr Entwicklungsteam zur Prüfung aufgeführt. Stammt das Tag, das den Zoom sperrt, nicht aus dem Theme, etwa aus den HTML-Head-Einstellungen im Magento-Adminbereich oder aus einem Modul, ändert das Rezept nichts.

Schaltflächen und Links, die der Scan als zu klein gefunden hat, etwa Social-Media-Icons oder Mengenschaltflächen, erhalten in einem Block am Ende des Stylesheets des Themes eine Mindestgröße von 24 × 24 Pixel. Der Block verwendet die Selektoren wieder, mit denen das Theme sie klein gemacht hat, oder ihre eigenen Klassen, und setzt eine Mindestbreite und -⁠höhe, die sich gegen eine kleinere Breite oder Höhe durchsetzt. Die Icons darin und das Layout darum herum bleiben, wie sie sind. Ein Link oder ein anderes Inline-Element ohne display-Regel wird zu inline-flex, weil Inline-Elemente eine Mindestgröße ignorieren. Ein Bedienelement ohne eine Klasse, die das Stylesheet ansprechen kann, bleibt einem Menschen überlassen.

Ist das Gerät von Besucherinnen und Besuchern auf reduzierte Bewegung eingestellt, schaltet ein Block am Ende jedes Stylesheets des Themes die Animationen, die Übergänge von 5 Sekunden oder mehr und das sanfte Scrollen aus, die dieses Stylesheet startet, Selektor für Selektor. Starten die eigenen Skripte des Themes in web/js einen Slider mit eingeschaltetem automatischem Abspielen, startet der Slider für diese Besucherinnen und Besucher ohne automatisches Abspielen. Eine Regel, die in einer anderen LESS-Regel verschachtelt ist, wird für Ihr Entwicklungsteam aufgeführt. Animationen aus dem eigenen Code von Magento oder aus Extensions stehen nicht in den Dateien des Themes und brauchen ihre eigene Absicherung.

Auf Magento fügt dieses Rezept keine Pause-Schaltfläche hinzu. Der Page-Builder-Slider läuft mit den eigenen Skripten von Magento, und ein Theme kann ihm keine Pause-Schaltfläche geben, ohne den Code von Magento zu überschreiben. Das Rezept nutzt stattdessen die eigene Einstellung des Sliders: Bei jedem Page-Builder-Slider mit automatischem Abspielen in den Dateien des Themes wird das automatische Abspielen ausgeschaltet, wie es der Schalter „Autoplay“ im Page Builder tut, und Pfeile werden eingeschaltet, wo der Slider sonst keine Möglichkeit hätte, zwischen Slides zu wechseln. Endlose CSS-Animationen, die einen Slider von selbst bewegen, werden entfernt. Die Slides wechseln dann nur, wenn Besucherinnen und Besucher die Punkte oder Pfeile benutzen: Nichts bewegt sich von selbst, also gibt es nichts anzuhalten. Ein Slider, der in der Magento-Datenbank gespeichert ist, ist keine Datei des Themes: Sein automatisches Abspielen schalten Sie mit der Einstellung „Autoplay“ im Page Builder aus. Ein Slider, den die eigenen Skripte des Themes mit automatischem Abspielen starten, etwa ein Slick- oder Swiper-Slider, braucht eine Pause-Schaltfläche, die in dieses Skript eingebaut wird; das bleibt einem Menschen überlassen.

<blink>- und <marquee>-Elemente in den Templates des Themes werden zu statischen Elementen mit demselben Inhalt, denselben Klassen und denselben IDs: ein <span> für blink, ein <div> für marquee. Die eigenen Attribute des marquee, etwa seine Scroll-Geschwindigkeit und -⁠Richtung, werden entfernt, ebenso der Style text-decoration: blink in den Stylesheets des Themes, sodass sich kein Text von selbst bewegt oder blinkt.

Ein Video in den Templates des Themes, das von selbst abspielt, erhält muted und playsinline, sodass es stumm und auf dem Smartphone innerhalb der Seite weiterläuft. Audio startet nicht mehr von selbst. Eingebettete YouTube- und Vimeo-Player, die von selbst starten, werden so eingestellt, dass sie stumm starten. Automatisches Abspielen, das PHP-Code einschaltet, bleibt 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, die auch Untertitel und Transkripte abdeckt, hat die Stufe MANUAL, sodass ein solcher Befund auf Magento mit einer Anleitung kommt statt mit dieser Änderung.

Ein Formularfeld, dessen Beschriftung schon auf der Seite steht, vor dem Feld, wird mit diesem Text verbunden. Ein <label> ohne for erhält ein for, das auf das Feld zeigt. Ein Beschriftungstext in einem <span> oder <strong>, etwa ein Text „Sort By“ mit der Klasse sorter-label von Luma neben dem Sortiermenü einer Kategorieseite, wird zu einem <label> mit denselben Klassen. Ein Beschriftungstext in einem Blockelement, etwa <div class="label">, behält sein Tag und wird über aria-labelledby verbunden. Der Text muss in einem Container ohne ein weiteres Feld stehen, damit er nicht zu einem anderen gehören kann. 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 in den Templates des Themes, die nach den eigenen Daten der Kundinnen und Kunden fragen, in Adress-, Konto-, Anmelde-, Kontakt- und Newsletter-Formularen, erhalten den autocomplete-Wert für das, wonach sie fragen, etwa E-Mail-Adresse, Name, Telefonnummer, Straßenadresse, Postleitzahl oder Passwort. Der Wert wird aus Typ, Name, ID, Beschriftung, Platzhalter und Titel des Felds abgeleitet, nach denselben Regeln wie die Formularprüfung von Validiscan, und Felder für die Rechnungs- und die Versandadresse erhalten ihren Abschnitt, wie in shipping given-name. Sobald ein Feld eines Formulars gemeldet wird, wird jedes Feld dieses Formulars bearbeitet. Passwörter erhalten new-password in Formularen zur Registrierung und zum Zurücksetzen des Passworts und in Formularen mit mehr als einem Passwortfeld und sonst current-password. Felder für Gutschein, Suche, Geschenkempfänger, Kommentar, Menge und CAPTCHA erhalten nie einen Wert. Ein Wert, den der Code eines Templates schreibt, oder ein gültiger Wert, der für das Feld falsch aussieht, bleibt einem Menschen überlassen.

Die eigenen Skripte von Magento schreiben den Text in festen Containern neu, wenn Kundinnen und Kunden eine Größe oder Farbe wählen oder ein Produkt in den Warenkorb legen. Das Rezept macht diese Container in den Templates des Themes zu Live-Regionen, sodass Screenreader den neuen Wert vorlesen, ohne dass die Kundinnen und Kunden dorthin wechseln müssen. Die Preisbox und der Zähler des Mini-Warenkorbs werden bei einer Änderung vollständig vorgelesen; die Bestandsmeldung und die Seitenmeldungen, etwa der Hinweis, dass ein Produkt in den Warenkorb gelegt wurde, erhalten role="status". Die Skripte selbst werden nicht geändert. Markiert das Theme die ganze Seite als Live-Region, was Screenreader jede Änderung vorlesen lässt, wird das entfernt. Fügt das Skript einer Extension sie hinzu, während die Seite läuft, bleibt das einem Menschen überlassen.

Ein eingebetteter Frame ohne Titel, etwa eine Karte, ein YouTube- oder Vimeo-Video, ein Kalender, ein Formular oder ein Bewertungs-Widget, erhält einen übersetzbaren Titel, der sagt, was er zeigt. Das Rezept liest aus der Adresse des Frames, einschließlich der festen Teile einer Adresse, die PHP-Code zusammensetzt, sowie aus seinen Klassen, seiner ID und seinem Namen, was der Frame zeigt. Ein Frame, dessen Inhalt der Code nicht verrät, erhält vom Rezept keinen Titel und bleibt einem Menschen überlassen.

Besteht Text die Kontrastprüfung nicht und ist seine Farbe an genau einer Stelle im Theme definiert, wird diese Stelle auf die nächste Farbe desselben Farbtons geändert, die gegenüber jedem Hintergrund, den der Scan dafür gemessen hat, den erforderlichen Kontrast erreicht. Eine Stelle kann eine LESS-Variable oder CSS-Variable sein, die nur für die Textfarbe verwendet wird, oder eine einzelne color-Regel. Liefert das Theme eine kompilierte styles-m.css mit, erhält sie dieselbe Änderung. Eine Farbe, die an mehreren Stellen verwendet wird, auch als Hintergrund oder Rand, oder in Regeln, deren Hintergrund der Scan nicht gemessen hat, bleibt einem Menschen überlassen.

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 schon einen Text oder einen Namen hat, etwa eine Aktionskachel mit eigener Überschrift; es ist ein Icon, höchstens 48 Pixel groß oder mit einer Icon-Klasse oder einem Icon-Dateinamen, 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 einen Dateinamen vorzulesen. Jedes andere Bild gilt als Inhalt, und seine Textalternative braucht Worte, die ein Mensch wählt.

Anklickbare <div>- und <span>-Elemente in Slidern und Cookie-Bannern werden zu echten Schaltflächen. Das Rezept zählt ein Element nur dann als Bedienelement, wenn der Code es so ausweist: Es hat role="button", einen Klick-Handler oder ein Click-Binding von Knockout oder eine Klasse oder ein Data-Attribut, das das Skript des Themes anspricht, um Klicks zu verarbeiten. Klassen, Data-Attribute und ARIA-Attribute bleiben erhalten, sodass die Styles und Skripte des Themes das Bedienelement wie bisher finden, und die Eingabetaste und die Leertaste bewirken nun, was ein Klick bewirkt. Ein kleines Style-Reset am Ende des Stylesheets des Themes bewahrt sein Aussehen, auch bei Hover und Fokus, und Fokusrahmen werden nicht angetastet. Ein Bedienelement, das Blöcke, Links oder Felder enthält oder keine Klasse hat, bleibt einem Menschen überlassen.

Schaltflächen und Links, die nur ein Icon zeigen, etwa für Suche, Mini-Warenkorb, Konto, Wunschliste, Vergleich, Menü, Schließen, Zurück und Weiter sowie die Auswahl eines Cookie-Banners, erhalten ein aria-label, das sagt, was sie tun, im Wortlaut des Themes Luma von Magento, wo Luma einen hat, etwa „Search“, „My Cart“ oder „Allow Cookies“. Der Zweck wird aus den Klassen, der ID, den Data-Attributen und dem Linkziel des Bedienelements, aus seinem Icon und aus dem Formular oder Cookie-Banner darum herum abgelesen. Ein Bedienelement, dessen Zweck der Code nicht verrät, etwa ein Social-Media-Link, der in einer Schleife aus einer als Daten gespeicherten Adresse gebaut wird, oder ein Link, dessen einziger Inhalt ein Produktfoto ist, bleibt einem Menschen überlassen, weil sein Name von Ihren Inhalten abhängt.