Bilder, Videos und Texte
Inhalte müssen wahrnehmbar sein – auch für Menschen, die nicht sehen oder nicht hören.
- ✓Informative Bilder haben einen Alternativtext, dekorative ein leeres alt-Attribut (WCAG 1.1.1).
- ✓Produktbilder beschreiben, was zu sehen ist – nicht den Dateinamen.
- ✓Videos mit Ton haben Untertitel (1.2.2).
- ✓Überschriften bilden die Gliederung ab – H1, H2, H3 in sinnvoller Reihenfolge (1.3.1).
- ✓Die Sprache der Seite ist im Code hinterlegt (3.1.1).
- ✓Jede Seite hat einen eindeutigen Titel (2.4.2).
- ✓Linktexte sagen, wohin sie führen – kein „hier klicken“ ohne Zusammenhang (2.4.4).
Kontraste und Darstellung
Was zu blass, zu klein oder nur farbig markiert ist, geht für viele Menschen verloren.
- ✓Normaler Text hat mindestens 4,5 : 1 Kontrast, großer Text 3 : 1 (1.4.3).
- ✓Buttons, Eingabefelder und Icons heben sich mit 3 : 1 vom Hintergrund ab (1.4.11).
- ✓Information steckt nicht nur in der Farbe – etwa Pflichtfelder oder Fehler nur in Rot (1.4.1).
- ✓Text lässt sich auf 200 % vergrößern, ohne dass Inhalte verloren gehen (1.4.4).
- ✓Bei 320 Pixeln Breite muss nichts quer gescrollt werden (1.4.10).
Tastatur und Bedienung
Viele Menschen bedienen Websites ohne Maus – mit Tastatur, Schalter oder Sprachsteuerung.
- ✓Alles lässt sich mit der Tastatur bedienen: Menü, Filter, Variantenauswahl, Slider (2.1.1).
- ✓Der Fokus ist immer sichtbar (2.4.7).
- ✓Es gibt keine Tastaturfalle – auch nicht im Cookie-Banner oder in Pop-ups (2.1.2).
- ✓Wiederkehrende Navigation lässt sich überspringen, etwa mit „Zum Inhalt springen“ (2.4.1).
- ✓Automatisch laufende Slider lassen sich anhalten (2.2.2).
Formulare und Checkout
Hier entsteht der Umsatz – und hier liegen die teuersten Barrieren.
- ✓Jedes Feld hat ein Label oder eine Anleitung, nicht nur einen Platzhalter (3.3.2).
- ✓Fehler werden in Textform benannt und erklärt (3.3.1, 3.3.3).
- ✓Bestellungen lassen sich vor dem Absenden prüfen und korrigieren (3.3.4).
- ✓Adress- und Kontaktfelder sind für das automatische Ausfüllen markiert (1.3.5).
- ✓Zeitlimits, etwa beim Bezahlen, lassen sich verlängern oder abschalten (2.2.1).
- ✓Buttons haben einen Namen, den Screenreader vorlesen – auch Icon-Buttons wie Warenkorb oder Suche (4.1.2).
Was zusätzlich dazugehört
Für Onlineshops verlangt das BFSG neben der Technik eine Erklärung, wie Ihr Angebot die Anforderungen erfüllt, mit Angabe der zuständigen Behörde (Anlage 3). Und die Anforderungen müssen dauerhaft erfüllt sein – nicht nur am Tag der Prüfung. Details stehen im Ratgeber BFSG-Pflichten.
Wie Sie die Punkte dieser Liste selbst überprüfen, zeigt der Ratgeber Website auf Barrierefreiheit testen.
Was die Umsetzung kostet
Der Aufwand hängt vor allem vom Theme ab: Ein gepflegtes Standard-Theme ist schneller angepasst als eine Eigenentwicklung mit vielen Erweiterungen.
| Umfang | Aufwand | Bei 120 € pro Stunde |
|---|---|---|
| Prüfung von 5 bis 7 Seitenvorlagen | 8–16 Std. | 960–1.920 € |
| Behebung Unternehmenswebsite | 15–40 Std. | 1.800–4.800 € |
| Behebung Onlineshop mit Checkout | 30–80 Std. | 3.600–9.600 € |
| Erklärung zur Barrierefreiheit (Entwurf) | 2–4 Std. | 240–480 € |
Bei uns laufen Prüfung und Behebung über Token-Pakete – Sie kennen den Preis, bevor wir anfangen. Der erste Barrierefreiheits-Check ist kostenlos.