Richtlinien für barrierefreie Webinhalte: Ein Netz für Alle! Barrierefreiheit für deinen Shopify-Store

Den Weg für jeden Menschen frei machen - die neue Barrierefreiheit im Netz

Etwa neun Prozent aller Männer in Deutschland haben eine Rot-Grün-Sehschwäche. So lautet zumindest eine Schätzung des Bundesverbandes der deutschen Optiker. Damit wäre diese Form der Fehlsichtigkeit eine der häufigsten körperlichen Einschränkungen, unter denen Menschen in unserem Land leiden.

Rot-Grün-Sehbehinderte stoßen beim Surfen im Internet immer wieder auf Probleme: Dünne Linien und kleinteilige Elemente auf einer Website sind für sie nur schwer zu erkennen, Hervorhebungen in Rot fallen ihnen nicht auf. Eine besonders unglückliche Farbauswahl bei der Gestaltung einer Onlinepräsenz kann dafür sorgen, dass eine komplette Seite für sie unlesbar wird.

Die EU schreibt seit September 2020 barrierefreie Webseiten vor.

Das Design deines Shops sollte einige Umstände berücksichtigen. Denn es gibt zahlreiche Menschen, die ihre ganz eigenen Anforderungen an eine komfortabel gestaltete Webseite haben. Die Rot-Grün-Sehschwäche ist dabei nur eine von vielen möglichen Ursachen.

Viele Unternehmer haben Berührungsängste oder wissen schlichtweg nicht, wie sie behinderte Menschen in ihren Geschäftsalltag integrieren sollen. Wie genau du vorgehst, um einen barrierefreien Webshop zu gestalten, der den neuen Web Content Accessibility Guidelines entspricht, welche technischen Hilfsmittel dir zur Verfügung stehen und welche Vorteile du selbst am Ende aus deinem inklusiven Design ziehen kannst, erklären wir in diesem Beitrag.

Inhaltsverzeichnis

• Warum brauche ich einen barrierefreien Shop?
  
• Durch diese Maßnahmen wird dein Shop barrierefrei
• Diese Shopify-Helfer helfen bei der Barrierefreiheit deines Shops

Warum brauche ich einen barrierefreien Shop? 

Grünes Licht für die Inklusion

Eine einfache Antwort auf die Frage, warum du dir um die Barrierefreiheit deines Shops Gedanken machen solltest, lautet natürlich: weil es in unserer offenen und freien Gesellschaft keinen Platz für Diskriminierung und Ausgrenzung gibt. Jeder hat ein Recht auf Teilhabe – auch am Internet.

Sollte deine Internetpräsenz bisher noch nicht auf Menschen mit einer Behinderung ausgerichtet sein oder keine Funktionen besitzen, die ihnen die Nutzung deiner Seite erleichtern, gilt: Schalte einen Gang höher und lege dein Augenmerk auf diese lange unbeachtete Zielgruppe. Und ganz nüchtern betrachtet, bietet ein barrierefreier Store auch dir persönlich einige Vorteile:

Lesetipp: Das Einmaleins der Hashtags auf Instagram und welche besonders beliebt sind, erklären wir dir hier.

1. Du machst deinen Shop zukunftssicher

Die Best Practices des barrierefreien Webdesigns wurden international in einer Richtlinie zusammengefasst: in den Web Content Accessibility Guidelines (WCAG). Diese ist eine für jeden Unternehmer wichtige Orientierung. Für Webseiten der EU und der deutschen Bundesregierung sind diese schon länger als verbindlich vorgeschrieben. Seit dem 23. September 2020 gelten die Regelungen nun auch für alle weiteren bereits bestehenden Webseiten innerhalb der Europäischen Union.

Seit September 2020 schreibt das EU-Recht barrierefreie Webseiten vor.

Etwaige Strafen für eine Nichtbeachtung dieser Richtlinien existieren zwar, unseres Wissens nach, noch nicht (Stand Januar 2021), allerdings ist es nur eine Frage der Zeit, bis entsprechende Maßnahmen eingeführt werden.

Gehe also schon jetzt auf Nummer sicher und halte dich bei der Gestaltung deines Shops an die WCAG. So tust du nicht nur etwas für deine Mitmenschen, sondern vermeidest zukünftig auch empfindliche Strafzahlungen.

