Barrierefreiheit in CMS Komponenten
Einleitung
Dieses Dokument dient als zentraler Leitfaden für Händler und Agenturen, um die Anforderungen an die Barrierefreiheit von Onlineshops zu verstehen und umzusetzen – mit besonderem Fokus auf die CMS-Komponenten und Inhalte in SHOPcloud360.
Barrierefreiheit im Internet stellt sicher, dass digitale Angebote für alle Nutzer zugänglich und bedienbar sind – unabhängig von individuellen körperlichen, sensorischen oder technischen Voraussetzungen. Zu den wesentlichen Aspekten gehören eine klare Navigation, gut lesbare Texte, konsistente Lokalisierungen, ausreichende Farbkontraste, die vollständige Bedienbarkeit per Tastatur oder Screenreader sowie die Bereitstellung alternativer Texte für nicht-textuelle Inhalte.
Der Leitfaden beschreibt praxisorientiert, wie CMS-Komponenten und Inhalte in SHOPcloud360 barrierearm gestaltet werden können. Er enthält konkrete Handlungsempfehlungen, Code-Beispiele und Best Practices zur Umsetzung der WCAG-Richtlinien und damit verbundener gesetzlicher Vorgaben. Das Dokument ersetzt kein vollständiges Accessibility-Audit, unterstützt jedoch bei der täglichen Arbeit an barrierefreien Storefronts und trägt zur rechtlichen Absicherung sowie zur Erweiterung der Zielgruppe bei.
Tests
Der Faktor zur Erreichung der Barrierefreiheit wird mit Google Lighthouse ermittelt. Es handelt sich hierbei um ein Analyse-Tool, welches sowohl die bereits erfüllten als auch die noch offenen Punkte in einem Report sammelt. Der Bericht kann über die Entwicklertools > Lighthouse oder über die Webseite erstellt werden.
Das Erreichen der vollen Punktzahl ist aus technischen Gründen nicht möglich.
Grund: Die Möglichkeit, der Navigation eigene CMS Komponenten hinzuzufügen, bindet weitere (Barrierefreiheit-unkonforme) Elemente unterhalb der Listenelemente ein.
Anleitung
In diesem Kapitel werden häufig auftretende Probleme gelistet. Als Hilfestellung können die Beispiele und Lösungsvorschläge genutzt werden, um einen bestmöglichen Barrierefreiheits-Score zu erreichen.
Contrast — Farben und Kontraste
„Background and foreground colors do not have a sufficient contrast ratio“
Der Farbkontrast zwischen Schrift- und Hintergrundfarbe muss hoch genug sein, damit der Text als leserlich gilt. Es gibt eine Vielzahl an Farbkontrast-Analysetools, die zu Überprüfung verwendet werden können, ob die gegebenen Farbkontraste als ausreichend gelten.
Mehr dazu hier.
Folgend ein Beispiel zu den Produkt-Labels in den Produktkacheln und der PDP:
Wenn der Kontrast nicht hoch genug ist, sollte die Farbauswahl angepasst und die CSS-Stylings überschrieben werden:
Ist-Zustand | Soll-Zustand |
|---|---|
.product-label.product-label-EXTRA {
background-color: #ff5733;
} | .product-label.product-label-EXTRA {
background-color: #E02700;
} |
Names and Labels — Links, Bilder, Überschriften und deren Titel und Alt-Texte
„Links do not have a discernible name“
Diese Meldung bezieht sich auf Links, die keinen Text (sondern z.B. ein Bild) tragen.
Beim Hinzufügen von Links, sollte zu jeder Zeit darauf geachtet werden, dass ein beschreibendes title-Attribut definiert wird.
Mehr dazu hier.
Folgend ein Beispiel zu einer typischen Content-Box auf einer Startseite:
Screen-Reader können zwar geschriebenes lesen, können aber keine Bilder und Links verstehen.
Daher müssen hier verständliche titles für Links (Beschreibung, wohin der Link führt) und alt-Texte für Bilder (Beschreibung, was auf dem Bild zu sehen ist) hinzugefügt werden:
Ist-Zustand | Soll-Zustand |
|---|---|
<a href="..." target="_blank" rel="noopener">
<img src="..." alt="" width="320" height="180" />
</a>Ohne WYSIWYG-Editor | <a href="..." target="_blank" rel="noopener" title="Lesen Sie mehr über Reparaturservice und Eigene Werkstatt">
<img src="..." alt="Vorschaubild Reparaturservice und Eigene Werkstatt - Ein blauer Firmenwagen mit der Aufschrift „....“ steht vor einem geschlossenen Garagentor. Auf der Seite des Fahrzeugs sind Bilder von einem Schweißer mit Schutzmaske und zwei Schweißtechnik-Geräten zu sehen. Unter den Bildern sind die Wörter „Beratung“, „Service“, „Vertrieb“ und „Schweißtechnik“ in gelben Kästen hervorgehoben." width="320" height="180" />
</a>Ohne WYSIWYG-Editor |
|
|
|
|
Hinweis: Wenn Bilder angezeigt werden sollen, ist es idR. immer von Vorteil die Bilder mithilfe der “Verbesserte Teaserabbildung”-Komponente anzuzeigen, da es dort ganz einfach möglich ist, ein Bild für die mobile Ansicht auszuwählen.
„Image elements have [alt] attributes that are redundant text“
Beim Hinzufügen von Bildern, sollten alt-Texte verwendet werden, die das Bild beschreiben und sich möglichst von dem dazugehörigen Text unterscheiden.
Mehr dazu hier.
Folgend ein Beispiel zu einer typischen Produktgruppen-Kachel-Box auf einer Startseite:
Bei diesen Produktgruppen- bzw. Kategorie-Vorschaubildern handelt es sich um Links, die zu der jeweiligen Kategorie weiterleiten. Außerdem werden die Kategorienamen über dem Bild angezeigt.
Der Lighthouse-Report bemängelt an diesem Beispiel, dass der gesetzte alt-Text zu nah an der dazugehörigen Überschrift formuliert ist (“Werkzeug“ vs. “Werkzeuge“).
Die Lösung wäre, einen alt-Text zu formulieren und zu setzen, welcher das Bild beschreibt:
Ist-Zustand | Soll-Zustand |
|---|---|
Überschrift: “Werkzeuge“ Alternativtext: “Werkzeug” | Überschrift: “Werkzeuge“ Alternativtext: “Mehrere Präzisionsmesswerkzeuge, darunter Messschieber, Winkelmesser, eine Messuhr und ein digitaler Messschieber, liegen auf einer Metalloberfläche.“ |
|
|
|
|
Um einen schnellen Überblick über gesetzte oder fehlende Alternativtexte zu bekommen, kann die Browser-Extension “WAVE” genutzt werden (hier gehts zur Chrome-Extension).
Navigation — Überschriften-Hierarchie
„Heading elements are not in a sequientially-descending order“
Dieser Punkt gilt als erfüllt, wenn die Überschriften auf einer Seite einer hierarchischen und logischen Struktur folgen: absteigend von h1 bis h6.
Komponenten, die der Homepage hinzugefügt werden, sollten mit der Heading h2 beginnen und hierarchisch absteigend fortgeführt werden (mehr dazu im Unterkapitel Besonderheit Homepage).
Hinweis für Agenturen im Kapitel Überschriften.
Mehr dazu hier.
Folgend ein Beispiel aus dem Footer:
Hier sollten die <h5>-Tags durch ein <h2>-Tag getauscht werden. Wenn das Styling der <h5> beibehalten werden soll, muss die CSS-Klasse h5 hinzugefügt werden.
Ist-Zustand | Soll-Zustand |
|---|---|
<div class="footer-content row justify-content-between pt-2 px-3">
<div class="col mb-3 p-5">
<h5>Über uns</h5>
<ul>
...
</ul>
</div>
<div class="col mb-3 p-5">
<h5>Kundenservice</h5>
<ul>
...
</ul>
</div>
<div class="col mb-3 p-5">
<h5>Zahlungsarten</h5>
<div class="payment-icons">
...
</div>
</div>
<div class="col mb-3 p-5">
<h5>Versandpartner</h5>
<div class="shipping-icons">
...
</div>
</div>
</div>Ohne WYSIWYG-Editor | <div class="footer-content row justify-content-between pt-2 px-3">
<div class="col mb-3 p-5">
<h2 class="h5">Über uns</h2>
<ul>
...
</ul>
</div>
<div class="col mb-3 p-5">
<h2 class="h5">Kundenservice</h2>
<ul>
...
</ul>
</div>
<div class="col mb-3 p-5">
<h2 class="h5">Zahlungsarten</h2>
<div class="payment-icons">
...
</div>
</div>
<div class="col mb-3 p-5">
<h2 class="h5">Versandpartner</h2>
<div class="shipping-icons">
...
</div>
</div>
</div>Ohne WYSIWYG-Editor |
| + Hinzufügen von |
Besonderheit Homepage
Im Rahmen der Verbesserungen für Barrierefreiheit wurde eine h1-Überschrift zur Homepage hinzugefügt. Diese ist für den normalen Nutzer nicht sichtbar, dafür aber für den Browser und Screen-Reader lesbar.
Diese neue und besondere Überschrift kann über das Backoffice unter Lokalisierung > Lokalisierungsverwaltung angepasst werden. Der Schlüssel (Lokalisierungs-Key) heißt: pwa-seo.title.home.
Besonderheit <h1>-Tag
Eine Seite sollte nur einen <h1>-Tag besitzen (deswegen sollten die Homepage-Komponenten auch mit der h2 beginnen).
Videos
„<video> elements contain a <track> element with [kind="captions"]“
Diese Meldung sagt aus, dass den Videos das track-Tag hinzugefügt werden muss.
Mehr dazu hier.
Folgend ein Beispiel:
Hier sollte das track-Tag mit der jeweiligen Ressource und den dazugehörigen Attributen mit dem video-Tag verknüpft sein, um Video-Untertitel in den jeweiligen Sprachen bereitzustellen.
Ist-Zustand | Soll-Zustand |
|---|---|
<video src="...-betriebseinrichtungen.mp4" autoplay="autoplay" loop="loop" muted="" width="100%" height="auto">
</video> | <video src="...-betriebseinrichtungen.mp4" autoplay="autoplay" loop="loop" muted="" width="100%" height="auto">
<track
kind="captions"
src="...-betriebseinrichtungen-auditrack.mp4"
srclang="de"
label="Deutsche Tonspur"
default
/>
</video> |
Alternativ kann dies durch Verwendung der CMS-Komponente „EDE - Video“ und dem darin enthaltenen Eingabefeld „Ton- oder Untertitelspur“ erreicht werden.
Eine Untertitelspur kann beispielsweise als vtt-Datei hochgeladen werden und ist letztendlich nur eine Text-Datei, die Zeitstempel und den dazugehörigen anzuzeigenden Text enthält. Hier ein Ausschnitt einer Beispiel-Tonspur:
WEBVTT
00:00:00.000 --> 00:00:01.000
Ansell
00:00:01.100 --> 00:00:04.100
HyFlex® 11-719 ESD
00:00:04.124 --> 00:00:07.024
Helps workers stay connected while staying protected and efficient
00:00:07.048 --> 00:00:09.848
Our first LIGHTEST WEIGHT and BREATHABLEEs gibt mittlerweile eine Vielzahl an Programmen, die das Generieren einer Untertitelspur ermöglichen. Es ist also nicht zwingend notwendig, Untertitelspuren manuell zu formulieren.
Hinweise für Agenturen
Überschriften
Im Rahmen der Verbesserungen für die Barrierefreiheit, wurden Überschriften an manchen Stellen so angepasst, dass sie hierarchisch und logisch korrekt sind.
Die angepassten Überschriften haben eine CSS-Klasse erhalten, um die Stylings beibehalten zu können:
Vorher <h3>Überschrift</h3> | Nachher <h2 class="h3">Überschrift</h2> |
|---|
Mehr dazu in Kapitel Heading elements are not in a sequientially-descending order.