© mackoflower / 123rf.com

Trotz schicker Fotos, SEO und digitaler Werbung schließen Kunden ihren Einkaufswagen im Onlineshop häufig, bevor sie einen Kauf tätigen. Das liegt in erstaunlich vielen Fällen an einem nicht barrierefreien Webdesign. Wir geben deshalb Best-Practice-Anregungen für zugänglichere und besser nutzbare Websites.

Laut der Weltgesundheitsorganisation (WHO) leben weltweit über 1,3 Milliarden Menschen mit einer Behinderung. Obwohl es sich dabei also nicht um eine Nischenzielgruppe handelt, schließen viele Online-Händler dieses riesige Marktsegment unbeabsichtigt aus. Einige Untersuchungen deuten darauf hin, dass Menschen mit Behinderungen aufgrund des einfachen Zugangs zum Web mehr als doppelt so häufig online einkaufen wie Menschen ohne Behinderung.

Über die geschäftlichen Möglichkeiten hinaus müssen sich Anbieter mit der digitalen Barrierefreiheit beschäftigen, da sie ab Mitte 2025 zum gesetzlichen Gebot wird. Den European Accessibility Act (EAA) hat Deutschland im Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt. Alle Unternehmen, die in der Europäischen Union digitale Produkte, Dienstleistungen oder Inhalte verkaufen, müssen ab dem 28. Juni 2025 die Vorschriften einhalten. Dazu gehören auch E-Commerce-Plattformen, mobile Apps, Ticketsysteme und E-Books. Sämtliche Websites von Unternehmen, die vom BFSG betroffen sind, müssen barrierefrei gestaltet werden. Das schließt bestehende und neue Websites ein, die Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher anbieten.

Unnötige Barrieren

Eine Webseite ist barrierefrei, wenn Nutzende, die Einschränkungen beim Sehen, Hören, Bewegen oder Verarbeiten von Informationen haben, trotzdem die Inhalte wahrnehmen, bedienen und verstehen können. Zu den Barrieren zählen beispielsweise:

• Menschen mit Sehbehinderungen können Texte oder Formularfelder schlecht erkennen, wenn die Inhalte zu geringe Kontraste haben oder sich nicht vergrößern lassen.
• Gehörlose und schwerhörige Personen können Videos nicht nutzen, wenn die Audioinhalte nicht auch als Text in den Untertiteln verfügbar sind.
• Blinde Menschen können Websites nicht richtig nutzen, wenn Bilder, Formulare und Buttons keine Bezeichnung in Textform aufweisen.

Hilfreiche Standards

Das World Wide Web ließ sich schon immer barrierefrei gestalten – mit HTML, CSS und anderen Techniken lassen sich Inhalte so zusammenstellen, dass sie für alle Menschen zugänglich sind. Angesichts der jungen Geschichte des Web ist die Barrierefreiheit somit fast ein “alter Hut” und integrativer Bestandteil der Entwicklung der Webstandards. Bereits im Jahr 1999 veröffentlichte das World Wide Web Consortium (W3C) mit den Content Accessibility Guidelines (WCAG) 1.0 umfangreiche Empfehlungen für die Gestaltung von Websites. Es folgten weitere Zugänglichkeitsrichtlinien des W3C und anderer Organisationen zur digitalen Barrierefreiheit in verschiedenen Kontexten. Die aktuelle Version 2.2 der WCAG [1] stammt aus dem Jahr 2023 (Abbildung 1).

Abbildung 1: Die zahlreichen Accessibility Guidelines des W3C führen zu einer weitgehend barrierefreien Website, die allen Besuchenden die Bedienung erleichtern.

Barrierefreiheit müssen Entwickler dabei immer für ganze Websites denken. Ohne diesen Ansatz erreicht man keine Konformität zu den WCAG. Anforderungen für Websites beschreibt das Kapitel 9 der europäischen Norm EN 301 549. Sie verweist im Wesentlichen auf die Erfolgskriterien der WCAG. Wer als Online-Einzelhändler den EU-Markt bedient, muss seine Webseiten, Bezahlvorgänge und Support-Kanäle für Kunden WCAG-konform gestalten.

