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
DIe Imkerei gräubig
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.
Kontrast von Orange auf Weiß. Lösung: Outline.
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!
Der Shopify-Buy-Button
Wie beim Problem erwähnt: Der Shopify-Buy-Button ist nicht barrierefrei! Er 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!):
Das Ergebnis
Fazit
Die richtige Farbwahl ist ein großes Thema in der digitalen Barrierefreiheit, das 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?
