Barrierefreiheit wird Pflicht! Rechtsgrundlagen und Tipps zur Umsetzung für mehr Zugänglichkeit in Ihrem Onlineshop

Es gibt eine ganze Reihe von Verordnungen, die die Barrierefreiheit von Webseiten und mobilen Apps regeln sollen. Welche bereits gelten und welche schon in naher Zukunft relevant sein werden, zeigen wir Ihnen jetzt. Schon heute gültig: Richtlinien und Verordnungen für öffentliche Stellen

EU-Richtlinie 2016/2102

Die EU-Richtlinie 2016/2102 ist eine Richtlinie der Europäischen Union über den barrierefreien Zugang von Websites und mobilen Anwendungen öffentlicher Stellen. Die Richtlinie soll sicherstellen, dass Menschen mit Behinderungen im Umgang mit Webseiten öffentlicher Institutionen im Web kein Nachteil entsteht.

Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)

Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) ist die deutsche Umsetzung der EU-Richtlinie 2016/2102. Die Verordnung schreibt vor, dass öffentliche Stellen, wie z. B. Behörden, Universitäten und Schulen, ihre Websites und mobilen Anwendungen barrierefrei gestalten müssen. Die Anforderungen der BITV 2.0 orientieren sich stark an den internationalen Web Content Accessibility Guidelines (WCAG).

Web Content Accessibility Guidelines (WCAG)

Die Web Content Accessibility Guidelines (WCAG) sind internationale Standards für die barrierefreie Gestaltung von Smartphone-Apps und Websites. Die Guidelines beschreiben, wie Websites und Anwendungen so gestaltet werden können, dass sie für Menschen mit Behinderungen zugänglicher sind. Dazu geben sie Empfehlungen und Richtlinien für die allgemeine Aufmachung von Inhalten, wie z. B. Text, Bildern, Audio und Video, sowie für die Navigation und Interaktion mit der Website. Die WCAG sind in drei Stufen unterteilt: Level A, Level AA und Level AAA. Jede Stufe hat verschiedene Anforderungen und Ziele, die erreicht werden müssen, um eine bestimmte Stufe der Barrierefreiheit zu gewährleisten. Die meisten Organisationen streben mindestens die Stufe AA an, da sie ein hohes Maß an Barrierefreiheit und gleichzeitig ein gesundes Verhältnis zwischen Aufwand und Nutzen bietet. Das ist der Grund dafür, weshalb diese Stufe in vielen Ländern als Goldstandard für die barrierefreie Gestaltung gilt.

Das WCAG Level AA umfasst:

• Textalternativen für alle nicht-textuellen Inhalte wie Bilder, Videos oder Audio.
• Gute Farbkontrastverhältnisse, damit Texte für Personen mit Sehschwierigkeiten lesbar sind.
• Eine einfache Navigation und Orientierung auf der Website, z. B. durch klare Überschriftenstruktur und sinnvolle Links.
• Möglichkeiten zur Anpassung der Darstellung, z. B. durch die Möglichkeit, die Schriftgröße oder den Kontrast zu erhöhen.
• Bedienbarkeit der Website ohne Maus, bspw. indem sich alle Funktionen der Seite auch über die Tastatur steuern lassen.
• Vermeidung von Inhalten, die Anfälle auslösen können, wie z. B. blinkende Bilder oder schnell wechselnde Farben.

Die Europäische Union hat ein Gesetz verabschiedet, dass die allermeisten Unternehmen zu mehr Barrierefreiheit bei Produkten und Dienstleistungen verpflichtet. In Deutschland existiert bereits eine Auskopplung der europäischen Verordnung. Das wussten Sie nicht? Damit sind Sie nicht allein! Wir fassen den europäischen und den deutschen Entwurf für Sie zusammen.