Hinter dem Aufbau eines barrierefreien Onlineshops steckt aber mehr als die bloße Erfüllung technischer Standards. Vielmehr müssen Sie eine intuitive und einladende Umgebung für alle schaffen. Nur so erzeugen Sie ein digitales Einkaufserlebnis, das für alle funktioniert und das die Kunden wiederholen möchten. Die WCAG nennt dazu über 50 Erfolgskriterien, die Sie prinzipiell komplett erfüllen müssen. Manche Aspekte kommen jedoch eher selten vor oder spielen lediglich bei bestimmten Inhaltsformen eine Rolle. Es gibt allerdings Themen, die Webseiten immer umsetzen und um die Sie sich folglich zuerst kümmern sollten.

Die größten Baustellen

Wenn barrierefreies Webdesign für Sie neu ist und Sie nach Stellschrauben suchen, um auf den richtigen Weg zu gelangen, dann entsprechen diese vier Aspekte den Kernanforderungen: Textalternativen für Bilder, Strukturen für sämtliche Inhalte, Tastaturbedienung und korrekte Auszeichnung von interaktiven Inhalten (mit HTML oder ARIA).

Selbstverständlich existieren noch zahlreiche weitere Aspekte der Barrierefreiheit, die Sie umsetzen müssen. Darunter fallen teilweise auch “low hanging fruits” und Dinge, die Ihre Website bereits erfüllt. Dazu zählen zum Beispiel die Angabe der Sprache oder hilfreiche (statt allgemeine) Fehlermeldungen in Formularen. Letztlich müssen Sie aber die vier Kernanforderungen im Griff haben.

Das heißt nicht, dass Kontraste, Formularbeschriftungen, abschaltbare Animationen und Untertitel für Videos weniger wichtig sind. Wenn Sie beispielsweise Videos online stellen, dann sollten Sie sich eingehend mit Untertiteln beschäftigen. Häufiger kommen jedoch Bilder, Texte und interaktive Elemente auf Webseiten vor. Sie müssen korrekt ausgezeichnet sein und sich über die Tastatur bedienen lassen. Grundsätzlich gilt: Nicht erfüllte Anforderungen können eine Webseite unzugänglich machen.

Intuitive Navigation

Strukturen auf Websites sind das A und O des barrierefreien Webdesigns. Sie beeinflussen direkt, ob Nutzende zielführend navigieren können oder frustriert ihren Besuch abbrechen. Insbesondere bei der Navigation per Tastatur oder per Screenreader braucht es zwingend übersichtliche Strukturen.

Setzen Sie zunächst semantisches HTML und beschreibende Überschriften ein, um die Struktur einer Webseite festzulegen und Personen, die einen Screenreader einsetzen, die Interpretation zu erleichtern. Entwerfen Sie eine Hierarchie von Webseiten, die der Denkweise der Zielgruppen entspricht und nicht etwa der Logik eines Redaktionssystems oder dem Aufbau Ihrer Organisation.

Beschriften Sie Suchfunktionen eindeutig und stellen Sie sicher, dass sie auf allen Gerätetypen zur Verfügung stehen. Setzen Sie Sprunglinks (“Zum Hauptinhalt springen”) und Breadcrumb-Navigationen ein, damit Nutzende sich besser orientieren und schneller das gewünschte Ziel finden können.

Gut strukturierte Webseiten und Websites (Kasten “Website oder Webseite?”) verbessern die Gebrauchstauglichkeit für alle, steigern die SEO-Performance, verkürzen die Zeit für das Suchen und erhöhen die Kundenzufriedenheit.

Tastaturbedienung

Die Möglichkeit, Inhalte zu finden und zu entdecken, ist ein erster Schritt. Nutzende müssen allerdings auch ungehindert mit Ihren Webseiten interagieren können, insbesondere ohne Maus. Viele Menschen mit Behinderungen navigieren per Tastatur oder mit Assistenztechnologien wie Screenreadern. Wenn sich wichtige Inhalte ausschließlich per Zeiger bedienen lassen, bricht das gesamte Einkaufserlebnis zusammen.

