Web Accessibility

Was ist Web Accessibility?

Accessibility (kurz: a11y) bedeutet, dass Websites und Web-Anwendungen so gestaltet werden, dass sie von allen Menschen genutzt werden können.

💡 Ziel: Niemand soll ausgeschlossen werden

Arten von Behinderungen

Sehbehinderungen: Blindheit, Sehschwäche, Farbenblindheit

Hörbehinderungen: Gehörlosigkeit, Schwerhörigkeit
Motorische Einschränkungen: Lähmungen, Zittern
Kognitive Einschränkungen: Lernbehinderungen, Konzentrationsschwäche

Warum ist Accessibility wichtig?

  • Etwa 15% der Weltbevölkerung leben mit einer Behinderung.
  • Inklusion ist ein Grundrecht!

Vorteile für Unternehmen

Business-Nutzen

- Größere Zielgruppe, Rechtliche Anforderungen erfüllen, Bessere SEO und Usability
- 15% der Weltbevölkerung = 1,3 Milliarden Menschen, in Deutschland: ca. 13 Millionen Menschen

Vorteile für Entwickler\:innen

- Besserer, sauberer Code
- Zukunftssichere Entwicklung

Wer profitiert direkt von Accessibility?

Menschen mit Screenreadern
Menschen, die nur die Tastatur verwenden
Menschen mit eingeschränktem Sehvermögen
Menschen mit Hörbehinderungen

Wer profitiert von Accessibility?

Mobile Nutzer (kleinere Screens, Touch-Navigation)
Ältere Menschen (nachlassende Sehkraft, motorische Fähigkeiten)
Temporäre Einschränkungen (gebrochener Arm, laute Umgebung)
Situative Einschränkungen (helles Sonnenlicht, schlechte Internetverbindung)
Maschinen 😎

WCAG - Web Content Accessibility Guidelines

Die WCAG definieren internationale Standards für barrierefreie Webinhalte in drei Konformitätsstufen: A, AA, AAA.

Die vier WCAG-Prinzipien

Wahrnehmbar: Informationen müssen so präsentiert werden, dass Nutzer sie wahrnehmen können.

Bedienbar: Benutzeroberflächen müssen bedienbar sein.
Verständlich: Informationen und Bedienung müssen verständlich sein.
Robust:Inhalte müssen von verschiedenen Hilfstechnologien interpretiert werden können.

Was können wir dafür tun?

Awareness, Code, Testing

Semantisches HTML

Gut strukturiertes, valides, semantisches HTML bedeutet, dass der Aufbau der Seite mit den richtigen HTML-Tags ihre inhaltliche Bedeutung widerspiegelt – sodass Menschen, Maschinen und Hilfsmittel die Inhalte verstehen und sinnvoll nutzen können..

<header><h1>Willkommen</h1></header>
<main>
  <section>
    <h2>Unser Angebot</h2>
    <p>Individuelle Beratung und Support …</p>
  </section>
</main>

Textäquivalente

Ein guter Alternativtext (Alt-Text) beschreibt den Inhalt und Zweck eines Bildes klar, prägnant und kontextbezogen – für Menschen, die das Bild nicht sehen können (z. B. durch Screenreader oder bei deaktivierten Bildern im Browser).

<img src="katze.jpg" 
  alt="Graue Katze schläft auf rotem Sofa">

ARIA - Wenn HTML nicht reich

ARIA (Accessible Rich Internet Applications) macht Inhalte für Screenreader zugänglich – aber nur, wenn HTML es nicht schon kann. Nutze ARIA, um Rollen, Zustände oder Beschriftungen zu ergänzen, nicht um fehlende Semantik zu ersetzen.

<div role="tablist">
  <button role="tab" aria-selected="true">Details</button>
  <button role="tab" aria-selected="false">Bewertungen</button>
</div>

Farben und Kontraste

Kontrast-Anforderungen (WCAG) Normaler Text: Mindestens 4.5:1
Großer Text: Mindestens 3:1
UI-Elemente: Mindestens 3:1

Häufige Fehler vermeiden
Nicht nur Farbe für wichtige Informationen nutzen
Graue Texte auf weißem Hintergrund prüfen

Fokus und Tastatur-Navigation

Tab-Taste: Zwischen interaktiven Elementen wechseln
Enter/Space: Buttons und Links aktivieren
Pfeiltasten: In Listen und Menüs navigieren
Escape: Dialoge und Overlays schließen

/* Fokus sichtbar machen */
button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Manuelle Tests

  • Maus weglegen - nur Tastatur verwenden
  • Zoom auf 200% - ist alles lesbar?
  • Bilder deaktivieren - fehlen Alt-Texte?
  • sind alle Bereiche mit Tab erreichbar?
  • Fokus immer sichtbar?
  • Escape schließt Dialoge?
  • Screenreader nutzen

Tools zum Testen

  • WAVE Web Accessibility Evaluator
  • Lighthouse (in Chrome DevTools integriert)

Best Practices für den Alltag

  1. Accessibility von Anfang an einplanen
  2. Automatisierte Tests in CI/CD Pipeline
  3. Regelmäßige manuelle Tests durchführen
  4. Echte Nutzer einbeziehen (User Testing)

Mini-Checkliste

  • [ ] Code ist valide und ausdrucksstark
  • [ ] Alle Bilder haben Alt-Texte
  • [ ] Überschriften-Hierarchie ist logisch (h1 → h2 → h3)
  • [ ] Links haben aussagekräftige Texte
  • [ ] Formulare sind richtig beschriftet
  • [ ] Farbkontraste sind ausreichend
  • [ ] Alle Funktionen mit Tastatur erreichbar
  • [ ] Fokus ist immer sichtbar
  • [ ] Tab-Reihenfolge ist logisch
  • [ ] Lighthouse Accessibility-Score > 90
  • [ ] Mit Screenreader getestet

Nützliche Ressourcen

Danke für's Mitmachen

https://christiannoss.de