Barrierefreiheit für Online-Shops: An alle verkaufen

Jazmie Jamaludin

Stellen Sie sich einen Kunden vor, der heute Abend bei Ihnen einkaufen möchte. Er hat eine Karte zur Hand und einen Grund, Geld auszugeben. Aber er benutzt einen Screenreader, weil er blind ist, und Ihr "In den Warenkorb"-Button ist nur ein unbeschriftetes Symbol. Der Screenreader meldet "Schaltfläche, Schaltfläche, Schaltfläche" und nichts weiter. Er hat das Geld, die Absicht und die Geduld, bis Ihr Geschäft ihm nichts mehr zu bieten hat. Dann geht er und kauft bei jemandem, dessen Geschäft einfach funktioniert hat.

Dieser leise, unsichtbare Verlust tritt weitaus häufiger auf, als die meisten Ladenbesitzer erkennen. Barrierefreiheit ist kein Nischenproblem für eine kleine Minderheit. Ein großer Teil der Bevölkerung lebt mit irgendeiner Form von Behinderung, und fast jeder erlebt vorübergehende oder situative Barrieren, wie zum Beispiel das Schielen auf ein Telefon bei hellem Sonnenlicht oder das einhändige Einkaufen, während man ein Kind hält. Dieser Artikel erklärt in einfachen Worten, was Web-Barrierefreiheit für einen Online-Shop tatsächlich bedeutet, warum sie sich leise auf Ihren Umsatz auswirkt und welche praktischen Änderungen den größten Unterschied machen, ohne dass Sie ein Entwickler sein müssen.

Was "barrierefrei" tatsächlich bedeutet

Barrierefreiheit bedeutet, dass Ihr Geschäft von Menschen genutzt werden kann, unabhängig davon, wie sie sehen, hören, sich bewegen oder Informationen verarbeiten. Manche Menschen navigieren mit einer Tastatur statt mit einer Maus. Manche verwenden einen Screenreader, der die Seite vorliest. Manche haben eine Sehschwäche und zoomen den Text auf die doppelte Größe. Manche haben eine eingeschränkte Feinmotorik und haben Schwierigkeiten mit winzigen Tippzielen. Manche haben Dyslexie und empfinden dichte, kontrastarme Texte als anstrengend. Ein barrierefreies Geschäft berücksichtigt all diese Menschen, ohne jemanden in eine separate, abgespeckte "barrierefreie Version" zu zwingen.

Das weithin akzeptierte Regelwerk hierfür ist eine Reihe von Richtlinien, bekannt als WCAG (Web Content Accessibility Guidelines), veröffentlicht von der internationalen Organisation, die Webstandards regelt. Sie müssen sie nicht auswendig lernen. Sie lassen sich auf vier sinnvolle Ideen reduzieren: Inhalte sollten wahrnehmbar sein (Menschen können sie aufnehmen), bedienbar (Menschen können die Bedienelemente nutzen), verständlich (Menschen können nachvollziehen, was passiert) und robust (sie funktionieren mit assistiven Technologien). Behalten Sie diese vier Wörter im Hinterkopf, und die meisten Entscheidungen werden offensichtlich.

Warum dies ein Geschäftsproblem und kein Wohltätigkeitsprojekt ist

Es ist verlockend, Barrierefreiheit unter "schön zu haben" abzuhaken. Das ist schon allein aufgrund der Zahlen ein Fehler. Die Gemeinschaft der Menschen mit Behinderungen und ihre Familien verfügen weltweit über eine enorme Kaufkraft. Sie auszuschließen ist kein Rundungsfehler; es ist ein Markt von der Größe eines großen Landes, den Sie vor der Tür ausgesperrt haben. Und dieselben Korrekturen, die behinderten Käufern helfen, helfen allen: klarere Schaltflächen, schnellere Tastaturnavigation und lesbarer Text reduzieren die Reibung für alle Besucher, was genau das ist, was eine gute Kassenoptimierung ohnehin anstrebt.

Über 1 Milliarde Menschen leben mit einer Behinderung
Die Weltgesundheitsorganisation schätzt, dass etwa 16 % der Weltbevölkerung erhebliche Behinderungen haben. Ein unzugänglicher Laden weist diese Gruppe ab, bevor sie überhaupt zur Kasse kommt.
Quelle: Weltgesundheitsorganisation