Gewährleisten Sie daher, dass sämtliche interaktiven Inhalte wie Menüs und Auswahllisten, Karussells mit Ihren Produkten und modale Dialogfenster vollständig über die Tastatur navigierbar und bedienbar sind. Verwenden Sie die [Tab]+-, [Umschalt]+[Tab]-, Pfeil-, [Eingabe]+- und [Esc]-Tasten, um den funktionierenden Ablauf im Browser sicherzustellen.

Außerdem müssen alle erweiterten Optionen vollständig über die Tastatur erreichbar sein. Darunter fallen in einem Onlineshop beispielsweise die Filterfunktionen für die Produkte (Marke, Farbe, Preisspanne etc.). Häufig befinden sich die Filter an Stellen der Webseite, die ohne Maus schwer zu erreichen sind.

Testen Sie Ihre Website mit Screenreadern wie Orca [2]. Achten Sie auf Nachvollziehbarkeit, Fokus-Reihenfolge und unsichtbare Barrieren. Beseitigen Sie Tastaturfallen, bei denen man zwar ein Dialogfenster oder Formularfeld per Tastatur einblenden, aber nicht wieder ausblenden beziehungsweise weiternavigieren kann.

Gute Gestaltungsmuster für die Interaktion verbessern nicht nur die Barrierefreiheit, sondern optimieren obendrein die Gebrauchstauglichkeit auf mobilen Geräten und unterstützen diejenigen, die über Tastaturkürzel in ihren Benutzeragenten navigieren. Wenn Sie jede Interaktion kompatibel mit Assistenztechnologien gestalten, reduzieren Sie umständliche Bedienarten, erhöhen die Geschwindigkeit und sorgen für ein insgesamt zufriedenstellenderes Erlebnis der Kunden.

Textalternativen bieten

Visuelle Darstellungen sind im E-Commerce von zentraler Bedeutung. Doch ohne aussagekräftige Textalternative (zum Beispiel mit einem »alt«-Attribut für ein Bild) bleiben alle, die auf Screenreader angewiesen sind, auf der Strecke. Software, die mit künstlicher Intelligenz Bildbeschreibungen generiert, hat einen Haken. Die Ergebnisse vermitteln zwar einen Eindruck eines Bilds, ergeben aber keine aussagekräftige Textalternative, die wirklich weiterhilft. Oft fehlt der Kontext oder bestimmte Details werden nicht angemessen benannt. Deshalb sind sorgfältig formulierte Textalternativen auf der Webseite weiterhin wichtig. Die gelingen Ihnen mit folgenden Regeln:

• Schreiben Sie knappe, aber informative Textalternativen. Sie sollten die wichtigsten Produktmerkmale hervorheben, die für eine Entscheidungsfindung nötig sind.
• Formulieren Sie spezifisch und kontextbezogen. Denken Sie an wichtige Details, Farben oder andere Variationen des Produkts und nicht nur an ein “Paar von Schuhen”.
• Vermeiden Sie Phrasen wie “Dieses Bild zeigt …” – es sei denn, sie sind zur Verdeutlichung des Gezeigten erforderlich.
• Verlassen Sie sich nicht ausschließlich auf KI oder andere Werkzeuge zur Erkennung von Inhalten in Bildern. Solche Software kann Ihre Bemühungen um Barrierefreiheit unterstützen, aber keinesfalls ersetzen.

Gut durchdachte Textalternativen geben mehr Nutzenden ein sicheres Gefühl. Sie verbessern außerdem SEO, reduzieren Support-Anfragen und schaffen Vertrauen – denn Ihre Website kommuniziert klar und deutlich, sodass sich gehandicapte Personen nicht auf Vermutungen stützen müssen.

Abbildung 2: Mittlerweile enthalten alle großen Browser Werkzeuge, die eine Website auf ihre Barrierefreiheit prüfen. Hier moniert Firefox problematische Kontraste.

Kontrastreiches Design

Sind Ihre Inhalte nicht gut zu lesen, erschwert das eine Interaktion mit Ihrem Shop und verhindert eventuell einen Kauf. Leserlichkeit gehört zu den Grundpfeilern der Barrierefreiheit, insbesondere für Kunden mit Sehbehinderung, Farbenblindheit oder kognitiven Einschränkungen. Eine gute Typografie verbessert gleichzeitig das Kauferlebnis auf Mobilgeräten.

