Barrierefreie Gestaltung von Onlineshops

Wie Einzelhändler ihre Webshops auf das Barrierefreiheitsstärkungsgesetz vorbereiten sollten

18.12.2024

von Julia Pott

Eine Person an einem Laptop interagiert mit einem holographischen E-Commerce-Dashboard, das verschiedene Verkaufszahlen, Kundenbewertungen und ähliche Daten anzeigt; Copyright: Adobe Express

2025 kommt das Barrierefreiheitsstärkungsgesetz. Für Betreiber von Webshops bedeutet das, dass sie eine barrierefreie Nutzung ihrer Dienste für Menschen mit Behinderungen gewährleisten müssen. Aber wie sieht ein Design, die technische Gestaltung und eine User Experience in Onlineshops aus, wenn die Barrierefreiheit beachtet wird?

Von der Produktsuche über die Filterfunktion bis zur Bezahlung: Sind diese Prozesse im E-Commerce so gestaltet, dass sie einfach bedienbar oder durch Hilfsmittel wie Screenreader lesbar sind, erleichtert das vielen Nutzenden den Gebrauch. Einzelhändler, die Menschen mit Behinderungen oder ältere Kundengruppen nicht ausschließen möchten, sollten sich mit der barrierefreien Gestaltung und UX-Optimierung ihrer Webshops auseinandersetzen.

Mehr Zugang zu digitalen Diensten: Barrierefreiheitsstärkungsgesetz

Das Barrierefreiheitsstärkungsgesetz zielt darauf ab, den Zugang zu Produkten und Dienstleistungen für Menschen mit Behinderungen zu verbessern. Es verpflichtet Anbieter ihre Services wie Webshops so zu gestalten, dass sie von allen Nutzenden, unabhängig von körperlichen oder sensorischen Einschränkungen, vollumfänglich genutzt werden können. Die Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSGV) folgt einer EU-Richtlinie und gilt für Produkte und Dienstleistungen, die nach dem 28.06.2025 in den Verkehr gebracht werden.

Technologie-Innovationen revolutionieren den Einzelhandel, vom Store zum Backoffice, von der Supply Chain bis zum Checkout – Bleiben Sie dran an der Entwicklung: Neueste Lösungen, den Austausch mit der Branche und jede Menge Expertise finden Sie auf der EuroCIS – the Leading Trade Fair for Retail Technology.

Produktsuche, Produktübersichtsseiten & Filter

Suchfunktion

Um die Suchfunktion in einem Webshop barrierefrei zu gestalten, sollte das Suchfeld leicht auffindbar sein und für Screenreader zugänglich sein. Es ist außerdem hilfreich, während der Eingabe Vorschläge anzubieten. Auch das Bedienen der Suchfunktion durch Spracheingabe oder Bildsuche trägt zur Barrierefreiheit bei.

Sortier- und Filterfunktionen

Stellen Sie Sortier- und Filteroptionen so bereit, dass sie über Tastaturbefehle zugänglich sind und einfach navigiert werden können. Sortier- und Filterfunktionen sollten intuitiv bedienbar und es muss klar ersichtlich sein, welche Filter aktiv sind, um die Bedienung zu erleichtern.

Suchergebnisse und Produktübersichtsseiten

Um eine Produktübersichtsseite oder Suchergebnisseite in einem Webshop barrierefrei zu gestalten, sollten alle Produkte mit klar lesbaren Produktbezeichnungen sowie Preisen versehen sein, die durch Screenreader leicht zugänglich sind. Es ist wichtig, dass diese Seiten eine logische Struktur besitzen, wobei Überschriften und Labels korrekt verwendet werden, um die Navigation und Orientierung zu erleichtern. Eine klare Trennung von Bild- und Textelemente erleichtert die Erkennung der Inhalte durch Screenreader.

Stellen Sie sicher, dass ausreichende Kontraste zwischen Text und Hintergrund vorhanden sind, um die Lesbarkeit für Nutzende mit Sehbehinderungen zu verbessern. Vermeiden Sie Farbkombinationen, die für Farbenblinde schwer zu unterscheiden sind.

