„Das müssen wir irgendwann komplett neu bauen“ – ein Satz, den wir in Projekten viel zu oft hören, wenn es um digitale Barrierefreiheit geht. WCAG-Konformität, Agentur-Aufträge, Budget-Diskussionen. Die Realität nach über 15 Jahren Spezialisierung auf Softwarequalität, Open Source und Remote Consulting sieht anders aus: 80 Prozent der Barrieren entstehen durch kleine, vermeidbare Dinge.
Digitale Barrierefreiheit ist kein Mammutprojekt. Sie ist gutes digitales Handwerk. Und sie beginnt nicht mit Perfektion, sondern mit dem nächsten kleinen Schritt. In diesem Guide zeigen wir euch, wie ihr sofort loslegen könnt – pragmatisch, wirksam und ohne euer komplettes Projekt umzukrempeln.
Warum Barrierefreiheit jetzt auf eure Agenda gehört
Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 für viele digitale Produkte und Dienstleistungen gilt, wird Barrierefreiheit vom Nice-to-have zur Pflicht. Aber auch unabhängig von Gesetzen: Barrierefreie Websites sind bessere Websites. Für alle.
Was euch erwartet, wenn ihr Barrierefreiheit ernst nehmt:
- Bessere SEO: Saubere Struktur und beschreibende Texte lieben Suchmaschinen
- Größere Zielgruppe: 15 bis 20 Prozent der Bevölkerung leben mit Einschränkungen
- Zukunftssichere Codebasis: Semantisches HTML altert besser als Div-Suppen
- Rechtssicherheit: BFSG-Compliance ohne Last-Minute-Panik
1. Was ist digitale Barrierefreiheit überhaupt und warum ist sie wichtig?
Digitale Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente von allen Menschen genutzt werden können – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Das betrifft nicht nur Menschen mit dauerhaften Behinderungen.
Denkt an temporäre Einschränkungen: gebrochener Arm, Augen-OP, laute Umgebung ohne Kopfhörer. Oder situative Barrieren: Sonnenlicht auf dem Display, langsames Internet, kleine Smartphone-Bildschirme. Barrierefreiheit macht eure Anwendung robuster für alle Nutzungsszenarien.
Der internationale Standard WCAG 2.1 definiert vier Prinzipien: Wahrnehmbar, bedienbar, verständlich und robust. In Deutschland konkretisiert die BITV 2.0 diese Anforderungen für öffentliche Stellen. Mit dem BFSG erweitert sich der Kreis nun auf private Unternehmen im E-Commerce und bei digitalen Dienstleistungen.
2. Wie schreibe ich gute Alternativtexte für Bilder?
„Bild“ oder „image_001.jpg“ als Alt-Text? Das hilft niemandem. Ein guter Alternativtext beschreibt, was auf dem Bild zu sehen ist und welche Funktion es im Kontext hat.
Praxis-Tipps für Alt-Texte:
- Beschreibt den Inhalt, nicht das Format: „Team bespricht Wireframes am Whiteboard“ statt „Foto von Meeting“
- Haltet euch kurz: Ein bis zwei Sätze reichen meist
- Vermeidet „Bild von…“ – Screenreader kündigen bereits an, dass es ein Bild ist
- Bei dekorativen Bildern: Leeres alt=““ verwenden, damit Screenreader sie überspringen
- Bei verlinkten Bildern: Beschreibt das Linkziel, nicht das Bild
Ein einziger Satz. Zehn Sekunden Aufwand. Riesiger Effekt für Menschen, die Screenreader nutzen. Und diese kleine Änderung könnt ihr bei jedem neuen Content-Piece sofort umsetzen.
3. Welche Überschriften-Struktur ist richtig für barrierefreie Websites?
Eine klare Überschriften-Hierarchie (H1, H2, H3 und so weiter) ist das Inhaltsverzeichnis eurer Seite. Screenreader-Nutzer navigieren häufig von Überschrift zu Überschrift – springt die Struktur von H1 direkt zu H4, fehlt der Kontext.
Die goldenen Regeln:
- Genau eine H1 pro Seite (der Seitentitel)
- Keine Ebenen überspringen: H1 → H2 → H3, niemals H1 → H3
- Überschriften nach Hierarchie wählen, nicht nach Größe – CSS regelt das Design
- Jeder Inhaltsbereich verdient eine aussagekräftige Überschrift
Was viele nicht wissen: Saubere Überschriften-Struktur ist gleichzeitig ein SEO-Faktor. Suchmaschinen nutzen sie, um die Inhaltsstruktur zu verstehen. Win-win für Barrierefreiheit und Auffindbarkeit.
4. Welche Farbkontraste muss meine Website erfüllen?
Wenn ihr euren Text bei Sonnenlicht auf dem Smartphone noch lesen könnt, seid ihr auf einem guten Weg. Die WCAG definieren konkrete Mindestwerte:
- Normaler Text: Kontrastverhältnis mindestens 4,5:1
- Großer Text (ab 18pt oder 14pt fett): Mindestens 3:1
- UI-Komponenten und Grafiken: Mindestens 3:1
Praktische Umsetzung:
- Nutzt Contrast-Checker wie WebAIM oder die Browser-DevTools
- Testet nicht nur Fließtext, sondern auch Buttons, Links und Formularelemente
- Vermeidet Text auf Bildhintergründen ohne Overlay
- Denkt an den Dark Mode – hier gelten dieselben Regeln
Tools wie Lighthouse in Chrome prüfen Kontraste automatisch. Ein Klick, sofortige Rückmeldung. Keine Ausreden mehr für unleserliche Farbkombinationen.
5. Warum sind aussagekräftige Links so wichtig?
„Hier klicken“, „Mehr“, „Link“ – für Screenreader-Nutzer, die sich eine Liste aller Links vorlesen lassen, ist das ein Albtraum. Fünfmal „Hier klicken“ hintereinander sagt nichts über das Ziel.
Bessere Links schreiben:
- „Mehr zur Anmeldung“ statt „Hier klicken“
- „PDF-Leitfaden herunterladen (2 MB)“ statt „Download“
- „Kontakt aufnehmen“ statt „Mehr“
Der Linktext muss auch ohne umgebenden Kontext verständlich sein. Das hilft nicht nur Screenreader-Nutzern, sondern auch allen, die schnell scannen. Kontext ist King – bei Barrierefreiheit und bei UX.
6. Wie mache ich Formulare barrierefrei?
Formulare ohne echte Labels sind Ratespiele. Placeholder-Texte verschwinden beim Tippen, und Screenreader können ohne programmatische Verknüpfung nicht zuordnen, welches Label zu welchem Eingabefeld gehört.
Checkliste für barrierefreie Formulare:
- Jedes Eingabefeld braucht ein
<label>mitfor-Attribut - Pflichtfelder klar kennzeichnen (nicht nur per Farbe)
- Fehlermeldungen neben dem betroffenen Feld anzeigen
- Fokus-Reihenfolge muss logisch sein
- Ausreichend große Klickflächen für Touch-Bedienung
Keine neuen Tools nötig. Nur sauberes HTML, wie es seit 1998 im Standard steht. Der Browser erledigt den Rest.
7. Was bedeutet die WCAG für meine Website konkret?
WCAG steht für Web Content Accessibility Guidelines – der internationale Standard für barrierefreie Webinhalte. Die aktuelle Version 2.1 definiert 78 Erfolgskriterien auf drei Konformitätsstufen:
- Stufe A: Mindestanforderungen (muss erfüllt sein)
- Stufe AA: Standard für die meisten Websites (BFSG-Anforderung)
- Stufe AAA: Höchste Stufe (nicht immer erreichbar)
Für die meisten Projekte ist Stufe AA das Ziel. Das bedeutet unter anderem: Textkontraste von 4,5:1, Tastaturnavigation, Untertitel für Videos, flexible Textgrößen und keine rein zeitgesteuerten Inhalte ohne Alternativen.
Die gute Nachricht: Viele AA-Kriterien erfüllt ihr bereits, wenn ihr semantisches HTML schreibt und die Grundlagen beachtet.
8. Welche Tools helfen beim Testen der Barrierefreiheit?
Automatisierte Tools finden etwa 30 bis 40 Prozent der Barrieren – den Rest nur manuelle Tests. Trotzdem sind automatisierte Checks ein wichtiger erster Schritt.
Unsere Empfehlungen:
- Lighthouse (in Chrome integriert): Schneller Accessibility-Score
- axe DevTools (Browser-Extension): Detaillierte Fehlerbeschreibungen
- WAVE (WebAIM): Visuelle Darstellung von Problemen
- Colour Contrast Analyser: Lokales Tool für Farbkontraste
- Screenreader (NVDA, VoiceOver): Echter Praxistest
Der wichtigste Test: Navigiert eure Seite nur mit der Tastatur durch. Tab, Enter, Pfeiltasten. Wenn ihr irgendwo hängenbleibt oder nicht wisst, wo der Fokus ist – habt ihr ein Problem gefunden.
9. Muss ich wegen dem BFSG meine Website umbauen?
Das Barrierefreiheitsstärkungsgesetz gilt ab dem 28. Juni 2025 für Produkte und Dienstleistungen im elektronischen Geschäftsverkehr. Betroffen sind unter anderem E-Commerce-Shops, Bankdienstleistungen, E-Books und Messenger-Dienste.
Was das für euch bedeutet:
- Prüft, ob eure digitalen Angebote unter das BFSG fallen
- Führt ein Accessibility-Audit durch (intern oder extern)
- Priorisiert Fixes nach Schweregrad und Häufigkeit der Nutzung
- Plant Barrierefreiheit bei neuen Features von Anfang an ein
Ein kompletter Neubau ist selten nötig. Meistens lassen sich bestehende Seiten schrittweise verbessern. Bei Never Code Alone haben wir in über 15 Jahren Consulting gelernt: Der pragmatische Weg funktioniert besser als der perfektionistische.
10. Wie fange ich am besten mit digitaler Barrierefreiheit an?
Nicht mit einem Mammutprojekt. Sondern mit dem nächsten kleinen Schritt. Das kann sein:
- Bei eurem nächsten Blog-Post: Vernünftige Alt-Texte schreiben
- Bei eurem nächsten Formular: Echte Labels verwenden
- Bei eurer nächsten Code-Review: Überschriften-Struktur prüfen
- Bei eurem nächsten Design: Farbkontraste checken
Barrierefreiheit ist kein Endprojekt mit Abnahme und fertig. Sie ist eine Haltung, die ihr in eurem Alltag verankert. Jede kleine Verbesserung zählt. Jeder barrierefreie Baustein macht eure Website besser – für alle.
Eure nächsten Schritte
Digitale Barrierefreiheit klingt nach Großprojekt, ist aber oft schnell, einfach und sofort umsetzbar. Ihr braucht keine neuen Tools, nur ein bisschen Bewusstsein im Alltag.
Fangt heute bei eurer nächsten Seite, eurem nächsten Post oder eurem nächsten Formular an. Und wenn ihr Unterstützung braucht – sei es für ein Accessibility-Audit, Schulungen für euer Team oder die strategische Planung eurer BFSG-Compliance – meldet euch bei uns.
Mit über 15 Jahren Erfahrung in Softwarequalität, Open Source und Remote Consulting unterstützen wir euch dabei, Barrierefreiheit pragmatisch und nachhaltig in eure Projekte zu integrieren. Schreibt einfach eine E-Mail an roland@nevercodealone.de – wir freuen uns auf eure Anfrage.
Barrierefreiheit ist kein Extra. Sie ist gutes digitales Handwerk.
