Barrierefreiheit für Online-Shops: An alle verkaufen
Jazmie JamaludinStellen 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.
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.
| 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.
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?+
Schadet die Barrierefreiheit dem Design meines Shops?+
Sind Barrierefreiheits-Overlay-Widgets eine gute Abkürzung?+
Wie teste ich meinen Shop schnell?+
Referenzen
- Weltgesundheitsorganisation. „Behinderung.“ who.int.
- W3C Web Accessibility Initiative. „WCAG 2 Überblick.“ w3.org.
- WebAIM. „The WebAIM Million Annual Accessibility Report.“ webaim.org.