Barrierefreiheit verstehen · Warum es zählt

Fallstudie: Vorher und Nachher in acht Wochen

Ein mittelgroßer Onlineshop, 38 Befunde im Erstprüflauf, acht Wochen bis zur Nachprüfung, geschätzte 14 Personentage. Am Ende sind 33 Befunde behoben, drei entfallen auf ein Fremdsystem, zwei bleiben offen. Wichtig zur Einordnung: Das ist ein konstruiertes Beispiel – kein einzelnes reales Kundenprojekt, sondern ein aus wiederkehrenden Befundmustern zusammengesetzter Durchlauf. Alle Zahlen sind Größenordnungen, keine Messwerte.

Warum trotzdem eine Fallstudie? Weil in diesem Themenfeld fast nur Theorie zu finden ist und die häufigste Frage aus Projekten lautet: „In welcher Reihenfolge, und wie lange?“ Genau darauf antwortet diese Seite. Wer die Struktur für einen echten eigenen Bericht sucht, findet sie unter Prüfbericht-Vorlage.

Das Wichtigste in Kürze

  • Ausgangslage: Shop mit rund 400 Seiten, WordPress mit WooCommerce, gewachsenes Theme, kein vorheriger Prüflauf.
  • 38 Befunde, davon 9 mit hoher Priorität – die konzentrieren sich auf Checkout und Formulare.
  • Vier Befundtypen machen zwei Drittel aus: Kontrast, fehlende Labels, entfernter Fokusring, Bilder ohne Alternativtext.
  • Die Reihenfolge entscheidet: erst der Vorgang, den Menschen durchlaufen, dann die Massenfehler, zuletzt die Einzelfälle.
  • Geschätzter Aufwand: 14 Personentage – davon 5 Entwicklung, 4 Redaktion, 3 Design, 2 Prüfung.
  • Drei Befunde entfallen auf den Zahlungsdienstleister und wurden über eine Ausweichlösung plus Eintrag in der Erklärung behandelt.
  • Zwei Befunde blieben offen – bewusst, dokumentiert, mit Termin.
  • Konstruiertes Beispiel, keine realen Kundendaten.

Die Ausgangslage

Der Shop verkauft Ausrüstung an Endkunden, hat rund 400 URLs und läuft auf WordPress mit WooCommerce. Das Theme wurde vor Jahren gekauft und seither erweitert; die Redaktion pflegt Produkte und Ratgeberartikel selbst. Barrierefreiheit war bis zum BFSG kein Thema, ein Prüflauf hatte nie stattgefunden.

Diese Konstellation ist der Regelfall, nicht die Ausnahme – und sie bestimmt das Vorgehen: Es gibt kein Budget für einen Relaunch, aber es gibt eines für Nacharbeit.

Der Prüflauf: 38 Befunde

Geprüft wurden neun Seiten und der vollständige Bestellvorgang – Startseite, Kategorieseite, Produktseite, Warenkorb, drei Checkout-Schritte, Kontaktformular und Ratgeberartikel. Die Auswahllogik steht unter Barrierefreiheit selbst testen.

Befundgruppe Anzahl Priorität Betroffene Kriterien
Kontrast zu gering (Preise, Hinweistexte, Platzhalter) 11 mittel 1.4.3, 1.4.11
Formularfelder ohne verknüpftes Label 7 hoch 4.1.2, 3.3.2
Fokusring entfernt 1 (global) hoch 2.4.7
Produktbilder ohne Alternativtext 6 mittel 1.1.1
Filter ohne Statusansage 3 hoch 4.1.3
Bedeutung nur über Farbe (Verfügbarkeit) 2 hoch 1.4.1
Überschriftenebenen übersprungen 4 niedrig 1.3.1
Reflow bricht bei 400 % (Produkttabelle) 1 mittel 1.4.10
Zahlungs-Widget nicht tastaturbedienbar 3 hoch 2.1.1, 4.1.2

Zwei Beobachtungen sind wichtiger als die Zahlen selbst.

Erstens fallen 24 der 38 Befunde in vier Gruppen – Kontrast, Labels, Fokus, Alternativtexte. Das ist keine Eigenheit dieses Beispiels, sondern die Verteilung, die die jährliche WebAIM-Auswertung von einer Million Startseiten seit Jahren zeigt. Wer diese vier Gruppen abarbeitet, ist mit dem größten Teil der Arbeit durch.

Zweitens sitzt der einzige echte Blocker im Fremdsystem. Das Zahlungs-Widget gehört dem Dienstleister, nicht dem Shop – und genau dort ist der Vorgang nicht durchführbar.

Die Reihenfolge

Die naheliegende Reihenfolge – von oben nach unten durch die Befundliste – ist die falsche. Sortiert wurde nach der Frage, wer wann etwas nicht erledigen kann:

Woche 1–2: der Bestellvorgang. Labels im Checkout, Fokusring global, Statusansage bei Filtern, Verfügbarkeit nicht nur farbig. Das sind die Befunde, die verhindern, dass jemand kauft. Der Fokusring war dabei der Einzelfall mit dem besten Verhältnis: eine zentrale CSS-Regel, zwei Stunden, wirkt auf jeder Seite – siehe Tastaturbedienung & sichtbarer Fokus.

Woche 3: das Fremdsystem klären. Meldung an den Zahlungsdienstleister mit konkreten Befunden, parallel eine erreichbare Ausweichlösung – in diesem Fall die Möglichkeit, per Rechnung zu bestellen, ohne das Widget zu durchlaufen. Warum das die richtige Reaktion ist und nicht ein zugekauftes Overlay, steht dort im Detail.