European Accessibility Act (EAA) Der European Accessibility Act (EAA) ist eine Verordnung der Europäischen Union, die bereits 2019 verabschiedet wurde und am 28. Juni 2022 in Kraft getreten ist. Dabei wurde jedoch eine Übergangszeit von drei Jahren festgesetzt. Damit wird die Verordnung am 28. Juni 2025 für alle Unternehmen verpflichtend. Der EAA soll die Barrierefreiheit von Produkten und Dienstleistungen für Menschen mit Behinderungen in der gesamten Europäischen Union verbessern. Die Regelung betrifft eine Vielzahl von Produkten und Dienstleistungen, wie z. B. Computer und Betriebssysteme, Bankdienstleistungen, Telekommunikation, Verkehrsmittel, E-Books und den E-Commerce. Genau wie die BITV 2.0, ist der EAA bei letzterem stark an die Vorgaben des WCAG angelehnt. Als Europäische Verordnung gilt der Accessibility Act für alle Unternehmen, die Waren in den Mitgliedsstaaten der EU vertreiben.

Barrierefreiheitsbestärkungsgesetz (BSFG)  

Das Barrierefreiheitsbestärkungsgesetz (BSFG) ist im Wesentlichen die deutsche Auskopplung des EAA. Ziel des Gesetzes ist es, die Barrierefreiheit von Websites und mobilen Apps in Deutschland zu verbessern und sicherzustellen, dass sie den Anforderungen der Web Content Accessibility Guidelines (WCAG) auf Level AA oder höher entsprechen.

Bin ich vielleicht von den Vorgaben ausgenommen?

Sie fragen sich vielleicht, ob Sie bzw. Ihr Unternehmen nicht eventuell von den Auflagen unberührt bleibt. Die gute Nachricht: Es gibt bei den Anforderungen zur Barrierefreiheit tatsächlich Ausnahmen. Die schlechte: Sie gelten nur für sehr kleine Unternehmen. Wenn Ihr Unternehmen weniger als 10 Mitarbeiter beschäftigt, müssen Sie die Auflagen des EAA und des BSFG nicht erfüllen. Dasselbe gilt, wenn Sie eine Umsatzgrenze von 2 Millionen Euro jährlich nicht überschreiten.

Selbst wenn Sie von der Ausnahmeregelung der EAA und/oder des BSFG betroffen sind, lohnt es sich allemal, die Standards der WCAG umzusetzen und so die Barrierefreiheit Ihres Onlineshops zu verbessern. Warum? Weil die Barrierefreiheit einer von vielen Faktoren bei der Suchmaschinenoptimierung ist.

Best Practise: Neuer Webshop bei KUBO

ESYON hat für die KUBO Tech AG eine besonders nutzerfreundliche E-Commerce-Plattform realisiert. Klare Farbkontraste und eine intuitive Navigation machen das Nutzererlebnis besonders zugänglich. Bei Google bewertet den Store für seine Barrierefreiheit mit 94 von möglichen 100 Punkten. In unserem Blog haben wir das Projekt Revue passieren lassen.

1. Schriftgrößen anpassen

Damit Texte auf Ihrer Webseite ideal lesbar sind, sollten Sie einen geeigneten Schriftgrad wählen. Die Schriftgröße sollte sowohl für die Desktop-Anzeige als auch für die mobile Version nicht unter 16px liegen.

2. Ausdruck vereinfachen

Gerade Menschen mit Migrationshintergrund oder Leserechtschreibschwäche kann es schwerfallen, die Inhalte von Webseiten schnell zu erfassen. Verwenden Sie daher einen einfachen Ausdruck und verzichten Sie wenn möglich auf Abkürzungen, Fachausdrücke oder Fremdwörter. Wann immer ein Verzicht nicht möglich ist, sollten Sie kurze Erklärungen für Ihre Leser formulieren bzw. eine Übersetzung liefern. Falls Sie die Lesbarkeit Ihrer Texte überprüfen wollen, ließe sich das mit dem sog. Lesbarkeitsindex (LIX) bewerkstelligen. Dieser ermittelt einen Punktewert, der sich u. a. aus der Anzahl längerer Worte (mehr als sechs Buchstaben) und der durchschnittlichen Satzlänge ergibt.

Der LIX unterscheidet je nach Punktzahl zwischen den folgenden Textgattungen:

• unter 40: Kinder- und Jugendliteratur
• 40 bis 50: Belletristik
• 50 bis 60: Sachliteratur
• über 60: Fachliteratur

