Fallstudie

Barrierearmer Honig-Shop!

Für die Augsburger Imkerei Gräubig, haben wir ein Redesign gemacht und dabei den Online-Shop so barrierearm wie möglich gestaltet.

  • Branding
  • UI / UX Design
  • Web Design
Ein Bild von dem Webseiten Hero auf der Startseite der Imkerei Gräubig. Es ist unter anderem der Schriftzug "Bioland Honig aus Augsburg" zu lesen und 3 Sorten des Honigs sind zu sehen.

DIe Imkerei gräubig

Zwei Gläser mit Honig der Imkerei Gräubig. Sie sind freigestellt und sehen so aus, als würden sie schweben.

Die Imkerei Gräubig ist eine kleine, lokale Imkerei in Augsburg, mit einem großen Bewusstsein für Bio-Produkte. Sie kooperiert unter anderem mit der Universität in Augsburg und stellt eigenen Uni-Honig her!

Mit dem Online-Shop wollte der Gründer Florian nicht nur ein Bio-Statement setzen, sondern auch zeigen, dass er sich für soziale Zwecke starkmacht.

Deshalb kam Flo zu uns, um seinen Online-Shop barrierefrei zu gestalten.

Probleme

  • 1. Barrierefreies Branding:

    Schon mal Gelb auf Weiß gesehen? Dann kannst du dir wahrscheinlich gut vorstellen, warum es ein Kontrast-Problem gibt, wenn man sich mit dem Thema Bienen beschäftigt.

  • 2. Shopify-Buy-Button:

    Aufgrund der Kosten und dem eher kleinen Umfang des Shops wurde schon der alte Shop mit dem Shopify-Buy-Button erstellt und das sollte auch so bleiben.

    Das Problem: Der Buy-Button ist nicht barrierefrei! Was also tun?

Barrierefreies Branding

Wir wollten uns nicht davon abhalten lassen, eine Marke zu schaffen, die das Thema “Biene” stark einbezieht, um mit spielerischen Illustrationen Sympathie für die Marke hervorzurufen.

Dazu musste das Bienen-Gelb allerdings etwas oranger werden, um ansatzweise einen guten Kontrast zu schaffen. Trotzdem haben wir mit unserem Orange nur eine Kontrast-Stufe von 1.7:1 erreicht (für Orange auf Weiß).

Das vorgeschlagene Minimum für eine WCAG-AA-Kompatibilität bei Buttons liegt allerdings bei 3:1. Deswegen mussten wir uns mit einer schwarzen Outline helfen, um sicherzustellen, dass der Button für jeden erkennbar ist.

Da das aber auch gut zu Bienen passt, fanden wir das ganz gelungen, für unser Design.

  • Eine orange Box, auf der mit schwarz 1,7 zu 1 steht. Die Zahlen zeigen das Kontrastverhältnis von der Orangen Box zum weißen Hintergrund an.

    Kontrast von Orange auf Weiß. Lösung: Outline.

  • Eine orange Box, auf der mit schwarz 4,8:1 steht. Die Zahlen zeigen das Kontrastverhältnis von der Schwarzen Schrift auf dem Orange an.

    Kontrast von Schwarz auf Orange.

Eine wichtige Frage, die bei dem ganzen Prozess aufkam: Wie vermittelt man das Gefühl einer spielerischen Marke an Screenreader-Nutzende, die Illustrationen nicht sehen können?

Eine unserer blinden Testerinnen sagte uns, dass sie sehr gerne die niedlichen Illustrationen beschrieben hätte, um die gleiche Erfahrung zu machen, wie eine Sehende es tut.

Außerdem gibt es viele Blinde, die erst später in ihrem Leben blind geworden sind und sich also sehr gut vorstellen können, was man hier beschreibt. Dafür müssen allerdings die Alternativ-Texte auch gut geschrieben sein!

Eine Illustration von einer Biene. Auf die Biene ist ein Pfeil gerichtet und in dem Text dazu steht "Die Honig-Macher".

Der Shopify-Buy-Button

Wie beim Problem erwähnt: Der Shopify-Buy-Button ist nicht barrierefrei! Es ist aber zumindest barrierearm. 

Das heißt, es ist möglich, den Button mit allen Screenreadern zu nutzen, außer mit VoiceOver von Apple. Da ist es zwar theoretisch auch möglich, allerdings sehr umständlich.

Der Button ist durch ein iFrame integriert und dieses iFrame macht bei VoiceOver Probleme. Man kann in das iFrame hinein gelangen und den Kauf abschließen. Es ist allerdings schwer zu verstehen, wie das geht, wenn man es nicht weiß oder sieht.

Wir hatten dazu ein Gespräch mit dem Shopify-Support. Sie haben uns zumindest versprochen, den iFrame mit einem Aria-Label zu versehen, damit man ein bisschen mehr Kontext bekommt.

Mehr zu dem Thema findet ihr in unserem LinkedIn-Post dazu (der sogar von einer E-Commerce-News-Seite auf LinkedIn hervorgehoben wurde!):

Zum Linked-In-Post über das Thema.
Verdeutlichung der Problematik mit dem VoiceOver von Apple. Es ist ein IFrame-Rahmen zu sehen über einem Button und daneben ein Screenshot von dem, was ein Screenreader vorliest. Und zwar liest er "Rahmen 0" vor.

Das Ergebnis

Eine Zusammenstellung von vier unterschiedlichen Screenshots der Seite der Imkerei Gräubig.

Fazit

Die richtige Farbwahl ist ein großes Thema in der digitalen Barrierefreiheit, dass oft auf die leichte Schulter genommen wird. Auch wir nutzen immer mal wieder aus Versehen Farbkombinationen, die sich erst nach einem gründlichen Check, als nicht ganz barrierefrei herausstellen.
Deswegen: Augen auf bei der Farbwahl!

Und ja, wenn man auf Tools wie Shopify (Buy-Button) oder auch WooCommerce angewiesen ist, hat man heutzutage noch ein paar Probleme, seinen Shop wirklich barrierefrei zu machen. Aber diese Anbieter müssen – schon aufgrund von amerikanischem Recht – schnell nachziehen und ihre Barrieren abbauen. Deswegen sind wir guter Dinge, dass das bald passiert!

BOCK?

Du willst Inklusion vorantreiben und dabei noch mehr Kunden gewinnen? Wir helfen dir, deine Webseite oder deinen Onlineshop barrierefrei zu machen.
Erstgespräch vereinbaren