Einen Shopware Onlineshop barrierefrei machen

Barrierefreiheit im Internet - Was heißt das?

Laut dem Statistischem Bundesamt Destatis lebten Ende 2023 ca. 7,9 Millionen Menschen mit einer schweren Behinderung in Deutschland, umgerechnet also fast jeder Zehnte. Menschen mit Behinderungen sind auf assistierende Hilfe angewiesen und benötigen häufig Hilfsmittel zur Bewältigung der Barrieren, die der Alltag für sie bereithält.

Mit der Einführung des Barrierefreiheitsstärkungsgesetzes (BFSG) sollen diese Barrieren online abgebaut werden, eine sichere Nutzung von digitalen Angeboten für Anwender mit Behinderungen gewährleistet sein.

Grundlegend geht es hierbei um folgenden Fokus:

Webseiten sollen mit Tastaturen bedienbar sein
Texte sollen klar erkenn- und lesbar sein
Alle wichtigen Elemente sollen für alle Nutzer bedienbar sein.
Der Farbkontrast ist hoch und alle Elemente sind voneinander unterscheidbar
Screen Reader können Inhalte von Texten und anderen Elementen erfassen und vorlesen
Sensible Störfaktoren wie Flackern oder Geräusche sollen vermieden werden.

Als Grundlage für diese Richtlinien gilt das WCAG 2.1., an dem sich Webseitenbetreiber orientieren können, um die eigene Webseite barrierefrei zu machen.
Das WCAG 2.1. macht von 4 Grundprinzipien Gebrauch:

Wahrnehmbar

Der Webbetreiber muss sicherstellen, dass jeder Nutzer ohne fremde Hilfe in der Lage ist, jedes Element auf der Webseite wahrzunehmen.

Bedienbar

Der Webbetreiber muss sicherstellen, dass jeder Nutzer ohne fremde Hilfe in der Lage ist, alle Elemente auf der Webseite zu bedienen.

Verständlich

Der Webbetreiber muss sicherstellen, dass jeder Nutzer in der Lage ist, den Inhalt und die Funktion der Webseite zu verstehen.

Beständig

Der Webbetreiber muss sicherstellen, dass die Webseite auf künftigen Assistenz-technologien funktionieren wird.

Welche Möglichkeiten gibt Shopware, um den Store barrierefrei zu machen?

Seit Shopware 6.6 bringt das System in der Standard-Theme bereits einige Funktionen mit, die eine barrierefreie Nutzung möglich machen.

Bedienung & Fokussierung über die Tastatur

Vorlesbare ALT-Texte für Bilder und Icons

Deutlich sichtbare Warnkomponente

Hinweise bei Formularfehlern

Vorsicht bei Anpassungen!

Wenn Sie ein neues Shopware Theme visuell anpassen oder Änderungen im generellen Template vornehmen, können unerwünschte Einschränkungen und Verschlechterungen bei Aspekten der Barrierefreiheit Ihres Shopware Onlineshops auftreten. Wir empfehlen, dass Sie vor Liveschaltung die Anpassungen vorher in einer Testumgebung nach Einschränkungen in der Barrierefreiheit überprüfen. Dies gilt ebenso bei der Installation von Shopware Erweiterungen oder regelmäßigen Updates.

Best Practices für einen barrierefreien Shopware 6 Online-Shop

Verwenden Sie Alt-Texte bei Bildern

Versehen Sie alle Bilder, die eine wichtige Funktion auf Ihrer Webseite haben (Beitragsbilder, Produktbilder etc.) mit einem Alt-Text.

Alt-Texte sind auf den Seiten selbst nicht sichtbar, doch unglaublich wichtig für ScreenReader. Anstelle des Bildes greift der Assistent auf den Alt-Text zu und liest den Text aus diesem vor. Auch Bots können diesen Alt-Text lesen, weshalb dieser auch für die SEO-Sichtbarkeit vorteilhaft ist.

Um einen Alt-Text zu einem Bild hinzuzufügen, gehen Sie im Admin auf Medien und suchen Sie das Bild heraus, welches ein Alt-Text erhalten soll.

