Dieser Leitfaden beantwortet das Wie. Warum Barrierefreiheit für Kieler Unternehmen zählt und wer vom BFSG betroffen ist, lesen Sie im 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 auch der Maßstab für die deutsche Umsetzung. Zielniveau ist üblicherweise die Konformitätsstufe AA.
Wahrnehmbar: Inhalte erreichen mehr als einen Sinn: Textalternativen für Bilder, Untertitel für Videos, ausreichende Kontraste.
Bedienbar: Alles funktioniert ohne Maus, mit sichtbarem Tastaturfokus, genug 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 Screenreader und künftige Techniken zuverlässig verstehen.
Technische Umsetzung: das Fundament
Semantisches HTML
Der größte Teil der Barrierefreiheit entsteht, wenn man HTML so nutzt, wie es gemeint ist: eine 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 und mit Kopfzellen.
ARIA-Attribute helfen in Fällen, die HTML nicht abdeckt. Sie ersetzen kein korrektes Markup. Die erste Regel von ARIA lautet: Kein ARIA, wenn ein natives Element dasselbe leistet.
Tastaturbedienung und Fokus
Gehen Sie Ihre Seite einmal komplett mit der Tabulatortaste durch. Erreichen Sie jedes Bedienelement? Ist immer sichtbar, wo Sie stehen? Folgt die Reihenfolge der visuellen Anordnung? Schließt Escape ein geöffnetes Menü oder Dialogfenster, und landet der Fokus danach an einer sinnvollen Stelle?
Ein Link „Zum Inhalt springen" am Seitenanfang erspart Tastaturnutzern, sich bei jedem Aufruf durch die ganze Navigation zu arbeiten. Wenige Zeilen Aufwand, große Wirkung.
Kontrast und Schriftgrößen
Stufe AA legt feste Mindestwerte fest. Bei hellgrauen Rahmen und Platzhaltern fallen Seiten hier regelmäßig durch.
| Element | Mindestkontrast (AA) |
|---|---|
| Normaler Text | 4,5:1 |
| Große Schrift (ab etwa 24 px, fett ab etwa 19 px) | 3:1 |
| Bedienelemente und Fokusrahmen gegen ihre Umgebung | 3:1 |
Bilder, Videos und Formulare
Alternativtexte
Ein Alternativtext beschreibt die Funktion des Bildes im Zusammenhang, nicht jedes Detail. Rein dekorative Bilder bekommen einen leeren Alternativtext, damit Screenreader sie überspringen. Vermeiden Sie Text in Bildern: Er lässt sich nicht vergrößern, nicht vorlesen und nicht durchsuchen.
Videos
Videos brauchen Untertitel. Werden Informationen nur im Bild vermittelt, kommt eine Audiodeskription oder ein Transkript dazu. Automatische Wiedergabe mit Ton ist ohnehin keine gute Idee.
Formulare
Jedes Feld braucht eine dauerhaft sichtbare, programmatisch verknüpfte Beschriftung. Ein Platzhalter genügt nicht, er verschwindet beim Tippen. Kennzeichnen Sie Pflichtfelder. Fehlermeldungen benennen, was falsch ist und wie es richtig geht, und sind für Screenreader hörbar.
Für Kieler Praxen und Gastgeber ist das der wichtigste Punkt: An Termin- und Buchungsformularen entscheidet sich, ob ein Vorgang abgeschlossen wird. Genau sie stehen im Fokus des BFSG.
Inhaltliche Gestaltung
Barrierefreiheit endet nicht bei der Technik. Verständlichkeit ist ein eigenes Kriterium und hilft den meisten Menschen.
Sprache: kurze Sätze, klare Struktur, Fachbegriffe erklärt oder vermieden. Für Praxen und Behörden lohnt zusätzlich eine Zusammenfassung in einfacher Sprache.
Linktexte: „Preise ansehen" statt „hier klicken". Screenreader lesen Linklisten oft ohne Zusammenhang vor.
Seitentitel: Jeder Titel benennt die Seite eindeutig. Er ist das Erste, was vorgelesen wird.
Abkürzungen und Zahlen: Abkürzungen beim ersten Auftreten ausschreiben, Zahlen und Einheiten nicht in Grafiken verstecken.
Prüfen: Werkzeuge und Grenzen
Automatische Prüfwerkzeuge finden nur einen Teil der Barrieren. Sie erkennen fehlende Alternativtexte und Kontrastfehler, aber nicht, ob ein Alternativtext sinnvoll ist. Ein vollständiges Bild entsteht erst mit manueller Prüfung.
Automatisch: Lighthouse in den Chrome-Entwicklerwerkzeugen, axe DevTools, WAVE. Eine gute erste Bestandsaufnahme in wenigen Minuten.
Kontrast: der Contrast Checker von WebAIM 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: Am aussagekräftigsten bleibt die Beobachtung echter Nutzer mit Einschränkungen. Regionale Verbände sind dafür gute Ansprechpartner.
Vorteile und Herausforderungen für Kieler Unternehmen
Erweiterte Zielgruppe
Barrierefreiheit erreicht auch Menschen, die nur vorübergehend eingeschränkt sind: mit gebrochenem Arm, im lauten Hafenumfeld oder mit Sonne auf dem Display. In einer Stadt, in der viel draußen und mobil gesucht wird, ist das echte Reichweite.
Bessere Auffindbarkeit
Saubere Struktur, sprechende Linktexte und Alternativtexte helfen Screenreadern und Suchmaschinen gleichermaßen. Ein Teil der Arbeit ist damit zugleich SEO. Der Aufwand zahlt sich doppelt aus.
Organisatorische Hürden
Der Aufwand steckt 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 in wenigen Monaten. Wir legen deshalb bei der Übergabe fest, wer was prüft, und schulen das Team kurz ein.
Checkliste für den schnellen Selbsttest
Bedienung
Inhalte
Fazit
Barrierefreies Webdesign ist Handwerk, keine Magie. Der größte Teil entsteht aus korrektem HTML, ausreichenden Kontrasten, sauberen Formularen und vollständiger Tastaturbedienung. Wer diese Grundlagen von Anfang an mitnimmt, erfüllt nicht nur das 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 Maßnahmenliste, sortiert nach Aufwand und Wirkung. Dazu eine klare Aussage, was sich nachziehen lässt und wo ein Neuaufbau günstiger ist. Was ein Neubau kostet, zeigt unsere Seite Webdesign Preise Kiel.
Glossar
WCAG: Web Content Accessibility Guidelines, der internationale 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.