Die wenigen Korrekturen, die am wichtigsten sind

Man könnte ein Jahr damit verbringen, die Barrierefreiheit zu perfektionieren, aber ein kleiner Satz von Änderungen bringt den größten Nutzen. Fangen Sie hier an.

1. Echten Alt-Text für Produktbilder schreiben

Alt-Text ist eine kurze schriftliche Beschreibung, die einem Bild beigefügt ist. Screenreader lesen ihn vor, und Suchmaschinen verwenden ihn ebenfalls. Wenn Ihre Produktfotos keinen Alt-Text haben, hat ein blinder Käufer keine Ahnung, was er sieht. "Bild" oder "IMG_4821.jpg" ist nutzlos. "Marineblauer Wollmantel mit Messingknöpfen, von vorne gezeigt" ist nützlich. Beschreiben Sie, was für die Kaufentscheidung wichtig ist, nicht jedes Pixel. Dies ist eine der seltenen Verbesserungen, die behinderten Nutzern und Ihrem Suchranking gleichzeitig hilft.

2. Alles mit einer Tastatur bedienbar machen

Viele Menschen können keine Maus benutzen. Sie drücken die Tabulatortaste, um zwischen Links und Schaltflächen zu wechseln, und die Eingabe- oder Leertaste, um diese zu aktivieren. Öffnen Sie Ihr Geschäft und versuchen Sie, etwas nur mit der Tastatur zu kaufen. Wenn Sie die Schaltfläche "In den Warenkorb" nicht erreichen, das Menü nicht öffnen oder nicht sehen können, welches Element gerade ausgewählt ist, kann dies auch ein Tastaturbenutzer nicht. Eine sichtbare Fokusumrandung, der kleine Ring, der anzeigt, wo Sie sich befinden, ist unerlässlich. Einige Themes verstecken sie, damit sie "sauberer" aussehen. Tun Sie das nicht.

3. Farbkontrast überprüfen

Hellgrauer Text auf weißem Hintergrund sieht für einen Designer elegant aus und ist für jemanden mit Sehschwäche oder jeden, der sich draußen an einem sonnigen Tag aufhält, unsichtbar. Text benötigt ausreichend Kontrast zum Hintergrund, um lesbar zu sein. Kostenlose Tools ermöglichen es Ihnen, zwei Farben einzugeben und sofort zu erfahren, ob sie den Anforderungen entsprechen. Diese einzelne Korrektur verbessert oft die Konversion auf ganzer Linie, da schwer lesbarer Text leise Verkäufe von Menschen kostet, die sich selbst nie als behindert bezeichnen würden.

4. Formulare und Schaltflächen klar beschriften

Jedes Formularfeld benötigt eine sichtbare und dauerhafte Beschriftung, nicht nur einen Platzhaltertext, der verschwindet, sobald jemand zu tippen beginnt. Jede Schaltfläche benötigt Worte, die ein Screenreader vorlesen kann. Eine Nur-Symbol-Warenkorbschaltfläche sollte immer noch eine versteckte Textbeschriftung wie „Warenkorb anzeigen“ haben. Diese kleinen Details machen den Unterschied aus zwischen einem Bezahlvorgang, der für alle funktioniert, und einem, der stillschweigend einen Teil Ihrer Kunden ausschließt.

Häufige Barrieren und die einfache Lösung dafür
Barriere für Käufer Wer betroffen ist Die Lösung
Unbeschriftete Bilder und Symbole Screenreader-Benutzer Deskriptiver Alt-Text und Schaltflächenbeschriftungen
Nur-Maus-Menüs und Kasse Tastatur- und motorisch beeinträchtigte Benutzer Vollständige Tastaturnavigation mit sichtbarem Fokus
Blasser, kontrastarmer Text Sehbehinderte, ältere, Outdoor-Käufer Ausreichende Farbkontrastverhältnisse
Winzige Tap-Ziele Telefon- und motorisch beeinträchtigte Benutzer Größere Schaltflächen mit großzügigem Abstand
Automatisch abspielende Videos und Bewegungen Vestibuläre und kognitive Empfindlichkeiten Pausensteuerungen und Respekt vor reduzierter Bewegung

Barrierefreiheit und Vertrauen gehen Hand in Hand