Erfüllen Sie daher zunächst die Anforderungen an den Kontrast nach den WCAG. Die Richtlinien fordern ein Kontrastverhältnis von mindestens 4,5:1 für normal großen Fließtext und 3:1 für großen Text (ab 18pt oder ab 14pt und fett). Nutzen Sie Werkzeuge zur Prüfung der Kontraste, um Farbkombinationen für Vordergrund und Hintergrund zu testen.

Das können Tools im Browser sein (wie sie Abbildung 2 zeigt) oder separate Software wie der Color Contrast Analyser (CCA) [3]. Letztgenanntes Werkzeug bietet visuelle Simulationen und Auswertungen zur WCAG-Konformität, steht aber nur für Windows und Mac bereit. Unter Linux existiert als etwas weniger funktionsreiche Alternative das in Abbildung 3 dargestellte Kontrast [4].

Abbildung 3: Die Anwendung Kontrast der KDE-Entwickler bewertet den Kontrast zweier Farben. Farbpipetten helfen bei der Auswahl.

Verlassen Sie sich zudem nicht allein auf Farben zur Informationsvermittlung. Ergänzen Sie Farbe durch Text, Symbole oder Muster, um die Informationen auf einem zweiten visuellen Weg zu vermitteln, zum Beispiel in Fehlermeldungen oder Produktfiltern.

Verwenden Sie gut erkennbare Schriftarten mit klaren Buchstabenformen, ausreichendem Abstand und vorhersehbaren Formen – vermeiden Sie beispielsweise übermäßig stilisierte Schriftarten. Lassen Sie alle Inhalte umfließen. Wenn Sie die Zoom-Funktion aktivieren, muss das Layout sämtliche Informationen und Funktionen erhalten. Gemäß den WCAG muss sich die Zoom-Stufe um bis zu 400 Prozent (320 CSS-Pixel) ändern lassen.

Kontrastreiche, flexible Typografie verbessert gleichzeitig die mobile UX, da Lesende dort mit Blendeffekten, kleinen Bildschirmen und ständiger Bewegung konfrontiert sein können. Die Leserlichkeit wird dann umso wichtiger. Barrierefreie Typografie erhöht die Gebrauchstauglichkeit auf jedem Bildschirm für alle und sorgt für reibungslose Klick-Pfade von der Startseite bis zum Checkout.

Barrierefreier Checkout

Der Checkout verwandelt das Interesse an einem Produkt in Umsatz. Gleichzeitig ist er die Stelle, an der viele den Prozess abbrechen – vor allem wenn Formulare unklar oder unzugänglich sind. Wer per Screenreader oder per Tastatur navigiert, sieht sich häufig mit Hindernissen wie unbeschrifteten Feldern, zu kurz eingeblendeten Anweisungen oder ungenügender Fehlerbehandlung konfrontiert.

Damit die Formulare für alle funktionieren und einen Kaufabschluss ermöglichen, versehen Sie zunächst jedes Formularfeld konsequent mit einem “accessible name”. Vermeiden Sie es, sich auf Platzhaltertext als einzige Beschriftung zu verlassen: Er verschwindet, sobald jemand mit der Eingabe beginnt. Screenreader erkennen ihn darüber hinaus nicht immer.

Stellen Sie klare Anweisungen oder Hilfe in der Nähe des Felds bereit und nicht etwa in einem Tooltip versteckt. Zeigen Sie Fehlermeldungen dynamisch und sichtbar an. Sie sollten inline erscheinen und von Assistenztechnologien erfasst werden können, zum Beispiel als Live-Region. Formulieren Sie Fehlermeldungen möglichst genau und geben Sie darin Hinweise zum Beheben des Problems.

Setzen Sie ARIA-Attribute verantwortungsbewusst ein. Rollen wie »aria-describedby« und »aria-invalid« helfen Personen, die einen Screenreader nutzen, bei der Interpretation beispielsweise von Fehlerzuständen. Auf überflüssige ARIA-Attribute sollen Sie jedoch verzichten. Sie können zu Konflikten führen oder Verwirrung stiften. Nicht vergessen: Kein ARIA ist besser als falsches ARIA.