Achten Sie auf ein Responsive Design, dass sich dynamisch anpasst, um eine optimale Ansicht auf verschiedenen Geräten zu gewährleisten. Alle Elemente müssen auch auf kleineren Bildschirmen wie Smartphones gut bedienbar sein. Stellen Sie sicher, dass Elemente gut erkennbar bleiben, wenn Menschen mit Sehbehinderung die Webseiten auf Touchscreens vergrößern. Textgrößen und Bildauflösungen sollten skalierbar sein und beim Zoomen nicht verpixeln oder unscharf werden.

Was bedeutet eine Optimierung von Webshops für Screenreader?

Alle Inhalte eines Onlineshops, einschließlich Texte, Bilder und Videos, sollten für Screenreader zugänglich gemacht werden. Dies erfordert die Verwendung von Alt-Texten für Bilder, Untertitel und Audiodeskriptionen für Videos sowie eine klare semantische Strukturierung der HTML-Elemente wie Buttons und Menüs. So können auch Menschen mit Sehbehinderungen durch die Nutzung assistiver Technologien Webshops und Webseiten nutzen.

Wie erreicht man eine technisch barrierefreie Gestaltung von Webshops?

Die gesamte Webstruktur eines barrierefreien Webshops sollte für die Nutzung mit Screenreadern optimiert sein, indem ARIA-Labels und -Rollen systematisch eingesetzt werden. Durch solche Accessible Rich Internet Applications werden spezifische Funktionen von HTML-Elementen wie Buttons, Menüs und Slider gekennzeichnet. Diese Anwendung von ARIA verbessert die Zugänglichkeit von Webinhalten, indem sie assistiven Technologien erlaubt, die Funktionen der Elemente korrekt zu interpretieren und dem Nutzenden verständlich zu machen.

Produktdetailseiten & Preisauszeichnungen

Produktbilder: Alt-Texte und Bildbeschreibungen

Jedes Produktbild sollte mit einem Alt-Text versehen werden, der das dargestellte Produkt oder die abgebildete Szene präzise beschreibt. Dies ermöglicht Screenreader-Nutzenden, den Inhalt der Bilder zu erfassen. Zusätzlich können detaillierte Bildbeschreibungen angeboten werden, die über einfache Alt-Texte hinausgehen, um eine umfassendere Darstellung des Produkts zu liefern.

Produktvideos: Untertitel und Audiodeskriptionen

Um Produktvideos barrierefrei zugänglich zu machen, sollten diese mit Untertiteln für Hörgeschädigte und Audiodeskriptionen für Sehbehinderte versehen sein, um gesprochenen Text, aber auch visuelle Elemente und Handlungen wiederzugeben. Steuerelemente des Videoplayers sollten per Tastatur und Screenreader bedienbar sein.

Leicht verständliche Produktbeschreibungen

Produktbeschreibungen sollten in einfacher Sprache gehalten werden, um auch Menschen mit kognitiven Einschränkungen das Verständnis zu erleichtern. Wichtige Informationen wie Größe, Farbe und Material sollten klar und deutlich hervorgehoben werden. Technische Informationen sollten klar strukturiert und bezeichnet sein.

Klare Preisauszeichnungen

Preise sollten immer klar und deutlich neben dem Produkt angezeigt werden, ohne versteckte Gebühren, um Transparenz zu gewährleisten. Zusätzlich sollten alle Preise, Rabatte oder Staffelpreise nicht nur als Grafiken, sondern auch als Textelemente eingefügt werden, um sie für Nutzende von assistiven Technologien zugänglicher zu machen.

Warenkorb, Checkout & Benutzeranmeldung

Warenkorb einfach bedienbar gestalten

