Überspringen und Hauptinhalt zeigen

Von unseren Depsters May 13, 2020

Barrierefreiheit online – grenzenloser E-Commerce?

Image

Eine körperliche Einschränkung kann Menschen den Zugang zu Online-Inhalten erschweren. Um das volle Potenzial einer Website auszuschöpfen, kann es für jedes Unternehmen interessant sein, auf die verschiedensten Bedürfnisse einzugehen, um an eine bestimmte Zielgruppe zu gelangen. In diesem Guide erfahren Sie, wie Sie Ihre Inhalte so gestalten und Menschen erreichen, die Sie bislang vielleicht völlig unbewusst ausgeschlossen haben.

Was bedeutet A11Y?

A11Y ist ein häufig verwendetes Numeronym für das Wort Accessibility. Accessibility oder Barrierefreiheit bezeichnet auch im Bereich des Internets eine Gestaltung der Inhalte auf die auch Menschen mit Beeinträchtigungen ohne Hilfe zugreifen können. Es existieren verschiedene Level der Barrierefreiheit (A, AA, AAA des s.g. WCAG). Die Mindestanforderung an eine barrierefreie Website ist AA.

Das Wort barrierefrei ist nicht immer ganz passend – statt sich die Frage zu stellen, für wen Inhalte barrierefrei werden, kann man sich auch einfach fragen, für wen diese Inhalte nun zugänglich werden.

Inhalte werden zugänglich für: 

  • Menschen mit einer Sehschwäche / einer Einschränkung des Sehvermögens
  • Menschen mit körperlichen Einschränkungen (bzw. Spastiken oder einem Tremor)
  • Menschen mit kognitiven Behinderungen
  • Menschen fortgeschrittenen Alters bzw. Senioren

Bereits kleinere Anpassungen haben eine große Wirkung – skalierbare Schrift ermöglicht Menschen mit Sehschwäche das Lesen der Online-Inhalte. Eine sinnvolle Strukturierung des Contents Ihrer Website erleichtert dem Screenreader den Zugriff. Weiter hilft es, die Bedienbarkeit der Seite ohne Maus, also lediglich per Tastatur, zu ermöglichen. Die Optimierung von Farbkontrasten, das Auszeichnen von Bildern und aussagekräftige CTAs sind weitere Maßnahmen, die ergriffen werden können, um Menschen mit Behinderung die Nutzung Ihrer Website zu ermöglichen.

Barrierefreiheit und Auswirkungen auf das UI

Es gibt diverse Themen, die bereits vor dem im Entwicklungsprozess berücksichtigt werden können und eine bessere Barrierefreiheit gewährleisten. Beachten Sie vor allem folgende 6 Tipps:

1. Farbkontraste

Für eine bessere Lesbarkeit hat die visuelle Darstellung von Texten und Bildern ein Kontrastverhältnis von mindestens 4,5:1.

Image
2. Abtrennung von Überschriften

Überschriften müssen als solche gekennzeichnet werden und sollten sich optisch abheben.

Image
3. Textlängen

Fließtexte sollten nicht zu lang sein und sind idealerweise in Absätze unterteilt.

4. Kommunikation über Farben

Wichtige Inhalte wie Warnhinweise oder Fehlermeldungen dürfen nicht ausschließlich über Farben kenntlich gemacht werden.

Image

 

Image
5. Kennzeichnung von interaktiven Elementen

Interaktive Elemente wie Links und Buttons müssen sich vom Fließtext abheben.

Image
6. Fokus-Zustände

Jedes interaktive Element sollte einen Fokus-Zustand haben und sich während dieses Zustands deutlich abheben.

Image

Barrierefreiheit – Coding Guidelines

Semantik

Screenreader lesen auch den Quellcode einer Webseite aus. Bei einer barrierefreien Gestaltung sollte somit auch auf semantisch korrekten HTML-Code geachtet werden.

Aria

Accessible Rich Internet Applications (ARIA) ist ein Set von Attributen, die Möglichkeiten definieren um Web-Content und Web-Applikationen (besonders jene, welche die mit Javascript entwickelt sind) zugänglicher für Menschen mit Beeinträchtigungen zu machen.

Roles

Die Roles ermöglichen eine Typ-Definition um zu beschreiben, welche Rolle das jeweilige Element hat.

Image
Attributes

Attribute dienen dazu, erweiterte Informationen an den Nutzer zu geben.

Image
Auszeichnungen