Auf der rechten Seite sehen Sie eine Sidebar mit den Meta-Daten, dort können Sie den Alt-Text einfügen.

Achten Sie bei der Erstellung des Alt-Textes auf folgende Punkte:

Der Text darf nicht zu lang sein. Halten Sie sich an eine Länge von 1-2 kurzen Sätzen
Geben Sie im Alt-Text nur wieder, was zu sehen ist, verwenden Sie keine eigenen Interpretationen.
Schreiben Sie in ganzen Sätzen, sodass es logisch ist
Vermeiden Sie die Verwendung von Anglizismen, damit der ScreenReader den Text in der ausgewählten Sprache gut verständlich wiedergeben kann.

ALT-Text:„Palmen im Wind“

ALT-Text: „Ein karibischer Strand bei Sonnenschein, mit zwei Palmen, die vom starken Wind angeweht werden.“

Beschreibende Produkttitel verwenden

Verzichten Sie darauf, im Produkttitel einzig und allein den Produktnamen einzusetzen. Dies kann Ihnen nicht nur kostbare Sichtbarkeit durch fehlende Keywords nehmen. Es verhindert außerdem, dass Menschen mit Sehbeeinträchtigungen sofort verstehen, worum es sich bei Ihrem Produkt handelt. Dieser Fall tritt ein, wenn der eingesetzte ScreenReader nur einen allgemeingültigen Produkttitel vorlesen kann anstelle einer Kombination aus Produkt, Hersteller/Marke und wichtigster Eigenschaft.

Fügen Sie kurze, beschreibende Worte zu Ihrem Produkt hinzu, die vor allem Art, Farbe & Beschaffenheit des Produktes erklären und somit barrierefrei zur Verfügung stehen, auch in anderen durch Shopware erstellten Verkaufskanälen wie beispielsweise dem Google Feed.

Produktbeschreibungen pflegen

Nicht nur aus der Sicht der besseren Verkaufschance ist eine Produktbeschreibung immer ein Vorteil. Auch für die Barrierefreiheit helfen Sie potenziellen Kunden mit verschiedenen Beeinträchtigungen sich ein besseres Bild Ihres Artikels zu machen.

Verzichten Sie bei der Beschreibung auf komplexe Worte oder, wenn diese nicht umgeschrieben werden können, versuchen Sie sie kurz und knapp zu erklären. Nutzen Sie ebenso keine Anglizismen, wenn sie nicht nötig sind.

Teilen Sie die Beschreibung in verschiedene Abschnitte mit entsprechenden Zwischenüberschriften auf, um eine klare und logische Struktur darzustellen.

Am wichtigsten ist die Produktbeschreibung an sich: geben Sie alle wichtigen Details wieder, die das Produkt ausmacht, wie es aussieht, seine Funktionen und Spezialitäten. Füllen Sie die Beschreibung nicht zu sehr mit typischem Marketingslogan wie „Die neueste Technologie aus Deutschland“ .

Benutzen Sie Stichpunkte nur für echte Aufzählungen. Fassen Sie die Funktionen nicht in gebrochene Sätze zusammen, sondern stellen Sie eine flüssige und logische Beschreibung her, die angenehm zu lesen bzw. zu hören sind.

Navigation logisch und leicht zugänglich aufbauen

In den meisten Fällen sind Navigationsbereiche so aufgebaut, dass erst die Hauptkategorien sichtbar und durch „hovern“ oder Klick mit der Maus weitere Unterkategorien sichtbar werden. Aus den Augenwinkeln eines Menschen, der einen ScreenReader nutzt, zeigen sich diese erst, indem der Fokus der Tastatur auf der Kategorie befindet und diese durch das Drücken einer Taste, überwiegend der Leertaste, aufklappt.

Shopbetreiber müssen daher bei der Formulierung der Kategorien für die Navigationsleiste auf kurze, beschreibende Worte zurückgreifen. Fassen Sie Ihre Produkte in mehrere Unterkategorien und diese wiederum in Oberkategorien zusammen. Verwenden Sie einzelne Wörter und nutzen Sie die Kategoriebeschreibung, um weitere wichtige Details hinzuzufügen.

