← Zurück

Accessibility

Web für alle. Keine Ausreden.

💡 Warum Accessibility?

Quick Wins 80% Impact mit 20% Aufwand

🏗️ Semantic HTML

❌ Schlecht

<div class="header">
<div class="nav">
<div onclick="...">Click</div>

✅ Gut

<header>
<nav>
<button>Click</button>

Screenreader verstehen <button>, aber nicht <div onclick>

🖼️ Alt Text für Bilder

✅ alt="Golden Retriever spielt im Park"
❌ alt="Bild" / alt="foto.jpg" / alt=""
⚠️ alt="" — OK für dekorative Bilder

🎨 Farbkontrast

WCAG AA: mindestens 4.5:1 für normalen Text, 3:1 für großen Text.

❌ 2.4:1

Schwer lesbar

✅ 7.1:1

Gut lesbar

Tool: WebAIM Contrast Checker

🎯 Focus States

Keyboard-User müssen sehen wo sie sind. Nie outline: none ohne Alternative! 

/* Gut: Custom Focus Style */
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Schlecht: Focus komplett entfernen */
button:focus {
  outline: none; /* ❌ NIE! */
}

Drück Tab um den Unterschied zu sehen

🏷️ Form Labels

❌

<input placeholder="Email">

Placeholder ist kein Label!

✅

<label for="email">Email</label>
<input id="email">

ARIA Basics Wenn HTML nicht reicht

Erste Regel von ARIA: Benutze kein ARIA wenn du natives HTML nutzen kannst.

aria-label

<button aria-label="Menü schließen">✕</button>

aria-hidden

<span aria-hidden="true">🎨</span> Design

Dekorative Icons vor Screenreadern verstecken

aria-live

<div aria-live="polite">3 Ergebnisse gefunden</div>

Dynamische Änderungen ankündigen

Testen

🔧 Tools

  • • Lighthouse (Chrome DevTools)
  • • axe DevTools Extension
  • • WAVE Extension

⌨️ Manuell

  • • Nur mit Keyboard navigieren
  • • Screenreader testen (VoiceOver)
  • • Zoom auf 200% setzen

✅ Quick Checklist