Zum Inhalt springen
Webentwicklung

Barrierefreiheit nach WCAG 2.1 – Websites für Alle

Kevin KrögerWebentwicklungVeröffentlicht am 2026-03-17

Barrierefreiheit bedeutet: Deine Website sollte von Menschen mit Behinderungen genutzt werden können – Blinde, Taube, Motor-Behinderungen, etc. Das ist nicht nur ethisch – es ist auch legal (AODA in Kanada, ADA in USA, etc.) und verbessert deine Geo-SEO.

WCAG 2.1 Levels

WCAG (Web Content Accessibility Guidelines) hat drei Levels: Level A: Basic accessibility Level AA: Better accessibility (empfohlen) Level AAA: Optimal accessibility (selten notwendig) Streben Sie Level AA an.

Die vier Prinzipien

1. Perceivable: Content muss wahrnehmbar sein - Text-Alternativen für Bilder (Alt Text) - Captions für Videos - Gute Kontrast-Verhältnisse (Text muss lesbar sein) 2. Operable: Interfaces müssen bedienbar sein - Keyboard Navigation (alles mit Keyboard erreichbar, nicht nur Maus) - Keine Inhalte, die blitzen (können Epilepsie auslösen) - Skip Links 3. Understandable: Content muss verständlich sein - Einfache Sprache - Konsistente Navigation - Hilfreiche Error Messages 4. Robust: Code muss robust sein - Valid HTML/CSS - Screen Reader kompatibel

Praktische Beispiele

Alt Text für Bilder: ```html <!-- FALSCH – kein Alt Text: --> <img src="cat.jpg" /> <!-- RICHTIG – mit Alt Text: --> <img src="cat.jpg" alt="A orange tabby cat sleeping on a couch" /> ``` Farb-Kontrast: ```html <!-- FALSCH – zu niedriger Kontrast: --> <p style="color: #cccccc; background: white;">Light gray text</p> <!-- RICHTIG – ausreichender Kontrast: --> <p style="color: #333333; background: white;">Dark gray text</p> ``` Keyboard Navigation: ```html <!-- RICHTIG – alle Elemente sind keyboard-zugänglich: --> <button onclick="doSomething()">Click me</button> <a href="/page">Link</a> <input type="text" /> ``` Skip Link: ```html <body> <a href="#main-content" class="skip-link">Skip to main content</a> <nav>Navigation</nav> <main id="main-content">Content</main> </body> ```

Tools zum Testen

axe DevTools: Browser Extension zum Finden von Accessibility Issues WAVE: Website Accessibility Evaluation Tool Lighthouse: Google Chrome DevTools Screen Readers: NVDA (kostenlos), JAWS Teste mit echten Assistive Technologies.

Häufige Fehler

1. Kein Alt Text: Sehr verbreitet, sehr schlecht 2. Farb-Kontrast: Text auf hellgrauem Hintergrund ist unlesbar 3. Links ohne Text: Ein Icon ohne Alt Text ist keine Hilfe 4. Auto-Playing Audio/Video: Startling und störend 5. Keine Keyboard Navigation: Viele User nutzen Keyboard, nicht Maus

Auswirkungen

- Legal: Du könntest verklagt werden wenn deine Website nicht accessible ist - Market: 1 Milliarde Menschen weltweit haben Behinderungen - Geo-SEO: Accessibility verbessert oft auch Geo-SEO - Ethics: Es ist das Richtige

Fazit

Barrierefreiheit ist nicht optional. Es ist ein Muss für moderne Websites. Und es ist einfacher als du denkst – du brauchst nur Best Practices zu folgen.

Über den Autor

Kevin Kröger

Kevin Kröger

Founder & Geschäftsführer

Kevin Kröger ist Gründer und Geschäftsführer von AXIS/PORT. Er verantwortet die Bereiche SaaS-Entwicklung, Cloud-Infrastruktur und technisches Projektmanagement.

Häufige Fragen

Weitere Artikel

Webentwicklung

Core Web Vitals optimieren – Die Google Performance-Metriken

Google hat Core Web Vitals eingeführt – drei Metriken die messen, wie schnell und responsiv deine Website ist. Wenn sie ...

Webentwicklung

Next.js vs. WordPress – Welches Framework passt zu deinem Project?

Next.js und WordPress sind zwei völlig verschiedene Technologien. Aber beide werden für Websites benutzt. Welche solltes...

Alle Artikel
AXIS/PORT. | Barrierefreiheit WCAG 2.1 – Accessible Web Design