Ein Geschäft, das sorgfältig mit Kleinigkeiten umgeht, ist in der Regel ein Geschäft, dem die Leute vertrauen. Wenn Ihre Schaltflächen klar sind, Ihr Text lesbar ist und Ihr Checkout sich vorhersehbar verhält, entspannen sich die Käufer. Dieses Gefühl der Kompetenz ist eng mit der Arbeit verbunden, Vertrauenssignale in Ihrem Geschäft aufzubauen. Eine schlampige, schwer zu bedienende Oberfläche signalisiert das Gegenteil, und Erstkäufer sind schnell dabei, alles zu verlassen, was unzuverlässig erscheint.

Die gleiche Logik gilt für Ihre allgemeine Konversionsarbeit. Viele der Dinge, die eine gute Konversionsrate erhöhen, sind verkappte Zugänglichkeitsgewinne: klarere Handlungsaufforderungen, weniger Unordnung, schnellere Kaufwege. Wenn Sie Experimente in Ihrem Geschäft durchführen, integrieren Sie Zugänglichkeitsprüfungen in Ihren A/B-Testprozess, damit eine "gewinnende" Variante niemals gewinnt, indem sie stillschweigend Menschen ausschließt.

Mobil macht Barrierefreiheit unverhandelbar

Der größte Teil des Einkaufens findet heute auf Handys statt, und das Handy verstärkt jeden Fehler bei der Barrierefreiheit. Kleine Bildschirme erschweren das Lesen von geringem Kontrast. Dicke Finger machen winzige Tippziele zu einem Albtraum. Einhändige Bedienung, Gehen, schlechte Beleuchtung und wackelige Verbindungen sind alles situative Behinderungen, die Menschen ohne bleibende Beeinträchtigung betreffen. Das Design für die Person, die am meisten Hilfe benötigt, führt im Allgemeinen zu einer reibungsloseren Erfahrung für alle, weshalb Barrierefreiheit und mobile Optimierung in die gleiche Richtung ziehen.

Verlassen Sie sich nicht auf Overlay-Widgets, die das für Sie erledigen

Vielleicht haben Sie schon Pop-up-"Barrierefreiheits"-Widgets gesehen, die mit einer Codezeile sofortige Konformität versprechen. Seien Sie vorsichtig. Barrierefreiheitsexperten und viele behinderte Nutzer stehen diesen Overlays scharf kritisch gegenüber, da sie die zugrunde liegenden Probleme oft nicht beheben und die Screenreader-Erfahrungen manchmal verschlechtern. Es gibt keinen Zauberknopf. Echte Barrierefreiheit entsteht durch den ordnungsgemäßen Aufbau der Seite, nicht durch das Anbringen eines Widgets auf einer fehlerhaften Seite.

Der rechtliche Aspekt, kurz gesagt

Neben dem moralischen und kommerziellen Argument gibt es ein wachsendes rechtliches. In vielen Regionen behandeln Gerichte und Regulierungsbehörden zunehmend unzugängliche Online-Shops genauso wie ein physisches Geschäft ohne Rampe. Klagen und Beschwerden wegen unzugänglicher Websites haben in den letzten Jahren stark zugenommen. Sie müssen kein Rechtsexperte werden, aber Sie sollten wissen, dass das Ignorieren der Barrierefreiheit ein Risiko ist, das sich mit der Zeit verstärkt. Sie von Anfang an einzubauen ist weitaus billiger, als unter Druck nachzurüsten.

98 % der Top-Homepages weisen nachweisbare Fehler auf
Jährliche automatisierte Audits der beliebtesten Websites finden immer wieder Barrierefreiheitsfehler auf der überwiegenden Mehrheit der Homepages, was bedeutet, dass Ihre Behebung einen echten Wettbewerbsvorteil darstellt.
Quelle: WebAIM Million report

Wie Sie anfangen, ohne sich überfordert zu fühlen

Sie müssen nicht alles auf einmal reparieren. Beginnen Sie mit dem Weg, der Geld einbringt: Startseite, eine wichtige Kategorieseite, eine Produktseite, der Warenkorb und der Checkout. Gehen Sie diesen Weg nur mit der Tastatur. Schalten Sie dann den Screenreader Ihres Telefons oder Computers ein und versuchen Sie dieselbe Reise, indem Sie zuhören, nicht hinsehen. Sie werden die schlimmsten Probleme innerhalb von Minuten finden. Beheben Sie diese zuerst. Führen Sie dann einen kostenlosen automatisierten Checker aus, um Kontrast- und Beschriftungsprobleme in großem Maßstab zu erkennen.

