Webentwicklung
Barrierefreiheit nach WCAG 2.1 – Websites für Alle
Nico FreitagWebentwicklung
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.
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 ...
WebentwicklungNext.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...