Web-Accessibility als Usability-Booster: Unser Workshop für Naturamus

This case study is also available in English

TL;DR

Die Challenge

Naturamus strebte danach, ihre Website gemäß den EU-Richtlinien barrierefrei zu gestalten, um allen Nutzern Zugang zu ermöglichen.

Unser Lösungsansatz

INNOQ führte einen zweitägigen Workshop durch, um das Team von Naturamus in Web-Accessibility zu schulen und die Website gemeinsam zu analysieren und zu verbessern.

Das Ergebnis

Eine verbesserte Website, die nicht nur den Anforderungen der Barrierefreiheit entspricht, sondern auch die Benutzerfreundlichkeit für alle Besucher erhöht.

Das Produktportfolio von Naturamus, einem Unternehmen aus dem schwäbischen Aichelberg, umfasst Pflanzenöle, Wachse und Hydrolate, hauptsächlich für den Kosmetik- und Lebensmittelmarkt. Wenn die Menschen bei Naturamus von Qualität sprechen, meinen sie deshalb nicht nur die Beschaffenheit der Produkte, sondern auch deren soziale und ökologische Eigenschaften, wie fairer Handel, langfristige Handelsbeziehungen und biologisch-dynamischer Anbau. Naturamus nimmt dieses ganzheitliche Qualitätsversprechen so ernst, dass sie konsequent alle Bereiche des Unternehmens transparent und fair gestalten wollen. Dazu gehört auch ein Bereich, der trotz eindeutiger EU-Richtlinien von vielen Unternehmen noch immer vernachlässigt wird: die Barrierefreiheit bzw. die Accessibility der eigenen Website.

Die Aufgabe von INNOQ bestand vor allem in der Accessibility-Beratung. Bei einem zweitägigen, interaktiven Workshop ging es im ersten Schritt um Wissensvermittlung: Was bedeutet Accessibility eigentlich und warum ist sie so wichtig? Anschließend wurde gemeinsam mit den Teilnehmenden die bestehende Website auf den Prüfstand gestellt.

Accessibility geht alle an

Die Geschäftsleitung und das Marketing-Team von Naturamus waren sich einig, dass die Website barrierefrei gestaltet werden sollte. Doch bei Gesprächen im Vorfeld wurde klar, dass es zu diesem Thema viele offene Fragen gab: Was beinhaltet das alles, was muss man berücksichtigen, an welchen Stellschrauben müssen wir zuerst drehen und wie aufwendig ist das überhaupt? Unsere Experten Dr. Andreas Maier und Joy Heron, die den Workshop vorbereitet und durchgeführt haben, räumten deshalb zunächst mit bekannten Mythen auf. Barrierefreiheit bzw. Accessibility ist nicht nur ein Thema für beispielsweise blinde oder gehörlose Menschen. Wir alle können auf irgendeine Weise, manchmal auch nur temporär oder situationsabhängig, beeinträchtigt sein. Wenn wir die Brille vergessen haben, ein Hörsystem tragen oder an einem ungünstig beleuchteten Arbeitsplatz sitzen.

Ein weiteres Thema war der European Accessibility Act. Die EU-Richtlinie gibt Vorgaben für die Barrierefreiheit. Sie gelten bisher nur für die öffentliche Verwaltung, aber bald auch für die Privatwirtschaft. Dabei geht es beispielsweise um den öffentlichen Personennahverkehr, um Geldautomaten, E-Books, audiovisuelle Inhalte, etc. Auch Web-Accessibility nimmt einen großen Raum ein, vor allem Webshops müssen in naher Zukunft barrierefrei sein. Umso wichtiger ist es, sich frühzeitig darauf einzustellen und die Barrierefreiheit von Anfang an zu berücksichtigen.

Die wichtigste Aufgabe des ersten Workshoptags bestand darin, Denkanstöße zu geben. Wo gibt es Barrieren im Unternehmen? Was behindert interne Prozesse? Die Teilnehmenden erörterten Arbeits- und Produktionsabläufe – von der Software bis zu Gebindegrößen. Ein Thema, das so komplex ist, dass es wahrscheinlich noch einen weiteren Workshop dazu geben wird.

Accessibility beginnt bei (scheinbaren) Kleinigkeiten

Die Grundlage für die Umsetzung von Accessibility-Richtlinien bilden die Web Content Accessibility Guidelines (WCAG 2.1), ein internationaler Standard zur barrierefreien Gestaltung von Online-Angeboten.

Dazu gehören die 4 Prinzipien:

• Wahrnehmbarkeit: Möglichst alle Nutzenden können die Informationen und Elemente der Nutzungsschnittstelle wahrnehmen.
• Nutzbarkeit: Möglichst alle Nutzenden können die Bestandteile der Nutzungsschnittstelle, v.a. die Navigation, verwenden.
• Verständlichkeit: Möglichst alle Nutzenden verstehen die Informationen und die generelle Verwendung der Nutzungsschnittstelle.
• Robustheit: Nutzeragenten wie Browser und assistierende Technologien, wie z.B. Screenreader, können die Nutzungsschnittstelle und deren Bestandteile zuverlässig interpretieren.

Ein wichtiges Ziel von Accessibility ist es also, dass alle Nutzerinnen und Nutzer Informationen wahrnehmen können. Dazu müssen sie aber erst einmal wissen, dass es diese Informationen überhaupt gibt. Auf dieser Basis haben wir uns am zweiten Workshop-Tag die Naturamus-Website genauer angesehen. Zusammen mit den Teilnehmenden haben wir typische Fehler identifiziert und teilweise schon live vor Ort behoben.

Besonders hilfreich war ein im Vorfeld von INNOQ erstellter Prototyp, um das Thema Accessibility auf der Website greifbarer zu machen. Da Naturamus mit WordPress arbeitet, orientierten sich auch die Umsetzungsbeispiele daran. Dabei ging es nicht darum, tiefes HTML- oder CSS-Wissen zu vermitteln. Jedoch sind einige technische Grundlagen wichtig, um eine Website barrierefrei gestalten zu wollen.

Ein anschauliches Beispiel dafür sind die Heading-Ebenen, die eben nicht nur aus visuellen Gründen wichtig sind. Sie sollten eigentlich genutzt werden, um ein übersichtliches Inhaltsverzeichnis der Website darzustellen. Wenn man aber Heading-Ebenen im Wordpress überspringt und von der H1 direkt zur H4 übergeht, entstehen Lücken in der Dokumentenhierarchie. Für normal Sehende scheint dies vernachlässigbar zu sein, doch für Sehbeeinträchtigte, die mit Screenreader arbeiten, ist das für das Textverständnis elementar. Denn nur so können sie zwischen Überschriften und Fließtext unterscheiden oder von Absatz zu Absatz springen. Kurz: Die Headline-Struktur soll vor allem Orientierung geben und nicht nur als Designelement dienen.

Orientierung ist grundsätzlich ein wichtiger Punkt. Dazu zählen z.B. auch eindeutige Seitentitel, die mit dem Link in der Navigation übereinstimmen oder eine klar strukturierte Menüleiste. Der angenehme Nebeneffekt: So erleichtert man auch nicht beeinträchtigten Usern erheblich die Orientierung. Accessibility optimiert also grundsätzlich auch die UX der Website.