Verzichten Sie auf kreative Kategorien wie z.B.: „Alles zum Essen“ für Nahrungsmittel, „Schneiderei“ für Nähutensilien oder „Glitzer & Glamour“ für Modeschmuck. Beachten Sie, dass die Kategorien mit ihren Namen vorgelesen werden, daher ist es unvorteilhaft für Ihren Online-Shop undeutliche Beschreibungen zu verwenden.

Überschriften in der vorgesehenen Reihenfolge nutzen

Damit ScreenReader und andere hilfreiche Tools die Struktur des Inhalts Ihrer Webseite verstehen und nachvollziehen können orientieren Sie sich an den Überschriften. Überschriften werden mit einem Tag von H1 bis H6 versehen und beschreiben damit die Hierarchie dieser Überschrift. Je niedriger die Zahl, desto wichtiger ist die Überschrift für den darauffolgenden Content.

H1 Überschriften werden für die erste und allgemeine Überschrift der Seite genutzt, meist als Titel der Seite selbst. In Shopware sind diese häufig die Seiten- bzw. Produkttitel.

H2 Überschriften sind die erste Überschrift des nächsten Contents, können aber auch als Unterüberschrift der H1-Überschrift verwendet werden. Auf Produktseiten in Shopware-Systemen stellt sich die H2-Überschrift mit “ Produktinformationen „…“ “ dar.

H3 Überschriften gelten als die ersten Zwischenüberschriften. Sie werden genutzt, um den Content in sinnvolle Absätze aufzuteilen. In Shopware Produktseiten ist dies die erste Überschrift, die man in der Beschreibung einsetzen muss.

H4-H6 werden als Überschriften genutzt, um den Content untereinander nochmals auf der Seite in verschiedene Unterteile zu strukturieren.

Nutzen Sie immer logische Reihenfolgen, um den Aufbau Ihrer Seite klar und verständlich zu machen. Nutzen Sie z.B. keine H3 als Hauptüberschrift oder unterteilen ihren Content mit H2 Überschriften, wenn nicht unbedingt nötig.

Schrift, Links & Kontrast wahrnehmbar gestalten

Eines der wohl wichtigsten Komponente, die ein Shopbetreiber beim Aufbau seiner Webseite beachten muss, ist der sogenannte Kontrast. Dieser zeigt den Unterschied zwischen Farbpartikeln an und misst diesen anhand der Helligkeit der jeweiligen Farben.

Ein schlechter Farbkontrast sorgt dafür, dass Ihre Texte nicht nur für sehbeeinträchtigte Menschen unleserlich werden. Ein heller Text auf hellem Hintergrund lässt die einzelnen Wörter im Hintergrund verschwinden, während helle Schrift auf dunklem Hintergrund ggf. zu stark ist und die Augen zu sehr anstrengt. Für ein angenehmes und barrierefreies Shopping-Erlebnis sollten Sie demnach auf zu grelle Farben verzichten.

Nutzen Sie für Ihre Schrift immer eine Größe von mindestens 14 Pixel. Eine zu kleine Schrift ist schon bei der kleinsten Sehbehinderung schwierig zu erfassen und simit nicht barrierefrei.

Heben Sie Links deutlich aus dem Text hervor. Markieren Sie ihn fett, farbig und / oder unterstrichen. Auch die Nutzung von Symbolen wie einem Linksymbol kommen infrage. Wichtig ist, dass der Link als solcher deutlich erkennbar ist.

In vielen Systemen ist es möglich, mit einem einfachen Klick die Schrifteinstellungen zu vergrößern, doch um dies Einzustellen benötigt es technische Versiertheit oder ein Plugin.

Was ist denn schon barrierefrei? Wozu brauche ich das überhaupt?

Barrierefreiheit trifft so gut wie jeden!

Haben Sie weitere Fragen zu Shopware?

Gern beantworten wir diese.
Bitte kontaktieren Sie uns auf folgenden Wegen: