Ist mein Onlineshop barrierefrei? – Praxisleitfaden für Digital Accessibility

Es wird höchste Zeit, auch im E-Commerce einen Schritt in Richtung Inklusion und Gleichberechtigung zu gehen. Denn digitale Angebote, die für alle Menschen zugänglich sind, sind nicht nur ein Gebot der Fairness, sondern auch eine kluge Geschäftsentscheidung. Wie gelingt es, den eigenen Onlineshop barrierefrei und EAA-konform zu gestalten? Unser Praxisleitfaden gibt konkrete Empfehlungen.

Europaweit leben rund 101 Millionen mit einer Einschränkung. Für diese 27 Prozent der Bevölkerung ist Barrierefreiheit im Internet essenziell, um am digitalen Leben teilzuhaben. Doch gerade im E-Commerce gibt es in Sachen Inklusion und Gleichberechtigung noch viel zu tun: 4 von 5 Onlineshops sind laut einer aktuellen Studie von Google und Aktion Mensch noch immer nicht barrierefrei.

Mangelnde Tastaturbedienbarkeit, fehlende Video-Untertitel und Alternativtexte, Buttons ohne Beschriftung, schlechte Kontraste und Probleme durch Cookie-Banner sind nur einige der vielen Hürden, die die Nutzung digitaler Plattformen erschweren – nicht nur für Menschen mit einer offensichtlichen oder anerkannten Einschränkung.

Digitale Barrierefreiheit als Qualitätsmerkmal im E-Commerce

Durch eine barrierefreie Gestaltung werden Online-Erlebnisse dahingehend optimiert, dass alle Nutzergruppen problemlos mit einer digitalen Plattform und deren Elementen interagieren können. Das betrifft beispielsweise auch ältere Personen, für die angemessene Schriftgrößen und Kontraste bei nachlassender Sehfähigkeit wichtig sind. Mehrwert ergibt sich auch für Nicht-Muttersprachler*innen, die Texte in leichter Sprache besser verstehen. Generell profitiert jeder, der sich durch eine klare, intuitive Navigation und unmissverständliche Inhalte unkompliziert im Internet zurechtfinden möchte.

Bessere Usability minimiert die Nutzungshürden für alle Menschen und bringt positive Synergieeffekte für die gesamte Customer Journey sowie Web-Performance mit sich. Ein Beispiel ist die SEO-Freundlichkeit: Webseiten mit Untertiteln, sinnvollen Zwischenüberschriften und Alternativtexten, die von Screenreaders gut lesbar sind, werden auch von Google leichter verstanden und mit besseren Rankings belohnt. Das gilt natürlich auch für B2B-Unternehmen, die durch die barrierefreie Gestaltung ihrer digitalen Kanäle sichtbarer werden, den Kreis potenzieller Kund*innen erweitern und die User Experience verbessern möchten.

Wie wird Ihr Onlineshop EAA-konform?

Dass Hürden im Internet abgebaut werden müssen, hat auch der Gesetzgeber erkannt: Ab Juni 2025 wird digitale Barrierefreiheit für Onlineshops verpflichtend. Mit dem European Accessibility Act (EAA) treten eine Reihe neuer Richtlinien in Kraft, die Onlinehändler berücksichtigen müssen. Festgeschrieben sind diese in den Web Content Accessibility Guidelines (WCAG), für die in der EU der AA-Standard gilt, sowie einigen weiterführenden Prinzipien und DIN-Normen. Um diese Kriterien zu erfüllen, braucht es im ersten Schritt Verständnis dafür, welche Hindernisse auf den eigenen digitalen Plattformen auftreten. Unser Praxisleitfaden kann eine Hilfe sein, um Schwachstellen zu erkennen und Ihren Shop gezielt zu optimieren.

Praxisleitfaden für barrierefreie Onlineshops

Folgende 7 Punkte sollten Sie beachten, um ein Gefühl für Barrierefreiheitsstandards zu erhalten und Ihre digitalen Angebote EAA-konform zu gestalten:

1) Dokumenttitel

Der Dokumenttitel zeigt im Browser-Tab, was auf der Seite steht, und ist das Erste, was Nutzer*innen mit Bildschirmleseprogrammen sehen. Der Titel sollte daher so kurz und aussagekräftig wie möglich sein. Auf einer Produktseite beispielsweise sollte zunächst der Produktname, dann die Farbe des Produkts und schließlich das Label genannt werden.

• Testvorschlag:Öffnen Sie mehrere Tabs der gleichen Seite und überprüfen Sie, was im Dokumenttitel steht. Können die Seiten anhand der Tabs auseinandergehalten werden? Ist der Titel zu lang oder zu kurz?

2) Alternativtexte für Grafiken

Der Alternativtext sollte das Objekt und den Kontext einer Grafik beschreiben. Wenn die Grafik eine Funktion hat (z. B. als Button), sollte der Zweck vermittelt werden (z. B. „Weiter zur Kasse“). Bei reinen Dekorationsgrafiken kann auf den Alternativtext verzichtet werden.

• Testing-Tools erkennen, ob ein Alternativtext vorhanden ist, aber nicht, wie qualitativ hochwertig die Beschreibung ist. Untersuchen Sie den Quellcode im Browser und überprüfen Sie, was im Alternativtext steht: Ist die Beschreibung aussagekräftig und vermittelt den Zweck der Grafik?

3) Schaltflächen, Buttons & Links

Der Text auf Buttons und Links sollte klar vermitteln, was deren Ziel und Zweck ist, z. B. „Weiter zur Kasse“ statt nur „Weiter“. Buttons sollten mit der Enter-Taste bedienbar und die nachfolgende Aktion erkennbar sein. Schaltflächen, die keine Interaktionsmöglichkeiten bieten, sollten nicht hervorgehoben bzw. visualisiert werden.

• Testvorschlag: Prüfen Sie, ob Buttons und Links mit der Tab-Taste fokussierbar und mit der Enter-Taste bedienbar sind. Sehen Sie den Fokus und wird die Interaktion deutlich hervorgehoben?

4) Icons

Auch wenn die meisten Icons geläufig sind, sind sie nicht immer für alle verständlich. Selbst bekannte Icons wie das Kunden-Account-Icon oder das Such-Icon sollten beschriftet sein, um die Nutzung zu erleichtern.

• Testvorschlag: Prüfen Sie kritisch, ob alle Icons Ihres Shops ausreichend verständlich sind und ob Beschriftungen fehlen.

5) Formulare

Sowohl positives als auch negatives Feedback sollte direkt am Formularfeld sichtbar sein und nicht nur auf Farbänderungen basieren. Möglich ist z. B. ein Häkchen für positives Feedback. Eine Fehlermeldung sollten genau vermitteln, was falsch eingegeben wurde.

• Testvorschlag: Navigieren Sie die Formulare mit der Tab-Taste und prüfen Sie die sichtbaren Labels sowie das Feedback. Funktionieren die Tasten und ist das Feedback verständlich?

6) Design & Farben

Mit den Vorgaben der Web Content Accessibility Guidelines stellen Sie sicher, dass Kontraste, Zeichenabstände und Schriftgrößen EAA-konform sind.

• Testvorschlag: Verwenden Sie einen Contrast-Checker, um den Kontrast zwischen Text und Hintergrund zu überprüfen. Alle Kontrastverhältnisse sollten den AA-Standards entsprechen.

7) Zielführende Navigation

Vermeiden Sie überladene Menüs und setzen Sie auf konsistente Filteroptionen. Vorteilhaft für die bessere Nutzerführung sind Produkt-Konfiguratoren und Alternativen zu Drag-and-Drop-Filtern, z. B. Inputfelder.

• Testvorschlag: Überprüfen Sie, dass Ihre Navigation nicht mehr als sieben Submenüpunkte aufführt, ob Klickpfade zielführend und alle Filteroptionen verständlich sind.

Accessible Experience: Digitale Barrierefreiheit ganzheitlich voranbringen

Die Empfehlungen unseres Praxisleitfadens und vor allem die weltweit anerkannten 78 WCAG-Kriterien verdeutlichen, dass die EAA-konforme Umsetzung barrierefreier Onlineshops keine Aufgabe ist, die in wenigen Tagen von einzelnen Verantwortlichen erledigt werden kann. Es ist vielmehr ein Entwicklungsprozess, der sowohl technische und gestalterische als auch redaktionelle und kommunikative Aspekte umklammert und somit Expert*innen unterschiedlicher Disziplinen erfordert: IT-Teams, die valide Codes und Features programmieren (z. B. für die Lesbarkeit durch Assistenztools und Eingabehilfen bei Formularen), UX- und UI-Designer*innen, die für optimale Usability sorgen (z. B. durch eine intuitive Navigation, angemessene Typografie und Kontraste), aber auch Content Creator*innen, Product Owner und QA-Teams.