Übrigens, wenn du einen rechtssicheren Onlineshop aufbauen willst, solltest du dir auch folgende Beiträge ansehen:

• In 10 Minuten: So machst du deinen Shopify Onlineshop rechtssicher (Webinar und White Paper)
• Eröffnung eines Onlineshops: Was ist in rechtlicher Hinsicht zu beachten? Teil I: Wie du ein Shopify Impressum und die Datenschutzerklärung zu deinem Store hinzufügen kannst. 
  
• Eröffnung eines Onlineshops: Was ist in rechtlicher Hinsicht zu beachten? Teil II
  

Kostenloses Webinar: In 30 Minuten zum eigenen Onlineshop

Du willst selbst mal sehen, wie schnell du einen Shop aufsetzen kannst?

Der Shopify-Experte und leidenschaftliche Shop-Betreiber Adrian Piegsa zeigt dir, wie du dich anmeldest, eine Domain verknüpfst, Produkte auswählst und natürlich alle rechtlichen Vorgaben umsetzt.

Jetzt kostenlos teilnehmen

2. Du sorgst für mehr Conversions und Verkäufe

Wenn du alle Menschen zusammen nimmst, die sich dem Alltag mit einer körperlichen oder mentalen Einschränkung stellen, wird sich dieser Personenkreis sehr schnell ballen: Seh- und Sprachbehinderte, Menschen mit Lähmungen oder Amputationen, Schlaganfallpatienten, Alzheimer- oder Parkinsonerkrankte und viele weitere Gesellschaftsgruppen.

Damit allerdings ist das Ende der Liste noch lange nicht erreicht. Denke auch an Menschen, die nur temporär eingeschränkt sind – etwa nach einer Operation oder weil sie einen Gipsverband tragen müssen. Oder einfach an all diejenigen, für die das Internet immer noch ein Buch mit sieben Siegeln ist.

Sie alle sind potenzielle Besucher und Kunden deines Shops. Warum solltest du ihnen beim Einkauf, wenn auch unbeabsichtigt, Steine in den Weg legen? Je zugänglicher du deine Webseite gestaltest, desto mehr Menschen wirst du von deinem Angebot überzeugen können.

Lesetipp: Conversions zu generieren geht natürlich noch auf vielen weiteren Wegen. Wie genau, erklären wir dir hier.

3. Du schaffst ein positives Markenimage und zeigst soziales Verantwortungsbewusstsein

Besucher deiner Webseite wissen es zu schätzen, wenn du ihnen einen barrierefreien Service anbietest. Dabei müssen sie gar nicht selbst unter einer Einschränkung leiden. Alleine die Erkenntnis, dass auch ihre Oma bei dir problemlos shoppen könnte, sorgt für ein gutes Gefühl.

Diese positive Emotion assoziieren sie natürlich auch mit deiner Marke und deinen Produkten. Deine Kunden tragen ihr barrierefreies Einkaufserlebnis über die sozialen Medien sogar in die Welt hinaus und steigern deinen Bekanntheitsgrad.

Umgekehrt könnte jederzeit ein Hagel an Kritik über dich hereinbrechen, wenn du deinen Shop-Besuchern das Leben schwer machst. Entscheide dich also für die wertvollere Alternative und gestalte deinen Store für alle Menschen, nicht nur für einige.

Social Impact geht durch viele Maßnahmen! Das Unternehmen Buckle & Seam agiert sozial durch faire Produktion und Entwicklungshilfe in Pakistan. Die Story hörst du im Podcast

Nachjustieren für bessere Sicht – so wird dein Shop barrierefrei

Ein kurzer Blick in die Web Content Accessibility Guidelines offenbart, wie umfangreich sie sind. Auf jedes kleine Detail einzugehen, würde den Rahmen dieses Beitrages sprengen. An dieser Stelle möchten wir dir daher zunächst einen Überblick über die wichtigsten Anforderungen verschaffen:

1. Der Schein trügt nicht: Wie dein Content sichtbarer wird 

Mache es deinen Besuchern so einfach wie möglich, alle Informationen deiner Webseite wahrnehmen und verstehen zu können. Wichtig sind insbesondere Textalternativen. Das bedeutet, sämtliche Textinformationen lassen sich auf Wunsch auch in einer anderen Form darstellen, etwa in Großschrift, als Symbol oder in einfacher Sprache.

Die erste Regel für barrierefreie Shops: lesbare Texte.

