Barrierefreiheit einer Website umfasst die Design- und Programmierpraktiken, die Ihre Seite für Besucherinnen mit Seh-, Hör-, motorischer oder kognitiver Einschränkung nutzbar machen; WCAG (Web Content Accessibility Guidelines) ist der international anerkannte Standard für diese Praktiken. Barrierefreiheit ist nicht nur eine ethische Verantwortung — es geht darum, einen übersehenen Teil Ihrer potenziellen Kundschaft zu erreichen, und in manchen Branchen ist sie auch gesetzlich vorgeschrieben. Dieser Leitfaden erklärt, was WCAG bedeutet, warum es wichtig ist und wie Sie es praktisch auf Ihrer Website umsetzen.
Was ist WCAG und was umfasst es?
WCAG ist ein vom World Wide Web Consortium (W3C) entwickelter, weltweit anerkannter Barrierefreiheits-Standard; er ist um vier Grundprinzipien herum aufgebaut: Wahrnehmbarkeit (Inhalte müssen sinnlich erfassbar sein), Bedienbarkeit (die Website muss per Tastatur oder anderen Eingabemethoden nutzbar sein), Verständlichkeit (Inhalt und Oberfläche müssen klar sein) und Robustheit (die Website muss mit unterschiedlichen Technologien, einschließlich Screenreadern, zuverlässig funktionieren). Der Standard definiert drei Konformitätsstufen — A, AA und AAA —, wobei AA meist das Ziel für Unternehmens- und Behördenwebsites ist.
WCAG wird verständlicher, sobald es vom technischen Fachbegriff zur alltäglichen Nutzererfahrung wird: Ein Alt-Text bei einem Bild ermöglicht es dem Screenreader einer sehbehinderten Besucherin, das Bild zu beschreiben; ausreichender Farbkontrast ermöglicht es jedem, der Ihre Seite bei direktem Sonnenlicht auf dem Handy ansieht, den Text zu lesen; Tastaturunterstützung ermöglicht es einer Besucherin, die keine Maus nutzen kann, ein Formular auf Ihrer Website auszufüllen.
Warum ist Barrierefreiheit nicht nur eine ethische Frage?
Barrierefreiheit hat eine direkte wirtschaftliche Wirkung, denn ein erheblicher Teil der Weltbevölkerung lebt mit irgendeiner Form von Einschränkung — das kann ein dauerhafter Sehverlust sein, ein vorübergehender Zustand (z. B. ein Arm, der nach einer Operation nicht nutzbar ist) oder eine situative Einschränkung (z. B. den Bildschirm bei Sonnenlicht nicht klar sehen zu können). Eine nicht barrierefreie Website verliert einen Teil dieser breiten Nutzergruppe schon im ersten Schritt; kann ein Formular nicht ausgefüllt oder ein Button nicht erkannt werden, geht die Besucherin stattdessen zur Konkurrenz.
Auch die rechtliche Dimension sollte nicht übersehen werden: In der EU deckt die Richtlinie zur Barrierefreiheit von Websites öffentliche Stellen ab, und immer mehr Länder weiten Barrierefreiheitsstandards auch auf private Websites aus; die Anforderungen variieren je nach Land, aber der Trend geht klar in Richtung umfassenderer Regelung. Deshalb ist es auch eine Vorbereitung auf mögliche künftige Vorschriften, Barrierefreiheit schon heute mitzudenken.
Was sind die häufigsten Barrierefreiheitsprobleme?
Die Barrierefreiheitsprobleme, die uns in der Praxis am häufigsten begegnen, sind:
- Fehlender Alt-Text: Wird Bildern kein beschreibender Text hinzugefügt, versteht eine Screenreader-Nutzerin das Bild überhaupt nicht.
- Unzureichender Farbkontrast: Kontrastarme Designs, etwa hellgrauer Text auf weißem Hintergrund, machen Text für sehbehinderte Nutzerinnen oder bei hellem Sonnenlicht unlesbar.
- Per Tastatur nicht navigierbare Menüs: Dropdown-Menüs, die sich nur mit der Maus öffnen lassen, schließen Tastaturnutzerinnen komplett von einem Teil der Website aus.
- Fehlende Formularbeschriftungen: Ist die Beschriftung (Label), die angibt, was ein Eingabefeld erwartet, auf Codeebene nicht korrekt verknüpft, wird es für Screenreader-Nutzerinnen unmöglich, das Formular auszufüllen.
- Automatisch abspielende Videos/Audios: Ohne Zustimmung automatisch startende Audioinhalte können für Nutzerinnen mit kognitiven oder auditiven Empfindlichkeiten störend sein und sogar zum Verlassen der Website führen.
Wie hängt Barrierefreiheit mit Geschwindigkeit und SEO zusammen?
Verbesserungen bei der Barrierefreiheit erhöhen meist auch die gesamte technische Qualität Ihrer Website; eine saubere, sinnvolle HTML-Struktur (korrekte Überschriftenhierarchie, semantische Tags) macht Ihre Website sowohl für Screenreader als auch für Suchmaschinen-Crawler "lesbarer". Deshalb sind Barrierefreiheit und SEO keine zwei unabhängigen Aufgaben, sondern zwei Ziele, die sich stark überschneiden — dieses Verhältnis behandeln wir auch in unserem Core-Web-Vitals-Leitfaden.
Der Alt-Text bei Bildern zum Beispiel sorgt sowohl für Barrierefreiheit für Screenreader als auch dafür, dass Google Sie in der Bildersuche zeigt. Ebenso erleichtert eine klare Überschriftenhierarchie (h1, h2, h3 in korrekter Reihenfolge) sowohl der Screenreader-Nutzerin die Navigation auf der Seite als auch Google das korrekte Verständnis der Seitenstruktur.
Was sind praktische erste Schritte zur Barrierefreiheit?
Von null auf vollständige WCAG-AA-Konformität zu kommen, kann ein großes Projekt sein, aber schon ein paar kostengünstige Schritte machen einen großen Unterschied:
- Allen Bildern sinnvollen Alt-Text hinzufügen (bei rein dekorativen Bildern reicht ein leerer Alt-Text).
- Mindestens ein Kontrastverhältnis von 4,5:1 zwischen Text und Hintergrund sicherstellen (leicht mit kostenlosen Kontrast-Prüftools testbar).
- Testen, ob alle interaktiven Elemente (Menü, Formular, Button) auch allein mit der Tastatur nutzbar sind — Maus beiseitelegen und versuchen, die Website mit der Tab-Taste zu durchlaufen.
- Die korrekten Labels auf Codeebene mit den Formularfeldern verknüpfen.
- Sicherstellen, dass Video und Audio nicht automatisch starten, sondern erst durch die Nutzerin ausgelöst werden.
Die meisten dieser Schritte lassen sich mit wenigen Tagen Entwicklungsarbeit auf einer bestehenden Website umsetzen; lassen Sie eine neue Website von Grund auf bauen, ist es deutlich günstiger, diese Anforderungen von Anfang an ins Projektbriefing aufzunehmen, als sie später nachzubessern. Wie mobile Kompatibilität mit Barrierefreiheit zusammenhängt, behandeln wir auch in unserem Leitfaden zu responsivem Webdesign.
Wie testet man Barrierefreiheit?
Barrierefreiheitstests sollten auf zwei Ebenen laufen: ein schneller Scan mit automatisierten Tools und eine tiefere Prüfung mit echten Nutzertests. Kostenlose Browser-Erweiterungen (z. B. WAVE, axe) können Ihre Website in Sekunden scannen und häufige Probleme wie fehlenden Alt-Text, geringen Kontrast und Beschriftungsprobleme auflisten — ein schneller, kostenloser erster Check.
Automatisierte Tools erfassen aber nur einen Teil der Probleme (meist etwa 30-40 %); ob der Tastaturnavigationsfluss tatsächlich sinnvoll ist oder wie ein Screenreader die Seite wirklich "hört", erfordert manuelle Tests. Wo möglich, deckt der Versuch, die Website mit einem echten Screenreader (z. B. dem kostenlosen NVDA) von Anfang bis Ende zu durchlaufen, Probleme auf, die automatisierte Tools übersehen.
Für welche Unternehmen sollte Barrierefreiheit besonders Priorität haben?
Barrierefreiheit ist für jedes Unternehmen wertvoll, hat aber in manchen Branchen deutlich höhere Priorität. Für Organisationen, die öffentliche Dienstleistungen erbringen oder der Allgemeinheit dienen (Kommunen, Bildungseinrichtungen, Gesundheitsdienstleister), ist Barrierefreiheit meist keine Wahl, sondern eine Anforderung — ihre Besucherschaft umfasst überdurchschnittlich viele Menschen mit Behinderungen. Ebenso ist Barrierefreiheit bei Angeboten, die stark von älteren Menschen genutzt werden (z. B. medizinische Terminbuchung, Rentenberatung), direkt gleichbedeutend mit Nutzbarkeit — Seh- und motorische Fähigkeiten verändern sich mit dem Alter.
Bei Online-Shops hat Barrierefreiheit besonderes Gewicht, weil ein nicht barrierefreier Checkout-Ablauf direkt entgangenen Umsatz bedeutet; kann eine Nutzerin ihren Warenkorb nicht abschließen, ist diese Transaktion schlicht verloren. Für eine kleine Broschürenwebsite ist die Priorität geringer, aber die Grundregeln (Kontrast, Alt-Text, Tastaturunterstützung) einzuhalten ist sowohl kostengünstig als auch immer lohnenswert.
Häufig gestellte Fragen
Wie stark erhöht Barrierefreiheit die Kosten?
Bei einem von Grund auf geplanten Projekt erhöhen Barrierefreiheitsanforderungen die Gesamtkosten meist um etwa 5-15 %; eine bestehende Website nachträglich anzupassen kann je nach Umfang und aktueller Codequalität deutlich variabler ausfallen — von wenigen hundert Euro bis zu mehreren zehntausend Euro bei einer großen Website.
Braucht ein kleines Unternehmen WCAG-Stufe AAA?
In der Regel nicht; Stufe AAA bringt sehr strenge Einschränkungen mit sich, die für die meisten kommerziellen Websites nicht praktikabel sind. Für kleine und mittlere Unternehmen bringt das Ziel der Stufe AA den Barrierefreiheitsnutzen, ohne die Gestaltungsfreiheit übermäßig einzuschränken.
Ist Barrierefreiheit nur für sehbehinderte Nutzerinnen wichtig?
Nein; Videountertitel für hörgeschädigte Nutzerinnen, Tastaturunterstützung für Nutzerinnen mit motorischen Einschränkungen und eine klare, einfache Sprache für Nutzerinnen mit kognitiven Unterschieden gehören ebenfalls zur Barrierefreiheit. Barrierefreiheit deckt ein breites Spektrum unterschiedlicher Bedürfnisse ab, nicht nur eine Nutzergruppe.
Eine barrierefreie Website ermöglicht es Ihnen, ein breiteres Publikum zu erreichen, und bedeutet gleichzeitig saubereren Code und stärkeres SEO. Möchten Sie Barrierefreiheitsanforderungen von Anfang an richtig in eine neue Website einplanen oder die Barrierefreiheit Ihrer bestehenden Website von uns bewerten lassen, kontaktieren Sie uns.