Ein Kunde füllt das Bestellformular per Tastatur aus, weil er keine Maus benutzen kann. Beim vorletzten Feld verliert er den Überblick: Der Fokus springt an eine Stelle, die nicht sichtbar hervorgehoben ist, und der Bestellknopf ist über die Tastatur nicht erreichbar.
Der Kauf bricht ab. In der Auswertung erscheint das als gewöhnlicher Abbruch im letzten Schritt, und niemand im Team erfährt den Grund. Solche Fälle summieren sich, und seit dem Barrierefreiheitsstärkungsgesetz sind sie zusätzlich eine Frage der Pflichterfüllung.
Der folgende Text ordnet, welche Anforderungen an einen Shop gestellt werden, wie sich der eigene Auftritt ohne Spezialsoftware prüfen lässt und warum dieselben Änderungen die Abbruchquote senken. Ob und in welchem Umfang die Vorgaben für ein bestimmtes Unternehmen gelten, gehört in eine rechtliche Prüfung.
- Rechtsgrundlage: das Barrierefreiheitsstärkungsgesetz, mit Ausnahmen für kleine Anbieter
- Fünf Bereiche: Kontrast, Bedienung ohne Maus, Formulare, Alternativtexte, Struktur
- Kritischer Pfad: Produktseite, Warenkorb, Checkout, Bestellbestätigung
- Prüfung: sieben Handgriffe im Browser, ohne zusätzliches Werkzeug
- Nebeneffekt: dieselben Korrekturen senken Abbrüche bei allen Kunden
- Nicht selbst entscheiden: Geltungsbereich und Ausnahmen mit rechtlicher Beratung klären
Der Knopf, den ein Screenreader nicht findet
Ein erheblicher Teil der Probleme entsteht nicht durch fehlenden Willen, sondern durch Vorlagen und Erweiterungen, die im Shop zusammengesetzt wurden. Ein Zahlungsmodul, ein Einwilligungsdialog, ein Chatfenster: Jedes bringt eigenen Quelltext mit.
Besonders auffällig sind Bedienelemente, die nur optisch wie Knöpfe aussehen. Technisch handelt es sich häufig um andere Elemente, die per Skript reagieren, und die eine Vorlesefunktion weder ankündigen noch bedienen kann.
Das zweite verbreitete Problem ist der unsichtbare Fokus. Wer sich mit der Tabulatortaste durch eine Seite bewegt, muss jederzeit sehen, wo er gerade ist. Viele Vorlagen entfernen diese Markierung aus gestalterischen Gründen.
Beides fällt in der täglichen Arbeit nicht auf, weil niemand im Team so bedient. Es fällt erst auf, wenn jemand danach sucht, und genau das ist der Zweck einer Prüfung.
Wen die Anforderungen betreffen und wen nicht
Das Barrierefreiheitsstärkungsgesetz setzt europäische Vorgaben um und richtet sich unter anderem an Dienstleistungen im elektronischen Geschäftsverkehr. Onlineshops, die an Verbraucher verkaufen, gehören zu den erfassten Angeboten.
Vorgesehen sind Ausnahmen, unter anderem für sehr kleine Unternehmen unterhalb bestimmter Schwellen bei Beschäftigtenzahl und Jahresumsatz. Ob ein Betrieb darunterfällt, hängt von der genauen Ausgestaltung und vom Angebot ab.
Diese Einordnung sollte niemand nach Gefühl vornehmen. Die Schwellen, der Umfang der erfassten Dienstleistungen und die Folgen einer Nichterfüllung gehören in eine rechtliche Prüfung, und dieser Text ersetzt sie ausdrücklich nicht.
Unabhängig von der rechtlichen Einordnung gilt: Die Maßnahmen sind fast alle günstig, wirken auf die Nutzung aller Kunden und lassen sich in bestehende Vorlagen einbauen, ohne den Shop neu zu bauen.
Barrierefreiheit im Onlineshop: die fünf Bereiche, die zählen
Erstens die visuelle Wahrnehmbarkeit: Kontraste, Schriftgrößen, Farbe als alleiniger Bedeutungsträger. Zweitens die Bedienbarkeit ohne Maus: Tastaturreihenfolge, sichtbarer Fokus, erreichbare Bedienelemente.
Drittens Formulare: Beschriftungen, Fehlermeldungen, Pflichtfeldkennzeichnung, Hilfetexte. Viertens Alternativen für nicht-textliche Inhalte: Alt-Texte, Untertitel, Beschreibungen von Diagrammen.
Fünftens die Struktur: Überschriftenebenen, Sprachauszeichnung, sinnvolle Reihenfolge im Quelltext, aussagekräftige Seitentitel. Dieser Bereich wird am häufigsten übersehen und ist am billigsten zu korrigieren.
Die technischen Kriterien dahinter sind in den internationalen Richtlinien für zugängliche Webinhalte beschrieben, die beim World Wide Web Consortium veröffentlicht werden. Sie sind die Grundlage, auf die sich die europäischen Vorgaben stützen.
Bereich eins: Kontrast und Schriftgrößen
Grauer Text auf hellgrauem Grund ist der Klassiker. Er entsteht meist in der Gestaltung sekundärer Angaben: Versandhinweise, Preisangaben in kleiner Schrift, Beschriftungen unter Eingabefeldern.
Geprüft wird das Verhältnis zwischen Vorder- und Hintergrundfarbe. Die Richtlinien nennen Mindestwerte, die sich mit jedem Kontrastrechner nachrechnen lassen, und sie unterscheiden nach Schriftgröße und Schriftstärke.
Ein zweiter Punkt ist Farbe als alleiniges Unterscheidungsmerkmal. Ein rot umrandetes Feld sagt nichts, wenn zusätzlich kein Text erscheint. Fehler brauchen eine Beschriftung, nicht nur eine Farbe.
Der dritte Punkt betrifft die Vergrößerung. Die Seite muss bedienbar bleiben, wenn der Text auf das Doppelte skaliert wird. Feste Höhen in Vorlagen führen dazu, dass Text dann abgeschnitten wird.
Bereich zwei: Bedienung ohne Maus
Jede Funktion, die mit der Maus erreichbar ist, muss auch über die Tastatur erreichbar sein. Das betrifft Menüs, Filter, Bildergalerien, Mengenauswahl, Rabattfelder und jeden Knopf im Bestellvorgang.
Die Reihenfolge beim Durchtabben muss der sichtbaren Reihenfolge entsprechen. Springt der Fokus von oben links in den Fußbereich und zurück, ist die Seite technisch anders aufgebaut, als sie aussieht.
Der Fokus muss sichtbar sein, deutlich und auf jedem Hintergrund. Wer diese Markierung aus der Vorlage entfernt hat, ersetzt sie durch eine eigene, statt sie ersatzlos zu streichen.
Besondere Aufmerksamkeit verdienen Überlagerungen. Ein geöffnetes Fenster muss den Fokus einschließen und beim Schließen an die Ausgangsstelle zurückgeben. Wird das versäumt, landet man unbemerkt hinter dem Fenster.
Bereich drei: Formulare und Fehlermeldungen
Jedes Eingabefeld braucht eine dauerhaft zugeordnete Beschriftung. Ein Platzhaltertext im Feld genügt nicht, weil er beim Tippen verschwindet und dann niemand mehr weiß, was dort hineingehört.
Fehlermeldungen gehören an das Feld, das sie betreffen, mit einer Beschreibung des Problems und einem Hinweis zur Lösung. Eine Sammelmeldung am Seitenanfang ohne Zuordnung hilft niemandem weiter.
Pflichtfelder werden im Text gekennzeichnet, nicht ausschließlich durch ein Sternchen in einer bestimmten Farbe. Zusätzlich sollte oberhalb des Formulars stehen, was die Kennzeichnung bedeutet.
Automatische Vervollständigung erleichtert die Eingabe erheblich, wenn die Felder korrekt ausgezeichnet sind. Das ist eine Einstellung im Quelltext und keine Frage der Gestaltung. Wie sich Formulare insgesamt kürzen lassen, ordnet der Beitrag zur Conversion-Optimierung ein.
Bereich vier: Bilder, Videos und Alternativtexte
Produktbilder brauchen beschreibende Alternativtexte, dekorative Bilder ein leeres Attribut. Diese Unterscheidung ist die häufigste Nachlässigkeit und in wenigen Stunden für die wichtigsten Seiten nachgeholt.
Videos mit Sprache brauchen Untertitel. Bei Produktvideos ohne Sprache genügt eine kurze Beschreibung des Gezeigten, weil sonst nicht erkennbar ist, ob das Video Informationen enthält.
Diagramme und Größentabellen als Grafik sind ein eigenes Problem. Eine Größentabelle gehört als echte Tabelle in den Quelltext, nicht als Bild, sonst ist sie weder vorlesbar noch durchsuchbar.
Bei Symbolen ohne Beschriftung, etwa dem Warenkorbsymbol, braucht das Bedienelement eine textliche Bezeichnung. Sie kann optisch verborgen sein, muss aber technisch vorhanden bleiben.
Bereich fünf: Struktur und Überschriften
Eine Seite hat eine Hauptüberschrift und darunter eine logische Gliederung ohne übersprungene Ebenen. Überschriften werden nach ihrer Funktion vergeben, nicht nach der gewünschten Schriftgröße.
Der Seitentitel im Browserfenster sollte die Seite eindeutig benennen. Bei Shops mit hunderten Produkten ist das häufig nicht der Fall, weil eine Vorlage denselben Titel für alle Detailseiten erzeugt.
Die Sprache der Seite gehört ausgezeichnet, damit die Vorlesefunktion die richtige Aussprache wählt. Bei fremdsprachigen Passagen wird die Auszeichnung für den Abschnitt gesetzt.
Ein Sprunglink zum Hauptinhalt am Seitenanfang erspart es, bei jeder Seite die gesamte Navigation durchzutabben. Er ist mit wenigen Zeilen umgesetzt und wirkt auf jeder einzelnen Seite.
Tabellen brauchen echte Kopfzellen, damit die Zuordnung von Wert und Spalte vorlesbar bleibt. Größentabellen und Vergleichsübersichten sind die häufigsten Stellen, an denen stattdessen einfache Zellen mit fetter Schrift verwendet werden.
Der Checkout ist der kritische Pfad
Nicht jede Seite ist gleich wichtig. Wenn Zeit fehlt, wird der Pfad geprüft, auf dem ein Kauf zustande kommt: Startseite, Kategorie, Produktseite, Warenkorb, Bestellvorgang, Bestätigung.
Innerhalb dieses Pfads sind drei Stellen besonders anfällig: die Auswahl von Varianten, die Adresseingabe und die Auswahl der Zahlart. Alle drei arbeiten mit Bedienelementen, die häufig nachgebaut statt verwendet wurden.
Ebenfalls kritisch ist der Einwilligungsdialog. Er erscheint vor allem anderen, überlagert die Seite und ist in vielen Umsetzungen mit der Tastatur nur schwer oder gar nicht zu bedienen.
Wird nur dieser Pfad in Ordnung gebracht, ist der größte Teil des praktischen Nutzens erreicht. Der Rest des Shops folgt danach in Ruhe. Wie sich derselbe Pfad auf mobilen Geräten verhält, beschreibt der Beitrag zur Bedeutung von Responsivität.
Prüfen ohne Spezialsoftware: sieben Handgriffe
- Die Maus beiseitelegen und den gesamten Kaufvorgang nur mit Tabulator, Pfeiltasten und Eingabetaste durchlaufen
- Dabei beobachten, ob jederzeit sichtbar ist, wo der Fokus steht
- Die Seite im Browser auf zweihundert Prozent vergrößern und prüfen, ob Text abgeschnitten wird
- Ein Formular absichtlich falsch ausfüllen und prüfen, ob die Fehlermeldung am Feld steht
- Den Quelltext auf die Reihenfolge der Überschriftenebenen durchsehen
- Die Vorlesefunktion des Betriebssystems einschalten und eine Produktseite anhören
- Den Einwilligungsdialog ohne Maus schließen und danach den Fokus wiederfinden
Diese sieben Schritte dauern etwa eine Stunde und finden erfahrungsgemäß den größten Teil der auffälligen Mängel. Ein vollständiger Nachweis ist damit nicht erbracht, dafür braucht es eine fachliche Prüfung.
Was der Browser allein schon verrät
Die Entwicklerwerkzeuge jedes gängigen Browsers enthalten eine Prüffunktion für Zugänglichkeit. Sie liefert eine Liste maschinell erkennbarer Probleme, etwa fehlende Alternativtexte oder unzureichende Kontraste.
Diese Prüfung findet einen Teil der Fehler, keinesfalls alle. Ob eine Beschriftung sinnvoll ist, ob die Reihenfolge logisch wirkt und ob eine Fehlermeldung verständlich formuliert ist, kann kein Werkzeug beurteilen.
Nützlich ist außerdem die Baumansicht der Zugänglichkeit. Sie zeigt, als was ein Element technisch gilt, und deckt genau die Fälle auf, in denen ein Knopf optisch ein Knopf ist und technisch nicht.
Für den Anfang genügt das vollständig. Wer damit die offensichtlichen Punkte abgearbeitet hat, weiß danach deutlich besser, wofür externe Unterstützung sinnvoll ist.
Sinnvoll ist eine schriftliche Mängelliste mit Adresse der Seite, betroffenem Element, festgestelltem Problem und Datum. Sie dient später als Nachweis der Bemühungen und als Grundlage für die Beauftragung einer Agentur.
Die Erklärung zur Barrierefreiheit und der Rückmeldeweg
Zu den Anforderungen gehört in vielen Konstellationen eine Erklärung darüber, in welchem Umfang das Angebot zugänglich ist, welche Teile es nicht sind und wie sich Nutzer melden können.
Ein Rückmeldeweg ist unabhängig davon sinnvoll. Eine kurze Angabe mit einer Kontaktmöglichkeit reicht aus und liefert Hinweise, die keine interne Prüfung findet, weil sie aus der tatsächlichen Nutzung stammen.
Was eine solche Erklärung enthalten muss und für wen sie gilt, unterscheidet sich je nach Angebot. Diese Frage gehört zu den Punkten, die vorab rechtlich geklärt werden sollten.
Praktisch bewährt hat sich eine eigene Seite mit dem Stand der Umsetzung, dem Datum der letzten Prüfung und dem Kontaktweg. Sie wird zweimal im Jahr fortgeschrieben.
Wichtig ist, dort keine Vollständigkeit zu behaupten, die nicht geprüft wurde. Eine ehrliche Angabe über bekannte Einschränkungen und geplante Korrekturen ist belastbarer als eine pauschale Erklärung, die beim ersten Test widerlegt wird.
Prüfpunkte und Abnahmekriterien
| Prüfpunkt | Vorgehen | Bestanden, wenn |
|---|---|---|
| Tastaturbedienung | Kauf ohne Maus abschließen | der Vorgang vollständig durchläuft |
| Sichtbarer Fokus | durch alle Elemente tabben | die Position jederzeit erkennbar ist |
| Kontrast | Farbwerte nachrechnen | alle Texte die Mindestwerte erreichen |
| Formularbeschriftung | Quelltext der Felder prüfen | jedes Feld eine zugeordnete Beschriftung hat |
| Fehlermeldungen | Formular falsch ausfüllen | der Hinweis am Feld steht und den Fehler benennt |
| Alternativtexte | Produktseiten durchsehen | inhaltliche Bilder beschrieben, dekorative leer sind |
| Überschriftenstruktur | Gliederung im Quelltext lesen | keine Ebene übersprungen wird |
| Vergrößerung | Darstellung auf zweihundert Prozent | kein Text abgeschnitten wird |
Die erste Zeile ist die aussagekräftigste. Ein Shop, in dem sich ein Kauf ohne Maus abschließen lässt, hat den überwiegenden Teil der übrigen Punkte meist ebenfalls erfüllt.
Reihenfolge der Umsetzung bei knapper Zeit
Zuerst der Fokusrahmen, weil er in einer Zeile Quelltext wiederhergestellt ist und sofort auf allen Seiten wirkt. Danach die Bedienbarkeit des Einwilligungsdialogs, weil er jeden Besuch blockiert.
Danach die Formulare im Bestellvorgang: Beschriftungen, Fehlermeldungen, automatische Vervollständigung. Das ist der Bereich mit der größten Wirkung auf abgeschlossene Bestellungen.
An vierter Stelle die Kontraste, weil sie eine reine Gestaltungsentscheidung sind und in der Vorlage zentral geändert werden. An fünfter die Alternativtexte der wichtigsten Produktseiten.
Alles Weitere, insbesondere Videos und Struktur, folgt in einem zweiten Durchgang. Diese Reihenfolge bringt in etwa zwei Arbeitstagen den größten Teil des praktischen Nutzens.
Warum dieselben Änderungen die Abbruchquote senken
Ein Fehlerhinweis am richtigen Feld hilft jedem, nicht nur Nutzern mit Vorlesefunktion. Eine sichtbare Fokusmarkierung hilft allen, die schnell tippen. Ausreichender Kontrast hilft bei Sonnenlicht auf dem Bildschirm.
Automatische Vervollständigung der Adressfelder verkürzt die Eingabe für alle Kunden spürbar. Größentabellen als echte Tabelle statt als Bild sind auf kleinen Bildschirmen überhaupt erst lesbar.
Deshalb lohnt sich die Messung. Wer die Abbruchquote im Bestellvorgang vor und nach den Änderungen vergleicht, hat eine eigene Zahl statt einer allgemeinen Behauptung. Wie sich das auf die Bindung auswirkt, ordnet der Beitrag zur Bedeutung von Nutzererfahrungen ein.
Der Aufwand ist überschaubar, der Nutzen doppelt: erfüllte Anforderungen und ein Bestellvorgang, der weniger Menschen unterwegs verliert. Wenige Maßnahmen im Shop haben dieses Verhältnis.
Häufige Fragen
Reicht ein Werkzeug, das per Skript nachträglich anpasst?
Solche Zusatzwerkzeuge lösen die zugrunde liegenden Probleme im Quelltext nicht und können die Bedienung mit Hilfstechnologien zusätzlich stören. Die Korrektur gehört in die Vorlage, nicht in eine darübergelegte Schicht.
Muss auch der Blogbereich geprüft werden?
Für die praktische Wirkung steht der Kaufpfad an erster Stelle. Wie weit die rechtlichen Anforderungen reichen, hängt vom Angebot ab und gehört in die rechtliche Prüfung, die dem Projekt vorausgeht.
Was ist mit Erweiterungen von Drittanbietern?
Sie gehören zum Auftritt und werden mitgeprüft. Wo ein Anbieter nicht nachbessert, bleibt der Austausch, und dieser Punkt sollte bei jeder künftigen Auswahl von Anfang an eine Rolle spielen.
Wie oft wird nachgeprüft?
Nach jeder größeren Änderung an Vorlage oder Bestellvorgang, mindestens aber einmal im Jahr. Sinnvoll ist ein kurzer Durchlauf des Kaufpfads ohne Maus nach jedem Aktualisierungsschritt des Systems.
Was kostet die Umsetzung ungefähr?
Das hängt vom Zustand der Vorlage ab und lässt sich nicht pauschal beziffern. Die im Text beschriebene Prüfung liefert eine Mängelliste, mit der sich ein Angebot einholen lässt, das auf dem eigenen Shop beruht.
Nehmen Sie sich eine Stunde, legen Sie die Maus weg und kaufen Sie in Ihrem eigenen Shop ein Produkt. Was dabei nicht funktioniert, steht am Ende auf einer Liste, die kurz genug ist, um sie in dieser Woche abzuarbeiten.