Blockieren Sie weder die Autovervollständigung noch den Einsatz von Passwortmanagern. Menschen mit Behinderungen verlassen sich häufig auf solche Werkzeuge, um Tastenanschläge zu reduzieren, weil sie schnell ermüden oder nur langsam tippen können. Die Hilfen “aus Sicherheitsgründen” zu verbieten, errichtet unnötige Barrieren.

Mit barrierefreien Formularen im Checkout-Prozess schaffen Sie Zuversicht bei den Nutzenden. Warenkörbe verwaisen nicht, Checkouts werden bis zum Ende durchlaufen und insgesamt steigt das Vertrauen. Denken Sie an Ihre Kundschaft, so denkt die später an Sie zurück.

Commitment

Barrierefreiheit ist vielschichtig und betrifft Texte, HTML, Interaktion und Gestaltung. Sie erfasst aber auch Dokumente, Multimedia und weitere Inhalte. Barrierefreiheit entspricht einer handwerklichen Arbeit, die unterschiedliche Personen in ganz verschiedenen Positionen berücksichtigen müssen. Sie beschränkt sich nicht auf Webentwicklung, Design und Redaktion – zum Beispiel erfordert sie Schulungen ebenso wie das Planen und Umsetzen qualitätssichernder Maßnahmen.

Wie sich Barrieren auf die tatsächliche Nutzbarkeit auswirken, erscheint womöglich im ersten Moment abstrakt. Deswegen müssen Webworker die Arbeitsweise von Personen mit Behinderungen kennenlernen und verstehen. Sie müssen sich nicht nur mit Assistenztechnologien beschäftigen, sondern auch mit vielen weiteren Aspekten der Webgestaltung für unterschiedliche Nutzergruppen. Die Anforderungen der WCAG gelten als Mindestanforderungen.

Konsequente Ausrichtung

Eine barrierefreie Website ist grundsätzlich zugänglich und nutzbar. Doch zahlreiche Aspekte der Barrierefreiheit fehlen in den zentralen Anforderungen. Wenn Sie Ihre Kunden in den Mittelpunkt stellen, müssen Sie die Bereitschaft haben, über die Mindestanforderungen hinaus weitere Punkte zu berücksichtigen. Vor allem wegen der Vielschichtigkeit sollten Sie folgende Aussagen einmal wirken lassen:

• Die Umsetzung von Barrierefreiheit braucht Zeit.
• Barrierefreiheit ist eine Teamaufgabe.
• Digitale Barrierefreiheit ist immer umsetzbar.
• Digitale Barrierefreiheit ist ein Qualitätsmerkmal.
• Barrierefreiheit lässt sich nicht in ein fertiges Projekt hineinprüfen.

Es sollte im Interesse aller Beteiligten sein, ein ausreichendes Qualitätsniveau zu erreichen. Bei der Entwicklung von Komponenten, Widgets, Inhalten und Designs, aber auch beim Einsatz von Frameworks und Redaktionssystemen können Sie die Barrierefreiheit priorisieren.

Mit Konformitätsprüfungen lassen sich Webseiten überprüfen und qualitativ verbessern. Bevor Sie jedoch einen Accessibility Consultant mit einem Gutachten zur WCAG-Konformität beauftragen, sollten Sie die Barrierefreiheit in Ihre digitale Strategie integrieren.

Wenn Ziele und Maßnahmen formuliert sind, wirkt sich das nicht nur positiv auf die die Ergebnisse aus. Zusätzlich entwickelt sich eine Barrierefreiheitskultur oder -mentalität in Ihrem Unternehmen. Die digitale Barrierefreiheit können Sie dann in den Entwicklungsprozessen verankern.

Fazit

Die Barrierefreiheit Ihrer E-Commerce-Website funktioniert nicht auf Knopfdruck. Digitale Barrierefreiheit ist ein kontinuierlicher Prozess, der sich mit Ihren Zielgruppen, Ihrer Technologie und den Vorschriften weiterentwickelt. Dahinter verbirgt sich außerdem mehr als eine Checkliste, die einmal erstellt stets WCAG-Konformität garantiert.

Sollten Ihre Produkte und Dienstleistungen unter das BFSG fallen, dann können Sie sich auch an die Bundesfachstelle Barrierefreiheit [5] wenden. Sie kann bei juristischen und technischen Fragen Unterstützung leisten.  (tsc)