Barrierefreie Webseite erstellen
Wie gestalte ich eine barrierefreie Webseite und warum ist das wichtig?
Dirk
Digital Marketing & Projektmanager
Inhalt
Barrierefreie Webseiten gestalten – So setzen Sie das neue Gesetz erfolgreich um
Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Für viele Unternehmen bedeutet das: Die eigene Website muss barrierefrei zugänglich sein – und das ist nicht nur gesetzlich relevant, sondern auch unternehmerisch sinnvoll.
Kurz erklärt: Das BFSG setzt die Anforderungen des European Accessibility Act (EAA) in deutsches Recht um. Es verpflichtet viele Unternehmen zur digitalen Barrierefreiheit – insbesondere dann, wenn sie digitale Produkte oder Dienstleistungen anbieten.
Das Gesetz gilt für:
- Betreiber von Online-Shops
- Anbieter digitaler Dienstleistungen (z. B. Banken, Reiseportale, Softwareanbieter)
- E-Book-Verlage, Ticketdienste, Selbstbedienungsterminals
Ausgenommen: Kleinstunternehmen mit weniger als 10 Mitarbeitenden und weniger als 2 Mio. € Jahresumsatz.
Du willst mehr zum BFSG erfahren? Dann schau Dir unseren Artikel → Das Barrierefreiheitsstärkungsgesetzt erklärt an.
Warum ist eine barrierefreie Webseite wichtig?
Barrierefreiheit bedeutet, dass Menschen mit Behinderungen eine Website ohne Einschränkungen nutzen können – egal ob sie eine Sehbehinderung, motorische Einschränkungen, kognitive Herausforderungen oder Hörprobleme haben.
Eine barrierefreie Website ist klar strukturiert, leicht navigierbar, mit der Tastatur bedienbar und visuell sowie technisch gut zugänglich.
Für Unternehmen bedeutet das nicht nur gesetzliche Pflicht, sondern auch:
Erhöhte Reichweite: Rund 13 Mio. Menschen in Deutschland leben mit einer Beeinträchtigung – viele davon sind online aktiv.
Suchmaschinenfreundlichkeit: Barrierefreie Seiten sind meist auch technisch sauber aufgebaut – das freut Suchmaschinen wie Google oder Bing.
Bessere Usability für alle: Barrierefreiheit heißt auch: verständliche Sprache, klare Strukturen, intuitive Navigation.
Positives Image: Wer inklusiv denkt, stärkt seine Marke – gerade im B2B-Bereich.
Wann gilt eine Website als barrierefrei?
Als Grundlage für eine barrierefreihe Website kann man die Web Content Accessibility Guidelines (WCAG) zu rate ziehen. Die WCAG basiert auf vier grundlegenden Prinzipien, die mit dem Akronym POUR zusammengefasst werden und definiert drei Stufen der Barrierefreiheit, die beschreiben, wie umfassend die Anforderungen erfüllt werden.
Die vier grundlegenden Prinzipien POUR
Bedeutung: Inhalte müssen von allen Nutzern wahrgenommen werden können – unabhängig von Sinnesfähigkeiten
Umsetzung in der Praxis:
- Alternativtexte für Bilder
- Untertitel für Videos
- Ausreichender Farbkontrast
Bedeutung:Inhalte und Navigation müssen per Tastatur und anderen Eingabegeräten nutzbar sein
Umsetzung in der Praxis:
- Alternativtexte für Bilder
- Fokusanzeige für Tastaturnavigation
- Keine Inhalte, die automatisch starten und nicht pausierbar sind
Bedeutung: Informationen und Bedienung müssen leicht verständlich sein
Umsetzung in der Praxis:
- Klare Sprache
- Einheitliche Navigation
- Fehlermeldungen und Hilfestellungen
Bedeutung: Inhalte müssen mit unterschiedlichsten Endgeräten und Technologien kompatibel sein
Umsetzung in der Praxis:
- Verwendung von semantischem HTML
- Unterstützung für Screenreader
- Valider Code nach W3C-Standards
Die WCAG-Konformitätsstufen: A, AA, AAA
| Stufe | Bedeutung | Beispielanforderungen | Pflicht? |
|---|---|---|---|
| A | Mindestanforderung | – Alternativtexte für Bilder – Navigierbarkeit mit Tastatur | Für viele Unternehmen nicht ausreichend |
| AA | Empfohlene Standardstufe (gesetzlich relevant, z. B. laut BFSG) | – Mindest-Kontrastverhältnis 4,5:1 – Fokusindikatoren – Responsives Layout | BFSG/EAA verlangen i. d. R. AA-Konformität |
| AAA | Höchste Stufe – schwer erreichbar | – Kontrastverhältnis 7:1 – Keine Ausnahme von Inhalt bei eingeschränkter Sicht – Gebärdensprach-Videos bei Multimedia | Nicht gesetzlich verpflichtend, aber ideal |
| Stufe | Bedeutung | Beispiele | Pflicht? |
|---|---|---|---|
| A | Grundanforderung an Barrierefreiheit |
- Alternativtexte für Bilder - Tastaturbedienung möglich |
Teilweise ausreichend |
| AA | Empfohlener Standard (gesetzlich relevant) |
- Kontrastverhältnis mind. 4.5:1 - Skalierbare Schriftgrößen - Sichtbare Fokuszustände |
Ja – z. B. laut BFSG |
| AAA | Maximale Barrierefreiheit (hoher Aufwand) |
- Kontrastverhältnis mind. 7:1 - Gebärdensprache-Übersetzung - Keine zeitabhängigen Inhalte |
Nicht gesetzlich verpflichtend |
Best Practices für barrierefreies Webdesign
Was geprüft werden sollte, wenn man Webseiten barrierefrei gestalten möchte:
Hier sind die wichtigsten Stellschrauben für mehr Barrierefreiheit auf Websites:
1. Navigation und Struktur
- Logische Menüführung
- Überschriften-Hierarchie (H1 > H2 > H3)
- Inhaltsverzeichnis bei langen Seiten
2. Kontraste und Farben
- Text-Farbe sollte sich deutlich vom Hintergrund abheben (Kontrastverhältnis min. 4,5:1)
- Keine Informationen ausschließlich über Farbe vermitteln (z. B. Fehleranzeigen)
3. Alternativtexte
- Jedes Bild braucht einen „Alt-Text“, der erklärt, was zu sehen ist
- Wichtig für Screenreader und Suchmaschinen
4. Tastaturbedienung
- Alle Funktionen sollten ohne Maus erreichbar sein (Tab-Navigation, Enter für Buttons)
- Fokus-Anzeige sichtbar machen
5. Lesbarkeit & Sprache
- Klare, kurze Sätze
- Fachbegriffe erklären oder vermeiden
- Leichte Sprache einsetzen, wo sinnvoll
6. Semantisches HTML
- Richtig eingesetzte HTML-Tags (z. B.“< nav>“,“< main>“,“< article>“, „< button>“) verbessern die Orientierung für assistive Technologien
Tools & Plugins: So prüfst und verbesserst Du Deine Website
Eine Kurzauswahl von Tools und Plugins mit denen du selbstständig deine Seite auf Barrierefreiheit prüfen kannst und dir empfehlen für mögliche Verbesserungen einholen kannst:
WAVE Accessibility Tool
Zeigt direkt im Browser an, welche Elemente auf einer Seite nicht barrierefrei sind.
axe DevTools
Ein Entwickler-Tool, das tiefgehende Analysen bietet – perfekt für technische Teams.
Accessibility Checker für WordPress
Einfaches Plugin für Seiten, die mit WordPress (und besonders mit Elementor) gebaut sind.
WCAG Guidelines (Web Content Accessibility Guidelines)
Der internationale Standard für Barrierefreiheit – empfiehlt sich als Basis zur Orientierung.
Eine vollständige Liste findest du HIER
Fazit: Jetzt starten lohnt sich
Häufig gestellte Fragen
Müssen alle Unternehmen ihre Website barrierefrei machen?
Nicht alle – aber viele. Wenn Deine Website Teil eines digitalen Dienstleistungsangebots ist oder Du Produkte online vertreibst, gelten die neuen Vorschriften ab Juni 2025.
Mehr kannst Du HIER erfahren
Was passiert, wenn wir keine Maßnahmen umsetzen?
Es drohen Abmahnungen, Bußgelder und Reputationsverlust – besonders wenn Wettbewerber das Thema offensiv nutzen.
Mehr kannst Du HIER erfahren
Ist Barrierefreiheit sehr teuer?
Nein. Viele Maßnahmen lassen sich mit geringem Aufwand realisieren – gerade bei bestehenden CMS-Systemen wie WordPress mit passenden Plugins.
Beitrag teilen
Mit dem richtigen Dienstleister zum Erfolg
Sie möchten Ihre Website barrierefrei gestalten – wissen aber nicht, wo Sie anfangen sollen? Wir unterstützen Sie bei der Umsetzung der Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG). Ob Analyse, Beratung oder technische Umsetzung: Wir helfen Ihnen Schritt für Schritt zu einer digitalen Umgebung, die für alle zugänglich ist.
Ähnliche Inhalte
Styleguides im Webdesign
Barrierefreie Webseite erstellen
Das Barrierefreiheitsstärkungsgesetz
Der Mehrwert moderner Visitenkarten
Know-How
Der Mehrwert moderner Visitenkarten
Das Barrierefreiheitsstärkungsgesetz
Barrierefreie Webseite erstellen
Styleguides im Webdesign
Unsere Leistungen
Digitale Geschäftsprozesse
IT-Sicherheit
Datenstrategie
