Dieser Leitfaden beantwortet das Wie. Warum Barrierefreiheit für Kieler Unternehmen zählt und wer vom BFSG betroffen ist, lesen Sie in unserem Beitrag Warum barrierefreies Webdesign in Kiel wichtig ist. Hier geht es um Kriterien, Technik und Prüfung.
Grundlagen: die vier Prinzipien der WCAG
Die Web Content Accessibility Guidelines gliedern Barrierefreiheit in vier Prinzipien. Sie sind der Maßstab, an dem auch die deutsche Umsetzung gemessen wird – Zielniveau ist üblicherweise die Konformitätsstufe AA.
- Wahrnehmbar: Inhalte müssen über mehr als einen Sinneskanal zugänglich sein – Textalternativen für Bilder, Untertitel für Videos, ausreichende Kontraste.
- Bedienbar: Alles muss ohne Maus erreichbar sein, mit sichtbarem Tastaturfokus, ausreichend Zeit und ohne Inhalte, die Anfälle auslösen können.
- Verständlich: Lesbare Sprache, vorhersehbares Verhalten, hilfreiche Fehlermeldungen statt bloßer roter Rahmen.
- Robust: Valides, semantisch korrektes Markup, das von Screenreadern und künftigen Techniken zuverlässig interpretiert wird.
Technische Umsetzung: was konkret zu tun ist
Semantisches HTML als Fundament
Der größte Teil der Barrierefreiheit entsteht dadurch, dass man HTML benutzt, wie es gemeint ist: eine einzige H1 pro Seite, darunter eine lückenlose Überschriftenhierarchie, echte Buttons für Aktionen und echte Links für Navigation, Listen für Aufzählungen, Tabellen nur für Daten – mit Kopfzellen.
ARIA-Attribute sind ein Werkzeug für Fälle, die HTML nicht abdeckt, kein Ersatz für korrektes Markup. Die erste Regel von ARIA lautet: benutze kein ARIA, wenn ein natives Element dasselbe leistet.
Tastaturbedienung und Fokus
Prüfen Sie Ihre Seite einmal komplett mit der Tabulatortaste. Erreichen Sie jedes Bedienelement? Ist immer sichtbar, wo Sie stehen? Folgt die Reihenfolge der visuellen Anordnung? Lässt sich ein geöffnetes Menü oder Dialogfenster mit Escape schließen, und landet der Fokus danach an einer sinnvollen Stelle?
Ein „Zum Inhalt springen"-Link am Seitenanfang erspart Tastaturnutzern, sich bei jedem Seitenaufruf durch die gesamte Navigation zu arbeiten. Wenige Zeilen Aufwand, große Wirkung.
Kontrast und Schriftgrößen
Für normalen Text verlangt Stufe AA ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift ab etwa 24 Pixeln 3:1. Auch Bedienelemente und Fokusrahmen brauchen mindestens 3:1 gegen ihre Umgebung – ein Punkt, der bei hellgrauen Rahmen regelmäßig durchfällt.
Wichtig: Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalt verloren geht oder das Layout bricht. Feste Pixelhöhen für Textcontainer sind hier die häufigste Fehlerquelle.
Bilder, Videos und Alternativtexte
Ein Alternativtext beschreibt die Funktion des Bildes im Kontext, nicht sein Aussehen im Detail. Rein dekorative Bilder erhalten einen leeren Alternativtext, damit Screenreader sie überspringen. Text in Bildern ist zu vermeiden – er lässt sich nicht vergrößern, nicht vorlesen und nicht durchsuchen.
Videos brauchen Untertitel; bei rein visuell vermittelten Informationen zusätzlich eine Audiodeskription oder ein Transkript. Automatische Wiedergabe mit Ton ist ohnehin keine gute Idee.
Formulare
Jedes Feld braucht eine dauerhaft sichtbare, programmatisch verknüpfte Beschriftung – ein Platzhalter im Feld genügt nicht, weil er beim Tippen verschwindet. Pflichtfelder sind zu kennzeichnen, Fehlermeldungen müssen benennen, was falsch ist und wie es richtig geht, und beim Absenden für Screenreader hörbar werden.
Für Kieler Praxen und Gastgeber ist das der wichtigste Abschnitt überhaupt: Termin- und Buchungsformulare sind die Stellen, an denen Barrierefreiheit über einen abgeschlossenen Vorgang entscheidet – und genau sie stehen im Fokus des BFSG.
Inhaltliche Gestaltung
Barrierefreiheit endet nicht in der Technik. Verständlichkeit ist ein eigenes Kriterium – und dasjenige, das am meisten Menschen hilft.
- Kurze Sätze, klare Struktur, Fachbegriffe erklärt oder vermieden. Für Praxen und Behörden lohnt zusätzlich eine Zusammenfassung in einfacher Sprache.
- Sprechende Linktexte: „Preise ansehen" statt „hier klicken". Screenreader lesen Linklisten oft aus dem Zusammenhang gelöst vor.
- Aussagekräftige Seitentitel, die die Seite eindeutig benennen – sie sind das Erste, was vorgelesen wird.
- Abkürzungen beim ersten Auftreten ausschreiben; Zahlen und Einheiten nicht in Grafiken verstecken.
Prüfen: Werkzeuge und Grenzen
Automatische Prüfwerkzeuge finden nach gängiger Einschätzung nur einen Teil der tatsächlichen Barrieren – sie erkennen fehlende Alternativtexte und Kontrastfehler, nicht aber, ob ein Alternativtext sinnvoll ist. Ein vollständiges Bild entsteht erst mit manueller Prüfung.
- Automatisch: Lighthouse in den Chrome-Entwicklerwerkzeugen, axe DevTools, WAVE – gute erste Bestandsaufnahme in wenigen Minuten.
- Kontrast: der Contrast Checker der WebAIM-Initiative oder die Kontrastanzeige im Browser.
- Manuell: die Seite komplett mit der Tastatur bedienen, Text auf 200 Prozent zoomen, Bilder abschalten, mit einem Screenreader durchgehen (VoiceOver auf dem Mac, NVDA unter Windows).
- Mit Betroffenen: Der aussagekräftigste Test bleibt die Beobachtung echter Nutzer mit Einschränkungen. Wo möglich, organisieren wir das über regionale Verbände.
Checkliste für den schnellen Selbsttest
- Lässt sich jede Funktion – inklusive Menü, Formular und Cookie-Banner – ausschließlich mit der Tastatur bedienen?
- Ist der Tastaturfokus jederzeit deutlich sichtbar?
- Erreicht der Text mindestens 4,5:1 Kontrast, auch in Buttons und auf Bildern?
- Hat jedes inhaltstragende Bild einen sinnvollen Alternativtext, jedes dekorative einen leeren?
- Gibt es genau eine H1, und ist die Überschriftenhierarchie lückenlos?
- Haben alle Formularfelder sichtbare, verknüpfte Beschriftungen und verständliche Fehlermeldungen?
- Bleibt das Layout bei 200 Prozent Textzoom benutzbar?
- Sind alle Videos untertitelt und startet nichts automatisch mit Ton?
- Funktioniert die Seite auch ohne JavaScript in ihren Grundfunktionen?
Vorteile und Herausforderungen für Kieler Unternehmen
Erweiterte Zielgruppe
Barrierefreiheit erschließt nicht nur Menschen mit dauerhaften Einschränkungen, sondern auch die große Gruppe der situativ Eingeschränkten – Besucher mit gebrochenem Arm, im laut lärmenden Hafenumfeld oder bei Sonne auf dem Display. In einer Stadt, in der viel draußen und mobil gesucht wird, ist das ein realer Reichweitengewinn.
Bessere Auffindbarkeit
Saubere Struktur, sprechende Linktexte und Alternativtexte helfen Screenreadern und Suchmaschinen gleichermaßen. Ein Teil der Barrierefreiheitsarbeit ist damit zugleich SEO-Arbeit – der Aufwand zahlt zweimal.
Technische und organisatorische Hürden
Der Aufwand entsteht seltener in der Technik als in der Organisation: Wer schreibt künftig die Alternativtexte? Wer prüft neue Inhalte? Ohne klare Zuständigkeit verfällt eine barrierefreie Seite innerhalb von Monaten. Wir legen deshalb bei der Übergabe fest, wer was prüft – und schulen das Team kurz darauf ein.
Fazit
Barrierefreies Webdesign ist Handwerk, nicht Magie. Der größte Teil entsteht aus korrektem HTML, ausreichenden Kontrasten, sauberen Formularen und der Möglichkeit, alles mit der Tastatur zu bedienen. Wer diese Grundlagen von Anfang an mitnimmt, erfüllt nicht nur die Anforderungen des BFSG, sondern baut eine Seite, die für alle besser funktioniert.
Sie möchten wissen, wo Ihre Webseite steht? Wir prüfen sie nach WCAG 2.2 auf Stufe AA und liefern eine nach Aufwand und Wirkung sortierte Maßnahmenliste – mit klarer Aussage dazu, was sich nachziehen lässt und wo ein Neuaufbau der günstigere Weg ist.
Glossar
- WCAG: Web Content Accessibility Guidelines – internationaler Standard für barrierefreie Webinhalte. Referenz für die deutsche Umsetzung ist die Stufe AA.
- BFSG: Barrierefreiheitsstärkungsgesetz, gültig seit dem 28. Juni 2025. Verpflichtet viele private Unternehmen zu barrierefreien digitalen Angeboten.
- Benutzererfahrung (UX): Der Gesamteindruck, den ein Besucher von einer Webseite gewinnt – wie leicht sie zu bedienen ist, wie schnell sie lädt und ob sie das liefert, was erwartet wurde.
- Responsive Design: Gestaltungsansatz, bei dem sich das Layout automatisch an die Bildschirmgröße anpasst – vom Desktop über das Tablet bis zum Smartphone.