💡 1. Warum Web Accessibility (A11y) unverzichtbar ist
Über 15 % der Weltbevölkerung leben mit einer Behinderung (Seheinschränkungen, motorische Einschränkungen, neurodiverse Wahrnehmung). Die WCAG-Leitlinien (POUR) fordern:
⌨️ 2. Skip-Links & Das "Kein Div als Button"-Gesetz
Tastatur-Nutzer wollen nicht bei jedem Seitenwechsel durch 30 Navigationslinks tabben müssen. Ein Skip-Link springt direkt zum Hauptinhalt:
<!-- Skip-Link als erstes Kind im <body>: -->
<a href="#main-content" class="skip-link">Direkt zum Hauptinhalt springen</a>
<!-- ❌ FALSCH: Unzugänglich für Tastatur & Screenreader -->
<div class="btn" onclick="openMenu()">Menü</div>
<!-- ✅ RICHTIG: Nativ fokussierbar und per Enter/Space bedienbar -->
<button type="button" aria-expanded="false" aria-controls="mobile-menu">Menü öffnen</button>🛡️ 3. ARIA-Attribute: Rollen & Dynamische Zustände
Wenn Standard-HTML an seine Grenzen stößt (z.B. bei komplexen Accordions, Modals oder Live-Benachrichtigungen), hilft WAI-ARIA:
<!-- 1. aria-label für Icon-Buttons ohne sichtbaren Text: -->
<button type="button" aria-label="Suchleiste öffnen">
<svg aria-hidden="true">...</svg>
</button>
<!-- 2. aria-expanded für aufklappbare Bereiche: -->
<button aria-expanded="false" aria-controls="faq-answer-1">Was ist A11y?</button>
<div id="faq-answer-1" hidden>A11y steht für Accessibility...</div>
<!-- 3. aria-live für dynamische Erfolgsmeldungen: -->
<div role="status" aria-live="polite" class="alert-box">
Profil erfolgreich gespeichert!
</div>ARIA & Semantik sind wie die Sprachansage in der U-Bahn und die Bodenleitrillen für Blindenstöcke. Für sehende Menschen unauffällig, für Menschen mit Einschränkungen der einzige Weg zur selbstständigen Nutzung!
Die goldene ARIA-Regel: "No ARIA is better than bad ARIA." Verwende immer erst natives HTML (z.B. <button> statt <div role="button">)!
📑 4. Cheat-Sheet: Wichtige ARIA-Attribute
| Attribut / Rolle | Einsatzort | Wirkung |
|---|---|---|
aria-label="..." |
Buttons, Links, Icons | Überschreibt/definiert den vorgelesenen Namen |
aria-expanded="true|false" |
Accordion-Header, Dropdown-Toggle | Informiert, ob Unterbereich geöffnet ist |
aria-hidden="true" |
Dekorative Icons, Emojis | Screenreader ignorieren das Element komplett |
aria-describedby="id" |
Formular-Felder mit Hilfetext | Verknüpft Zusatzhinweise oder Fehlermeldungen |
role="status" aria-live="polite" |
Toasts, Feedback-Banner | Wird bei Textänderung sofort laut vorgelesen |