Machen Sie von da an Barrierefreiheit zu einem festen Bestandteil Ihrer Arbeitsweise und nicht zu einem einmaligen Projekt. Jedes Mal, wenn Sie ein Produkt hinzufügen, schreiben Sie einen passenden Alt-Text. Jedes Mal, wenn Sie eine Farbe anpassen, überprüfen Sie den Kontrast. Jedes Mal, wenn Sie eine neue Funktion hinzufügen, testen Sie diese mit einer Tastatur. Als Gewohnheit betrachtet, kostet es fast nichts und erweitert stetig Ihr Publikum. Wenn Sie Hilfe bei der Prüfung Ihres Shops oder der Integration von Barrierefreiheit in ein Redesign wünschen, können Sie jederzeit Kontakt aufnehmen, um dies zu besprechen. Für eine tiefere technische Einführung behandelt dieser Begleitartikel über Web-Barrierefreiheit-Grundlagen die zugrunde liegenden Prinzipien ausführlicher.

Die Erkenntnis ist einfach. Barrierefreiheit ist keine Steuer für Ihr Unternehmen, sondern eine Möglichkeit, willige Kunden nicht abzuweisen. Sie überschneidet sich fast vollständig mit gutem Design, guter Leistung und guter Konversion. Tun Sie es nicht, weil jemand Sie dazu zwingt, sondern weil jeder Kunde, dem Sie entgegenkommen, ein weiterer Verkauf ist, den Sie sonst an ein Geschäft verloren hätten, das sich die Mühe gemacht hat.

Häufig gestellte Fragen

Muss ich Entwickler sein, um die Barrierefreiheit zu verbessern?+
Nein. Die wirkungsvollsten Korrekturen, das Schreiben von gutem Alt-Text, das Überprüfen des Farbkontrasts und die Sicherstellung, dass Formulare klare Beschriftungen haben, sind Inhalts- und Einstellungänderungen, die jeder vornehmen kann. Ein modernes Theme übernimmt einen Großteil der technischen Grundlagen für Sie. Einen Entwickler benötigen Sie nur für tiefgreifendere kundenspezifische Arbeiten.
Schadet die Barrierefreiheit dem Design meines Shops?+
Nicht, wenn es gut gemacht ist. Barrierefreies Design und schönes Design sind vollkommen kompatibel. Starke Kontraste, klare Schaltflächen und lesbare Schrift sehen in der Regel eleganter aus, nicht weniger. Das Einzige, was Sie verlieren, ist die Art von "cleverem" Styling, das die Leute ohnehin verwirrt hat.
Sind Barrierefreiheits-Overlay-Widgets eine gute Abkürzung?+
In der Regel nein. Viele behinderte Benutzer und Barrierefreiheitsexperten lehnen diese Pop-up-Tools aktiv ab, da sie die eigentlichen Probleme oft nicht beheben und die Screenreader-Erfahrung verschlechtern können. Es gibt keine Abkürzung. Erstellen Sie die Seite stattdessen ordnungsgemäß.
Wie teste ich meinen Shop schnell?+
Versuchen Sie, etwas nur mit Ihrer Tastatur zu kaufen, und wiederholen Sie die Reise dann mit dem integrierten Screenreader Ihres Geräts. Diese beiden Tests zeigen die schlimmsten Probleme innerhalb weniger Minuten auf. Anschließend führen Sie einen kostenlosen automatischen Checker aus, um Kontrast- und Beschriftungsprobleme in großem Umfang zu erkennen.

Referenzen

  1. Weltgesundheitsorganisation. „Behinderung.“ who.int.
  2. W3C Web Accessibility Initiative. „WCAG 2 Überblick.“ w3.org.
  3. WebAIM. „The WebAIM Million Annual Accessibility Report.“ webaim.org.
Zurück zum Blog

AUTOMATISIEREN. OPTIMIEREN. DOMINIEREN.

Optimieren Sie Ihre Betriebsabläufe und bieten Sie ein reibungsloses Kundenerlebnis. Unsere Experten implementieren modernste Technologien und optimierte Arbeitsabläufe, damit Sie sich auf Ihre Kernkompetenzen konzentrieren können.