Barrierefreie Websites: Technische Grundlagen für WCAG 2.2-konforme Umsetzung
Barrierefreie Webentwicklung wird ab 2025 durch das Barrierefreiheitsstärkungsgesetz zur rechtlichen Pflicht für viele Unternehmen. Doch viel wichtiger: Sie macht Websites für alle Menschen nutzbar und technisch besser.
Die gute Nachricht? Die Grundlagen sind weniger komplex als befürchtet. Sauberer HTML-Code, durchdachte Tastatursteuerung und gezielte ARIA-Attribute – mehr braucht es oft nicht. Wir zeigen die wichtigsten Maßnahmen, mit denen Sie gesetzliche Anforderungen erfüllen und echten Mehrwert für alle Nutzer schaffen.
Was ist digitale Barrierefreiheit?
Digitale Barrierefreiheit bedeutet, dass Websites für alle Menschen zugänglich sind, unabhängig von Einschränkungen wie Seh-, Hör-, motorischen oder kognitiven Beeinträchtigungen. Neben der ethischen Verantwortung gibt es klare gesetzliche Anforderungen: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Unternehmen zur Umsetzung der WCAG 2.2 auf Level AA. Diese Standards legen die technischen Anforderungen fest, die sicherstellen, dass Websites auch mit Screenreadern und anderen Hilfstechnologien zuverlässig nutzbar sind.
Rechtlicher Rahmen
Zu den wichtigsten rechtlichen Rahmen gehören:
WCAG (Web Content Accessibility Guidelines): Internationaler Standard mit drei Stufen (A, AA, AAA) zur Bewertung der Barrierefreiheit.
BITV 2.0: Deutsche Umsetzung der WCAG.
EN 301 549: Europäische Norm als Grundlage für das Barrierefreiheitsstärkungsgesetz.
Pflicht ab 2025: Betrifft viele Unternehmen und Dienstleister mit mehr als 10 Mitarbeitenden oder über 2 Mio. Euro Jahresumsatz. Verstöße können mit Bußgeldern bis zu 100.000 Euro geahndet werden.
Bedeutung und Ziele
Das Barrierefreiheitsstärkungsgesetz verfolgt das Ziel, Menschen mit Behinderungen den gleichberechtigten Zugang zu digitalen Dienstleistungen zu ermöglichen. Es soll die digitale Teilhabe fördern, bestehende Barrieren abbauen und damit gesellschaftliche Inklusion vorantreiben. Für Unternehmen bedeutet dies eine Win-Win-Situation: Barrierefreie Websites erreichen nicht nur mehr Menschen, sondern sind oft auch benutzerfreundlicher, technisch robuster und SEO-optimierter.
Die vier WCAG-Prinzipien
Barrierefreie Websites orientieren sich in der Regel an den Web Content Accessibility Guidelines 2.2 (WCAG 2.2). Der WCAG ist ein international anerkannter Standard zur Umsetzung von Barrierefreiheit im digitalen Bereich und umfasst die Konformitätsstufen (conformance level) A, AA und AAA. Level AA entspricht den Mindestanforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG). Auf das Wesentliche heruntergebrochen, bestimmen 4 einfache Prinzipien, wann eine Website nach WCAG als barrierefrei gilt.
4 Prinzipien der Barrierefreiheit (WCAG 2.2):
Wahrnehmbar (Perceivable): Informationen müssen so präsentiert werden, dass Nutzerinnen und Nutzer sie wahrnehmen können.
Bedienbar (Operable): Website bzw. Webandwendung müssen bedienbar sein (Beispiel: einfache Navigation).
Verständlich (Understandable): Informationen und Bedienung der Website bzw. Webanwendung müssen verständlich sein.
Robust (Robust): Inhalte müssen robust sein, damit sie von assistiven Technologien (Screenreader, Vorlesesoftware, Spracherkennungssoftware etc.) ausgelesen werden können.
„Wir von coma sind überzeugt: Barrierefreie Websites sind einfach die besseren Websites. Zwar hat nicht jeder Mensch eine Einschränkung, aber 100 Prozent aller Nutzerinnen und Nutzer profitieren von guter Bedienbarkeit, cleanem Design und klaren Botschaften im Web.”
Technische Grundlagen
Sprache definieren
Damit Screenreader Inhalte in der korrekten Sprache, mit der entsprechenden Betonung vorlesen können. Die hauptsächliche Sprache wird im lang-Attribut des <html>-Tags definiert.<html lang="de">
Bei einzelnen, von der Hauptsprache abweichenden, Textpassagen kann die Sprache im jeweiligem Paragraphen definiert werden.
<p lang="en">This text is in English.</p>
Semantisches HTML und Landmarks
Semantisches HTML bedeutet, dass HTML-Elemente entsprechend ihrer inhaltlichen Bedeutung eingesetzt werden – etwa <header> für Kopfbereiche, <nav> für Navigation oder <main> für den Hauptinhalt. Dadurch wird der Code nicht nur für Entwickler lesbarer, sondern auch für Screenreader und Suchmaschinen verständlich. Nutzer profitieren von klarer Struktur und besserer Orientierung.
<header aria-label="Seitentitel">
<h1>Mein Webprojekt</h1>
</header>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="#home">Start</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<main id="main">
<section aria-label="Aktuelle Beiträge">
<h2>Neueste Artikel</h2>
<p>Hier finden Sie unsere neuesten Inhalte.</p>
</section>
</main>Skip Links
<a class="skip" href="#main">Zum Inhalt springen</a>
CSS blendet den Link standardmäßig aus und zeigt ihn bei Tastaturfokus an. Sinnvoll bei langen Navigationsbereichen oder wiederholten Elementen, um schneller direkt zum wichtigen Inhalt zu gelangen.
ARIA sinnvoll einsetzen
ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, mit denen Entwickler zusätzlichen Kontext für assistive Technologien bereitstellen können. Sie sind besonders wichtig, wenn native HTML-Elemente nicht ausreichen, um Funktion oder Status eines Elements klar zu machen.
<button aria-expanded="false" aria-controls="nav">Menü</button>
<div id="nav" role="navigation" aria-label="Hauptnavigation">
...
</div>role: Funktion eines Elements definieren
aria-label: Unsichtbare Beschriftung für Screenreader
aria-labelledby: Verweis auf sichtbare Beschriftung
aria-expanded: Zustand von Menüs oder Dropdowns
Benutzerdefinierte Steuerelemente (Custom Controls)
<div role="button" aria-label="Kinoauswahl" tabindex="0">Kinoauswahl</div>Custom Controls sind interaktive Steuerelemente, die nicht aus nativen HTML-Elementen bestehen (z. B. ein per <div> gebauter Button oder ein JavaScript-Slider). Damit Screenreader und andere Hilfsmittel sie korrekt interpretieren können, benötigen sie immer eine Rolle (role), einen Namen (sichtbarer Text oder aria-label) und – falls zutreffend – Zustandsangaben wie aria-checked oder aria-expanded.
Tastatursteuerung
Damit eine Website barrierefrei ist, muss sie auch vollständig ohne Maus nutzbar sein. Deshalb ist eine durchdachte Tastatursteuerung besonders wichtig. Als Entwickler bedeutet das: native HTML-Elemente wie <button> oder <a> verwenden, die Tastaturbedienung automatisch unterstützen. Bei selbstgebauten Komponenten tabindex="0" setzen, sinnvolle Rollen (role) vergeben und Eingaben per Enter- oder Leertaste abfangen. Außerdem sollte immer ein klar sichtbarer Fokuszustand per CSS vorhanden sein.
Tab/Shift+Tab: zwischen Elementen wechseln
Enter/Leertaste: Buttons/Links aktivieren
Pfeiltasten: in Menüs/Listen navigieren
Esc: Menüs/Dialogs schließen
Screenreader-Kompatibilität
Damit Screenreader Inhalte korrekt interpretieren und vorlesen können, sind bestimmte Maßnahmen in der Struktur und im Code notwendig. Dazu gehören unter anderem:
Saubere DOM- und Überschriftenstruktur
Beschriftete Formulare (
<label>oderaria-label)Aussagekräftige Alternativtexte
Live-Regionen für dynamische Änderungen (
aria-live)Sprachwechsel mit
langauf Inline-ElementenSinnvolle Beschriftung von Buttons/Links („Jetzt kaufen“ statt „Hier“)
Dynamische Inhalte
Bei AJAX oder JavaScript-Updates Änderungen mit aria-live kommunizieren und den Fokus passend setzen.
It's all about the code!
Barrierefreiheit braucht einen robusten Code. In unserem kostenlosen Leitfaden: Barrierefreie Website erklären wir Ihnen, warum. Außerdem: Deep Dive zu HTML und ARIA für barriererfreie Websites.
Häufige Stolpersteine
Fazit
Die Investition in barrierefreie Entwicklung zahlt sich mehrfach aus: Websites werden robuster, benutzerfreundlicher und erreichen eine breitere Zielgruppe. Gleichzeitig erfüllen Unternehmen ihre gesetzlichen Pflichten und zeigen gesellschaftliche Verantwortung.
Der Schlüssel liegt darin, Barrierefreiheit als Qualitätsmerkmal zu verstehen, nicht als Hindernis. Wer die WCAG 2.2-Standards konsequent umsetzt, entwickelt nicht nur rechtskonforme, sondern schlichtweg bessere Websites und das für alle Menschen.
Wir machen Ihre Website barrierefrei
Sprechen Sie mit mir über Ihre Herausforderungen und Ziele – in einem unverbindlichen Erstgespräch. Gemeinsam finden wir Lösungen, die begeistern.
BayernCloud Schule: Wir verbinden Bildung und Digitales – barrierefrei und responsive
Für das Bayerische Kultusministerium setzten wir das Web-Portal BayernCloud Schule (ByCS) um – mit digitalen Inhalten und Anwendungen für Lehrkräfte, Schüler und Verwaltung. Es ist für alle bayerischen Schulen zugänglich, natürlich barrierefrei konzipiert und umgesetzt.