Um den Warenkorb in einem Webshop barrierefrei zu gestalten, sollte dieser über klare und deutliche Schaltflächen zur Änderung der Produktmenge oder zum Entfernen von Produkten verfügen, die sowohl über Tastaturbefehle als auch mittels Screenreadern leicht bedienbar sind. Stellen Sie sicher, dass alle Informationen wie Produkte, Preise und die Gesamtsumme von assistiven Technologien problemlos erfasst werden können.

Checkout-Prozess: Navigation erleichtern

Um den Checkout-Prozess in einem Webshop barrierefrei zu gestalten, sollten alle Schritte des Checkout klar strukturiert und einfach navigierbar sein, etwa durch Fortschrittsanzeigen. Stellen Sie sicher, dass Formularfelder und Interaktionselemente, wie Auswahloptionen für Zahlungsmethoden, mit Tastatur und Screenreadern bedienbar sind. Eine Schritt-für-Schritt-Anleitung, die auch auditiv zugänglich ist, kann den Prozess für alle Nutzenden erleichtern.

Eine Person hält ein Smartphone in der Hand, das eine Zahlungsbestätigung zeigt, während im Hintergrund ein Laptop mit einem Onlineshop zu sehen ist; copyright: Adobe Express

Zahlungssysteme

Der Bezahlvorgang muss so gestaltet sein, dass er mit verschiedenen assistiven Technologien kompatibel ist. Große, klar gekennzeichnete Schaltflächen und die Vermeidung von CAPTCHAs oder anderen visuellen Verifikationsmethoden helfen, die Zugänglichkeit zu verbessern.

Registrierung und Login für (Neu-)Kundinnen und Kunden

Um Login- oder Registrierungsprozesse in einem Webshop barrierefrei zu gestalten, sollten alle Formularelemente klar beschriftet sein. Stellen Sie sicher, dass diese Elemente sowohl über Tastatur als auch durch Screenreader bedienbar sind, indem Sie entsprechende ARIA-Labels und -Rollen verwenden. Zudem sollte eine visuelle und auditive Rückmeldung bei fehlerhafter oder erfolgreicher Eingabe gegeben werden.

Einfache Sprache für wichtige Informationen zur Kaufabwicklung

In einem Onlineshop ist die Verwendung einfacher Sprache besonders wichtig für Texte, die wesentliche Informationen übermitteln, wie Kauf- und Zahlungsanweisungen, Datenschutzbestimmungen, Nutzungsbedingungen oder FAQs. Einfache Sprache sorgt dafür, dass alle Kundinnen und Kunden, einschließlich jener mit Lese- und Verständnisschwierigkeiten, die Inhalte leicht verstehen können und sich während des Kaufprozesses sicherer fühlen.

Kundenservice und digitale Assistenten

Einfacher 24/7-Zugang zu Hilfsangeboten und Support

Stellen Sie einen Live-Support oder Chatbots zur Verfügung, um Nutzenden bei Problemen helfen zu können. Machen Sie Hilfsangebote wie Kontaktinformationen, FAQs (häufig gestellte Fragen) oder Live-Chats einfach auffindbar.

Chats und digitale Assistenten: text- und sprachbasiert

Chats und digitale Assistenten sollten sowohl in textbasierter als auch in sprachaktivierter Form zur Verfügung stehen, um Nutzenden mit unterschiedlichen Einschränkungen den Zugang zu ermöglichen.

Relevanz des barrierefreien E-Commerce für den Einzelhandel: neue Kundengruppen

Eine ältere Dame mit Brille liest konzentriert auf einem Tablet, sitzend in einem gemütlichen Wohnzimmer; copyright: Adobe Express

Durch die Implementierung von barrierefreien Webshops fördern Unternehmen aktiv die Inklusion und ermöglichen Menschen mit verschiedenen Behinderungen oder Seniorinnen und Senioren, unabhängig und selbstbestimmt zu agieren. So erschließen Einzelhändler Kundengruppen und steigern ihr Umsatzpotenzial. Zudem fördern leicht navigierbare, mobil responsive und klar gestaltete Webshops die Kundenzufriedenheit.

Quellen: Coro Cybersecurity Blog, Huntress Blog