Auch bei den Designelementen deines Shops gilt es, einiges zu beachten: Bilder und Buttons sollten immer ein ALT-Attribut besitzen, welches erklärt, was auf ihnen zu sehen ist, beziehungsweise welche Funktion sie besitzen. Automatische Programme, sogenannte Talker, können den eingefügten Text in ein Audioformat umwandeln und somit den Endbenutzern die Bilder auf der Seite beschreiben oder die Bedeutung einer Schaltfläche erklären.

Zeitbasierte Medien, wie Videos oder Slideshows sollten bestenfalls nicht automatisch starten, beziehungsweise pausierbar sein. Im Idealfall stellst du auch hier eine textbasierte Alternative zur Verfügung, etwa eine vollständige Inhaltsangabe deiner Videos.

Achte außerdem auf eine anpassbare Darstellung deines Shops. Eine Option, mit der sich zum Beispiel der Kontrast deiner Webseite verändern lässt, ist für viele Menschen eine wertvolle Hilfe.

Stelle zuletzt sicher, dass sämtliche Elemente und Buttons deines Shops klar voneinander unterscheidbar sind. Ausschlaggebend sind dabei vor allem die Farbauswahl, sowie eine klare farbliche Trennung zwischen Vorder- und Hintergrund.

Lesetipp: Entdecke 21 spannende Inspirationen für dein Online-Shop Design.

2. Fasse deine Kundschaft mit Fingerspitzengefühl an 

Besucher mit motorischen Einschränkungen benötigen eventuell Unterstützung, wenn es um die Bedienung deines Shops geht. Stelle daher zunächst sicher, dass sich sämtliche Funktionen per Tastatur ansteuern lassen können. Denn viele elektronische Assistenten für Menschen mit Behinderung besitzen zwar ein Keyboard, aber keine Maus.

Eine möglichst einfache Navigation ist daher ein Segen für viele Besucher. Vermeide unzählige Unterkategorien und verwirrende Verlinkungen. Dein Gast sollte immer wissen, wo er sich gerade befindet, Inhalte ohne Umstände finden und alle wichtigen Informationen wie seinen Warenkorb problemlos einsehen können.

Gib deinen Kunden außerdem ausreichend Zeit zur Informationsaufnahme und für alle relevanten Eingaben. Verzichte auf spontane Sonderangebote, die nur wenige Minuten gültig sind, wie auf ein drakonisches Zeitlimit bei der Eingabe der Lieferdaten am Check-out.

Sämtliche Eingabefelder wiederum solltest du so gestalten, dass sie nicht ausschließlich per Tastatur ausgefüllt werden können. Nicht jeder Mensch ist in der Lage, ein Keyboard zu verwenden und möchte die Eingabe seine Bestellinformationen vielleicht lieber per Spracheingabe tätigen.

Nicht jeder Mensch benutzt zum Surfen Tastatur und Maus.

Außerdem weisen die WCAG unter dem Punkt „Bedienbarkeit" auf Personen hin, die unter epileptischen Anfällen leiden – denn alleine in Deutschland leben mehr als eine halbe Million Menschen mit Epilepsie. Nimm daher immer Abstand von flackernden Buttons und schnell geschnittenen Videos, die epileptische Episoden bei deinen Besuchern auslösen können.

Wie Die Höhle der Löwen erfolgreiche Produkte hervorgebracht hat, die mit Shopify durchgestartet sind, erfährst du in diesem Beitrag. 

3. Das Verständnis reicht oft viel weiter als der Verstand 

Guter Content kann von jedem verstanden werden. Das gilt auch für deinen Webshop. Gut lesbar geschriebene Texte sind dabei ein guter Anfang. 

Eine klare Schriftart, die sich bestenfalls auch für Legastheniker eignet, darf dabei nicht fehlen. Vermeide in deinen Produktbeschreibungen außerdem komplizierte Schachtelsätze und unnötige Fremdworte. Der Königsweg ist, deine gesamte Webseite auch in einfacher Sprache anzubieten.

Wichtig ist vielen Menschen außerdem, dass dein Shop vorhersehbar funktioniert: Navigationselemente wiederholen sich auf allen Unterseiten, Buttons werden immer gleich benannt, Änderungen von Kontext und Layout geschehen ausschließlich nach ausdrücklicher Benutzereingabe.

