E-Commerce

Eine Checkliste für Barrierefreiheit in Onlineshops

Von The AsasWeb team 1 Min. Lesezeit

Ein barrierefreier Onlineshop ist einer, in dem mehr Menschen einkaufen können, prüft also die Seiten, auf denen der Verkauf passiert. Produktbilder brauchen beschreibenden Alt-Text, Variantenwähler müssen per Tastatur funktionieren, und Preis und Verfügbarkeit dürfen nicht allein über Farbe signalisiert werden. Der gesamte Checkout sollte sich nur mit der Tastatur abschließen lassen, mit sichtbaren Beschriftungen, hilfreichen Fehlermeldungen und den richtigen mobilen Eingabetypen. Schließt mit einem echten Kauftest nur per Tastatur und per Screenreader ab, denn automatische Tools übersehen, was diese Tests zeigen.

Jede Hürde in einem Onlineshop ist eine Hürde für einen Verkauf. Ein barrierefreier Shop ist schlicht einer, von dem mehr Menschen kaufen können, weshalb Barrierefreiheit und Umsatz hier in dieselbe Richtung zeigen. Nutzt diese kurze Checkliste auf den Seiten, die am meisten zählen.

Produktseiten

  • Produktbilder tragen beschreibenden Alt-Text, damit ein Screenreader-Nutzer weiß, was er kauft.
  • Varianten-Auswahl, etwa Größe und Farbe, ist per Tastatur bedienbar und klar beschriftet.
  • Preis, Verfügbarkeit und die Aktion “in den Warenkorb” werden klar angesagt, nicht allein durch Farbe oder Position signalisiert.

Suche und Navigation

  • Die Suche ist per Tastatur erreichbar, und Ergebnisse werden angesagt, wenn sie sich aktualisieren.
  • Filter lassen sich ohne Maus anwenden und entfernen, und der aktuelle Zustand ist klar.
  • Der Fokus ist bei jedem Schritt sichtbar, damit Tastaturnutzer nie ihren Platz verlieren.

Warenkorb und Checkout

  • Der Checkout funktioniert vollständig mit der Tastatur, in logischer Fokusreihenfolge.
  • Formularfelder haben sichtbare Beschriftungen, hilfreiche Fehler und den richtigen Eingabetyp auf dem Smartphone.
  • Nichts Wesentliches ist hinter einem Hover oder Ziehen verborgen, und Zeitlimits, falls vorhanden, lassen sich verlängern.

Wirklich testen

Automatische Tools fangen vieles ab, aber ein reiner Tastaturdurchlauf durch einen kompletten Kauf plus ein Screenreader-Durchgang zeigen, was sie übersehen. So testen wir Checkouts vor dem Start.

Ein barrierefreier Shop ist für alle ein besserer Shop, und er weitet zugleich euren Markt. Wenn ihr einen Checkout wollt, aus dem niemand abspringt, startet ein Projekt.

Diesen Standard auf Ihrer eigenen Website?

Erzählen Sie uns von Ihrem Projekt, und wir antworten mit ehrlichen, konkreten nächsten Schritten.