Bilder müssen korrekt ausgezeichnet sein um auch einer Person, die sie nicht sehen kann, den jeweiligen Inhalt zu vermitteln.

Image

Ein Hund mit schwarzem Fell trägt eine blaue Jeansjacke.

Links vs. Buttons

Die Unterscheidung von Buttons und Links ist wichtig, um einem Nutzer den Inhalt der Seite zu vermitteln. So wird es möglich, den Nutzer frühzeitig zu informieren, wie es weitergeht, nachdem eine Interaktion ausgeführt wurde. Der größte Unterschied zwischen den beiden Elementen: Während ein Button eine Interaktion 
ausführt, welche das Front- oder Backend beeinflusst, hat ein Link keinen Einfluss auf die Website. Der Link dient dazu, den User zu leiten.

Verständnis für Screen Reader

Beim Thema Accessibility spielt der Screenreader eine elementare Rolle. Es ist wichtig, zu verstehen, wie dieser angezeigte Inhalte wahrnimmt und verarbeitet. Um Screenreadern die Verarbeitung angezeigter Inhalte zu erleichtern, hilft es:

  • Interaktionen besser auszuzeichnen 
  • die Reihenfolge der Tabs (Sprungmarken / die Art der Leserichtung) zu verstehen und ggf. zu korrigieren
  • Auszeichnungen sinnvoll einzusetzen
Image

 

Hier ein Beispiel für Auszeichnungen. Der nicht beeinträchtigte Nutzer sieht den Zusammenhang zwischen weiteren Inhalten einer Seite und einem Button mit dem Text “In den Warenkorb”. Für Menschen, die beispielsweise unter einer Beeinträchtigung des Sehvermögens leiden, wird dieser Zusammenhang nicht deutlich. Sofern aber der Zusammenhang nicht visuell ersichtlich ist, muss der Button mit den nötigen Informationen ausgezeichnet werden. Informationen zum Produkt (Name/Marke), zur Variante (Farbe, Größe, Schnitt) und zum Preis des Produkts ergeben hier Sinn.

A11Y im E-Commerce

Image

 

Image

 

Laut dieser Statistik aus den USA kaufen immer mehr ältere Menschen online ein. Ein entsprechend angepasster Online-Shop ermöglicht auch dieser älteren Zielgruppe das Einkaufserlebnis. Vorsicht bei Pauschalisierungen! Es geht hier nicht nur um Plattformen, die Produkte für eine ältere Zielgruppe verkaufen – Großeltern werden auch die Geschenke für ihre Enkelkinder bestellen.

Für Ihren Online-Shop bedeutet eine verbesserte Barrierefreiheit einerseits, dass Sie Menschen mit Behinderung und Senioren die Teilhabe ermöglichen und andererseits, dass Sie Ihre Reichweite erweitern und so Ihre Zielgruppe vergrößern. 28 % der Online-Käufe werden heute bereits von Senioren getätigt – machen auch Sie Ihren Online-Shop für diese Zielgruppe zugänglich.

Mit diesen Maßnahmen verbessern Sie die Zugänglichkeit Ihres Online-Shops:

  • Jede Anwendung eines Filters oder einer neuen Sortierung im Product Grid führt zu Änderungen, die für beeinträchtigte Menschen gekennzeichnet werden sollten.
  • Relationen sollten ausgeschrieben werden, so zum Beispiel, wenn Produkt XY via Button in den Warenkorb gelegt oder auf der Merkliste platziert werden kann.
  • Barrierefreiheit sollte nicht nur technisch, sondern auch konzeptionell umgesetzt werden (klare Strukturen, keine komplexe Navigation).
  • Inhaltliche Barrierefreiheit wird unter anderem durch die Nutzung einfacher Texte wie Produktbeschreibungen, den Verzicht auf verwirrende Produktnamen oder Emoticons und eine verständliche Beschriftung von Buttons und Interaktionselementen erreicht.

Mit moderatem Aufwand und unter Berücksichtigung der einzelnen Aspekte der Barrierefreiheit lässt sich jede Website, ob Online-Shop oder Landingpage, für eine größere Zielgruppe zugänglich machen. Die Nutzer werden es Ihnen danken.

FRAGEN? WIR SIND HIER, UM ZU HELFEN!

Hoppla!

If you're reading this, you unfortunately can't see the form that's supposed to be here. You probably have an ad blocker installed. Please switch off your adblocker in order to see this form.

Still encountering problems? Open this page in a different browser or get in touch with us: [email protected]