Woche 4–5: die Massenfehler. Kontrastwerte im Theme, Alternativtexte für Produktbilder. Der Kontrast war eine Palettenentscheidung im Design – elf Befunde, eine Änderung. Die Alternativtexte dagegen sind Redaktionsarbeit und wurden nicht einmalig nachgetragen, sondern mit einer Schulung und einer Pflichtfeld-Regel im Redaktionssystem verbunden, damit sie nicht wieder entstehen.

Woche 6: die Einzelfälle. Überschriftenebenen, die Produkttabelle bei 400 % Zoom.

Woche 7–8: Nachprüfung und Erklärung. Zweiter Prüflauf über dieselben neun Seiten, danach die Barrierefreiheitserklärung mit den verbliebenen Punkten.

Der Aufwand

Rolle Personentage Wofür
Entwicklung 5 Labels, Fokus, Statusansagen, Reflow, Tabellen
Redaktion 4 Alternativtexte, Überschriften, Verfügbarkeitstexte, Schulung
Design 3 Palette, Fokuszustand, Zielgrößen im Checkout
Prüfung 2 Erst- und Nachprüfung, Dokumentation

Vierzehn Personentage klingen nach wenig für 38 Befunde, und das hat einen Grund: Der größte Teil der Arbeit sind wenige zentrale Änderungen mit breiter Wirkung. Was Zeit frisst, ist nicht die Behebung, sondern die Abstimmung – wer entscheidet über die Palette, wer schreibt die Produkttexte, wer redet mit dem Zahlungsdienstleister.

Zum Vergleich: Dieselben Anforderungen in einer Neuentwicklung mitzudenken hätte schätzungsweise ein bis zwei Personentage gekostet – die Einordnung dazu steht unter Was kostet Barrierefreiheit?.

Was am Ende offen blieb

Das ist der Teil, den Fallstudien üblicherweise weglassen, und der ehrlichste:

  • Das Zahlungs-Widget blieb unverändert. Der Dienstleister hat den Befund bestätigt und keinen Termin genannt. Behandlung: Ausweichlösung plus Eintrag in der Erklärung.
  • Die Produktvideos haben keine Untertitel. Der Aufwand liegt bei etwa vier weiteren Personentagen und wurde auf das nächste Quartal terminiert – dokumentiert, mit Datum.
  • Die Ratgeberartikel wurden nur stichprobenhaft geprüft. Bei rund 200 Artikeln ist eine vollständige Prüfung unrealistisch; die Absicherung läuft über die Schulung und eine Checkliste in der Redaktion.

Eine Erklärung, die diese drei Punkte verschweigt, wäre selbst ein Mangel. Der Formulierungsbaukasten dafür steht in der Muster-Barrierefreiheitserklärung.

Was ich anders machen würde

Die Redaktion früher einbeziehen. In diesem Ablauf kommt sie in Woche 4 vor. Sinnvoller wäre Woche 1 gewesen – die Alternativtexte für 400 Produkte sind der längste Weg, und sie laufen parallel zu allem anderen.

Den Zahlungsdienstleister zuerst anschreiben. Die Antwort kam nach elf Tagen. Wer die Meldung in Woche 3 abschickt, verliert diese Zeit; wer sie am ersten Tag abschickt, hat sie in Woche 3 schon.

Den Nachprüflauf enger schneiden. Neun Seiten erneut vollständig zu prüfen war gründlich, aber teuer. Eine gezielte Prüfung der 38 Fundstellen plus zwei Stichprobenseiten hätte gereicht.

Häufige Fragen

Sind die Zahlen echt?

Nein, und das steht bewusst schon im ersten Absatz. Es handelt sich um ein konstruiertes Beispiel, das typische Befundverteilungen und Größenordnungen abbildet. Echte Projekte weichen ab – nach oben, wenn ein Fremdsystem im Kern sitzt, nach unten, wenn das Theme sauber gebaut ist.

Warum acht Wochen und nicht zwei?

Weil die begrenzende Größe nicht die Arbeitszeit ist, sondern die Abstimmung: Palette entscheiden, Texte schreiben, auf den Dienstleister warten. Die reine Umsetzungszeit beträgt in diesem Beispiel 14 Personentage.

Ist der Shop danach „BFSG-konform“?

Nein, und das ist der Punkt. Er ist deutlich besser und hat eine ehrliche Erklärung mit drei benannten Lücken. Konformität ist eine Ja-Nein-Aussage je Kriterium – siehe Konformitätsstufen.

Lohnt sich ein Relaunch statt der Nacharbeit?

Meist nicht als Begründung für sich. Wenn ohnehin ein Relaunch ansteht, sollte Barrierefreiheit Teil der Anforderungen sein – die Bausteine dafür stehen unter Ausschreibung & Lastenheft. Einen Relaunch nur wegen der Barrierefreiheit zu starten, kostet ein Vielfaches der Nacharbeit.

Verwandte Themen

Quellen

Gratis E-Book PDF Das Praxishandbuch

Kostenloses E-Book

Das Praxishandbuch für sauberes, zugängliches Web

Alles rund um semantisches HTML, Barrierefreiheit, WCAG & BFSG, GEO und SEO — praxisnah und am echten Code. In mehreren Feedbackschleifen von Leserinnen und Lesern verbessert.

  • 3.000+ Downloads
  • 7. Auflage
  • 37 Seiten
  • PDF

Kein Spam. Abmeldung jederzeit mit einem Klick möglich.