Wichtig: Da sich Texte je nach Komplexität des Themas sehr stark voneinander unterscheiden, ist auch der Lesbarkeitsindex nicht mehr als eine grobe Orientierungshilfe.

3. ALT-Attribute verwenden

ALT-Attribute, auch ALT-Tags genannt, beschreiben ein Bild in wenigen Worten und werden von Softwares für Sehbehinderte ausgelesen. Da die Vergabe von ALT-Tags seit Jahren von großer Bedeutung für die Suchmaschinenoptimierung ist, verfügt heutzutage nahezu jedes Content Management System (CMS) und jedes Shopsystem über eine Möglichkeit, Bilder mit ALT-Tags zu versehen. Manche Systeme erstellen beim Einfügen von Bildern auf einer Webseite auch automatisch generische ALT-Tags. Diese dienen jedoch mehr dazu, Google & Co. zufriedenzustellen, da Suchmaschinen das Fehlen von ALT-Attributen abstrafen. Zur Barrierefreiheit Ihrer Seite können diese Kurzbeschreibungen nichts beitragen, weshalb Sie Ihre ALT-Tags immer selbst vergeben sollten.

4. Aria-Rollen vergeben

Wie schon die ALT-Attribute, zahlen auch die Aria-Rollen auf die Verwendbarkeit Ihrer Seite mit Auslese-Tools für Sehbehinderte ein. Aria-Rollen definieren den Zweck einzelner Elemente Ihrer Seite. So weist z. B. der Tag roll=“button“ das Auslesewerkzeug darauf hin, dass es sich bei dem jeweiligen Element um eine klickbare Schaltfläche handelt. Sofern Sie ein modernes Theme für eines der gängigen CMS/Shopsysteme verwenden, brauchen Sie sehr wahrscheinlich nichts weiter zu tun. Die allermeisten Themes verfügen heutzutage von Haus aus über eine korrekte Zuweisung der Aria-Rollen. Ob das bei Ihrem Theme der Fall ist, lässt sich leicht mit Google Lighthouse überprüfen.

5. Farbkontraste abgleichen

Wie bereits erwähnt, ist ein gelungenes Farbkontrastverhältnis elementarer Bestandteil der WCAG. Mit Google Lighthouse haben wir Ihnen bereits eine Möglichkeit vorgestellt, den Kontrast Ihrer E-Commerce-Plattform zu bewerten. Allerdings setzt diese Bewertung voraus, dass Ihre Seite bereits live ist. Sinnvoller ist es, den Kontrast bereits bei der Konzeption Ihres Webdesigns zu berücksichtigen. Dafür eignen sich zahlreiche Tools, die einen Abgleich zwischen Vorder- und Hintergrundfarbe ermöglichen, z.B. der Contrast Checker von siteimprove.com.

6. Videos untertiteln

Untertitel ermöglichen es taubstummen Nutzern, die Inhalte Ihrer Videos besser zu verstehen. Dasselbe gilt für Nutzer, die gerade keinen Zugriff auf eine Soundausgabe haben oder diese nicht verwenden möchten, weshalb sich das Untertiteln doppelt lohnt. Mit Plattformen wie YouTube oder Vimeo lassen sich automatisch generierte Untertitel anlegen, die aus der Audiospur erstellt werden. Da diese nicht 100% genau sind, sollten Sie die Untertitel aber sorgfältig überprüfen und händisch editieren.

7. Links kennzeichnen

Um die Lesbarkeit Ihrer Seite noch weiter zu verbessern, sollten sich Links deutlich vom herkömmlichen Fließtext unterscheiden und nicht nur farblich abheben, sondern wenn möglich auch unterstrichen werden. Zudem sollten Sie jeden Link mit einem eigenen Ankertext ausstatten. Wenn Sie Bilder verlinken, sollten Sie diese so beschriften, dass die Verlinkung auch für den Nutzer erkennbar ist.

8. Navigation per Tabulator-Taste