Zuletzt haben viele Menschen oft Schwierigkeiten bei der Eingabe von Informationen wie Kontakt- oder Bestelldaten. Kommt es dort zu Fehlern, dann kommuniziere diese immer so verständlich wie möglich und gib umfangreiche Hilfestellung bei der Eingabe. Vergisst dein Kunde etwa, seine Postleitzahl einzutippen, markiere das Feld nicht nur rot. Ergänze die Fehlermeldung um eine kleine Textbox mit dem Hinweis „Bitte tippen Sie ihre Postleitzahl ein.“

4. Die Antwort auf alle Fragen: eine intuitive Seitengestaltung

Responsives Design – also die Fähigkeit einer Webseite, sich in Layout und Design automatisch an die unterschiedlichsten Geräte anzupassen – gehört inzwischen zu den Grundlagen der Webprogrammierung.

Für eine wirklich barrierefreie Webseite müssen die Entwickler allerdings noch ein paar Schritte weitergehen. Denn zahlreiche Menschen mit einer Behinderung nutzen kein Smartphone und keinen Desktop-PC, um im Internet zu surfen, sondern spezialisierte elektronische Assistenten.

Das bekannteste Beispiel hierfür ist wohl Stephen Hawking. Der Professor aus Cambridge steuerte nicht nur seinen Rollstuhl alleine mit dem Mund, sondern einen vollwertigen, sprachfähigen Computer. Auch die Kompatibilität mit dieser Art von Geräten soll laut WCAG umgesetzt werden.

Lesetipp: Damit du einen für dich geeigneten Homepage-Baukasten auswählen kannst, haben wir hier eine Übersicht verschiedener Anbieter zusammengestellt.

Erste Schritte zur barrierefreien Webseite – Welche Shopify-Helfer es gibt

Aus deinem Webshop ein inklusives Einkauferlebnis zu gestalten, scheint auf den ersten Blick mit viel Aufwand verbunden zu sein. Allein die Länge der Web Content Accessibility Guidelines wirkt einschüchternd.

Aber wie so häufig ist es ein Weg der kleinen Schritte. Bereits mit einfachen Maßnahmen wie der Auswahl eines neuen Schrifttypen oder der sauberen Einpflege von ALT-Attributen reichst du zahlreichen Menschen eine helfende Hand. Wie du dein Shopify Theme barrierefrei modifizieren kannst, haben wir in einem ausführlichen Leitfaden für dich zusammengefasst.

Außerdem möchten wir an dieser Stelle gerne auf unseren App Store hinweisen. Dort findest du zahlreiche Programme, die viele Funktionen für mehr Zugänglichkeit automatisieren können. Dazu gehören unter anderem:

• Apps zur Bereitstellung von Buttons für verschiedene Farbschema oder Schrift- und Cursorgrößen wie der Accessibility Assistant von Cart Coders.
• Alt Text eine App, die die Möglichkeit bietet, die Eingabe von ALT-Attributen für dich zu übernehmen.
• AudioEye digital accessibility oder der Speakease Reader, zwei Apps, die Texte auf deiner Webseite per Mausklick vorlesen.

Ein gutes Stück der Arbeit wird dir so bereits abgenommen. Solltest du dann noch Fragen haben, steht dir unser Support gerne zur Verfügung und in unserem Forum findest du Unterstützung durch tausende Mitglieder.

Wie kann ich behilflich sein? – Eine barrierefreie Zukunft

Das Internet gilt vielen immer noch als ein Ort der Freiheit. Manche Personengruppen sind dabei allerdings über Jahre hinweg vergessen worden. Nicht nur hunderttausende rot-grün Sehbehinderte in unserem Land, sondern Millionen Menschen mit körperlichen und kognitiven Einschränkungen.

Es wird höchste Zeit, sie mit ins Boot zu holen. Ein barrierefreier Shop – einfach wahrnehmbar, leicht zu bedienen, verständlich und mit zahlreichen Endgeräten kompatibel – kann dein eigener Beitrag dazu werden. Gründe für ein inklusives Einkaufserlebnis gibt es genug, für dich und deine Kunden.

Wage also den nächsten Schritt und öffne deinen Shop für noch mehr Menschen. Denn jeder von uns hat ein Recht auf Teilhabe und freut sich über ein komfortables Einkaufserlebnis. Zeige der Welt dein soziales Verantwortungsbewusstsein und starte direkt mit der Umsetzung.