Haben Sie schon einmal versucht, sich im Web per Tastatur zu bewegen? Die Wenigsten werden diese Frage wahrscheinlich mit “Ja” beantworten. Denn obwohl das Level AA der WCAG eindeutig eine Steuerung mittels Tastatur vorsieht, handelt es sich hierbei leider noch immer um ein Nischenthema. Nutzer, die es gewohnt sind, per Touchscreen oder mit der Maus durch eine Seite zu navigieren, kommt für gewöhnlich nicht der Gedanke, dass dies auch auf Knopfdruck möglich sein sollte. Dabei bringen aktuelle Browser die Grundfunktionalität bereits mit. Normalerweise wird die Navigation per Tastatur mit Hilfe der Tabulator-Taste realisiert. Bei Tastendruck springt der Cursor von einem Link zum nächsten. Das ausgewählte Element sollte visuell hervorgehoben sein (z. B. durch eine Umrandung). Die meisten Systeme unterstützen die Navigation mit der Tastatur bereits von Haus aus. Einige Elemente können die Navigation mittels Tastatur aber erschweren, z. B. Slideshows, Iframes oder dynamische Elemente. Versuchen Sie am besten, sich selbst durch Ihre Seite zu navigieren und sich ein Bild von der Bedienbarkeit mittels Tastatur zu überzeugen. Stellen Sie dabei fest, dass es an irgendeiner Stelle Probleme beim Durchtappen Ihrer Inhalte gibt, sollten Sie die Darstellung anpassen und ggf. auf andere Elemente zurückgreifen.

Komplett mit der Tastatur steuerbar: Der neue Webshop von erfal

Für den sächsischen Hersteller von Sonnen- und Insektenschutzprodukten durften wir bereits 2016 den Launch des ersten Onlineshops begleiten. Inzwischen erhielt dieser ein Redesign, bei dem vor allem auf Responsivität und Zugänglichkeit geachtet wurden. Nutzer können mit der Tabulatur- und der Entertaste frei durch den Webshop navigieren. In einem spannenden Interview schilderte uns Webshop Manager Martin Spinnler seine Eindrücke von dem Projekt.

Fazit

Das Thema Barrierefreiheit in Onlineshops spielt für den Gesetzgeber eine wichtige Rolle – und das ist auch gut so. Das Problem: Die Bestimmungen sind noch nicht bei denen, die sie umsetzen sollen, sprich den Unternehmen, angekommen. Wir hoffen, wir haben Ihnen einen guten Einblick in die Thematik gegeben und die meisten Ihrer Fragen mit diesem Beitrag geklärt. Sollten noch immer Dinge offen sein, kommen Sie gerne auf uns zu!

Welche Richtlinien gibt es für die Barrierefreiheit in Onlineshops?

Die Web Content Accessibility Guidelines (WCAG) sind ein international anerkannter Standard für die Barrierefreiheit von Websites und mobile Apps. Sie deklarieren Anforderungen und Empfehlungen für die Gestaltung anhand von drei Stufen: Level A, Level AA und Level AAA. Der European Accessibility Act (EAA) und das Barrierefreiheitsbestärkungsgesetz (BSFG), die die Barrierefreiheit auf europäischer bzw. auf Bundesebene regeln, orientieren sich stark an den Bestimmungen des WCAG.

Was bedeutet WCAG Level AA für die Barrierefreiheit in einem Onlineshop?

WCAG Level AA ist die mittlere Stufe der WCAG und wird oft als der Standard für die Barrierefreiheit von Webseiten und mobilen Anwendungen angesehen. Ein Onlineshop, der WCAG Level AA erfüllt, sollte für die meisten Nutzer zugänglich sein und Hindernisse beseitigen, die Menschen mit Behinderungen daran hindern könnten, den Shop zu nutzen.

Was sind die Vorteile einer barrierefreien Gestaltung?

Die Vorteile einer barrierefreien Gestaltung eines Onlineshops sind:

• Erreichbarkeit einer größeren Zielgruppe
• Einhaltung gesetzlicher Anforderungen
• Image- und Markenbildung als kundenorientiertes Unternehmen
• Verbesserung der Nutzererfahrung für alle Kunden