Web Accessibility (Barrierefreiheit)

Web Accessibility bezeichnet die Gestaltung von Webseiten so, dass sie von Menschen mit verschiedensten Beeinträchtigungen — visuell, auditiv, motorisch, kognitiv — gleichwertig genutzt werden können.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: A11y (Numeronym), Barrierefreiheit im Web, inklusives Web Design

Was ist Web Accessibility?

Web Accessibility — in der Fachgemeinschaft oft als „A11y" abgekürzt (A, 11 Buchstaben, y) — ist das Prinzip, dass das Web für alle Menschen nutzbar sein sollte, unabhängig von physischen oder kognitiven Fähigkeiten. Dies betrifft blinde Nutzer, die Screenreader verwenden, gehörlose Menschen, die auf Untertitel angewiesen sind, motorisch eingeschränkte Personen, die keine Maus bedienen können, sowie ältere Menschen mit verminderter Sehkraft.

Die technische Grundlage bilden die Web Content Accessibility Guidelines (WCAG), die vom World Wide Web Consortium (W3C) gepflegt werden. Version 2.1 ist seit 2018 der aktive Standard, Version 2.2 wurde 2023 veröffentlicht.

Erklärung

Die vier POUR-Prinzipien

WCAG basiert auf vier Grundprinzipien, unter die alle Erfolgskriterien fallen:

1. Perceivable (Wahrnehmbar): Inhalte müssen für alle Sinne zugänglich sein — Alternativtexte für Bilder, Untertitel für Videos
2. Operable (Bedienbar): Alle Funktionen müssen auch ohne Maus nutzbar sein — vollständige Tastaturnavigation
3. Understandable (Verständlich): Inhalte und Bedienung müssen verständlich sein — klare Sprache, vorhersehbares Verhalten
4. Robust (Robust): Inhalte müssen von verschiedenen Technologien interpretiert werden können — semantisches HTML, ARIA-Rollen

Konformitätsstufen

WCAG definiert drei Konformitätsstufen:

• A (Minimum): Absolute Grundanforderungen — ohne diese ist die Seite für bestimmte Gruppen unnutzbar
• AA (Standard): Gilt als praxistauglicher Standard — von Behörden und vielen Unternehmen gefordert
• AAA (Erweitert): Höchste Anforderungen — nicht für alle Inhalte praktisch umsetzbar

Rechtliche Relevanz in Deutschland: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet ab 2025 auch private Unternehmen zu barrierefreien digitalen Produkten und Dienstleistungen. Bisher galten strengere Regeln vor allem für öffentliche Stellen (BITV 2.0).

Kontrast und Farbe

Kontrastverhältnis ist eines der wichtigsten und am häufigsten verletzten Accessibility-Kriterien:

• WCAG AA für normalen Text: mindestens 4,5:1
• WCAG AA für großen Text (18 pt oder 14 pt bold): mindestens 3:1
• WCAG AAA: 7:1 (normaler Text)

Kontrastverhältnisse werden mit Tools wie dem WebAIM Contrast Checker, dem Tanaguru Contrast Finder oder direkt in Figma (mit Plugins wie Stark oder Contrast) überprüft.

Farbe allein darf nie das einzige Unterscheidungsmerkmal sein — Farbenblindheit betrifft ca. 8 % der männlichen Bevölkerung. Fehler sollten nicht nur rot markiert, sondern auch durch Icons oder Texthinweise signalisiert werden.

Alt-Texte für Bilder

Der alt-Attribut im <img>-Tag ist die wichtigste Accessibility-Maßnahme für visuelle Inhalte:

• Inhaltsbild: Alt-Text beschreibt den Inhalt und Kontext (nicht „Bild von …", sondern direkte Beschreibung)
• Dekoratives Bild: Leerer Alt-Text (alt="") — Screenreader überspringt das Element
• Infografiken/Charts: Ausführlichere Beschreibung, idealerweise als sichtbarer Begleittext oder aria-describedby

Schlechtes Beispiel: alt="bild123.jpg" Gutes Beispiel: alt="Drei Studierende sitzen vor einem Laptop und diskutieren ein Diagramm"

Tastaturnavigation

Alle interaktiven Elemente (Links, Buttons, Formulare, Dialoge) müssen vollständig per Tastatur bedienbar sein:

• Tab: Zwischen fokussierbaren Elementen wechseln
• Enter/Space: Element aktivieren
• Escape: Dialoge/Menüs schließen
• Pfeiltasten: In Komponenten navigieren (z. B. Dropdown, Tabs)

Sichtbarer Fokus-Indikator ist Pflicht — viele Designer entfernen den Standard-Fokusrahmen aus ästhetischen Gründen (outline: none), ohne ihn zu ersetzen. WCAG 2.1 (Kriterium 2.4.7) fordert sichtbaren Fokus. Moderne CSS-Lösung: outline durch ein gut gestaltetes :focus-visible-Styling ersetzen.

Semantisches HTML und ARIA

Semantisch korrektes HTML ist die beste Grundlage für Accessibility:

• <button> statt <div onclick="..."> für klickbare Elemente
• <nav>, <main>, <header>, <footer> für Landmark-Strukturen
• <h1>–<h6> in logischer Hierarchie
• <label> mit for-Attribut für Formulareingaben

ARIA (Accessible Rich Internet Applications) ergänzt HTML, wenn semantische Elemente nicht ausreichen:

• role="alert" für dynamisch erscheinende Fehlermeldungen
• aria-label="Schließen" für Buttons ohne sichtbaren Text
• aria-expanded="true/false" für Akkordeons und Dropdowns
• aria-live="polite" für dynamisch aktualisierte Inhalte

ARIA-Faustregel: Verwende ARIA nur, wenn natives HTML nicht ausreicht. aria-role="button" auf einem <div> ist schlechter als ein <button>.

Videos und Medien

• Untertitel: Pflicht für alle voraufgezeichneten Videos (WCAG 1.2.2, Level AA)
• Audiodeskription: Für Videos mit visuell wichtigen Informationen
• Kein Autoplay: Audioinhalte dürfen nicht automatisch starten (stört Screenreader-Nutzung)

Beispiele

Zugänglicher Focus-Stil: ``css :focus-visible { outline: 3px solid #0070f3; outline-offset: 3px; border-radius: 4px; } ``

Screenreader-Only Text (visuell versteckt, aber zugänglich): ``css .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ``

In der Praxis

Accessibility wird oft als nachträgliche Aufgabe behandelt — mit hohem Mehraufwand und unzureichenden Ergebnissen. Tatsächlich ist es kosteneffizienter, Accessibility von Beginn an einzuplanen: im Designprozess in Figma (Kontrast-Check, semantische Komponenten) und in der Entwicklung (semantisches HTML, Tastatur-Tests).

Empfohlenes Test-Toolkit:

• axe DevTools (Browsererweiterung): Automatisiertes Accessibility-Testing
• NVDA (Windows) / VoiceOver (macOS): Screenreader zum manuellen Test
• Lighthouse (Chrome DevTools): Accessibility-Score mit Handlungsempfehlungen

Vergleich & Abgrenzung

Accessibility und Usability überschneiden sich erheblich, sind aber nicht identisch: Eine Seite kann hohe Usability für nicht-beeinträchtigte Nutzer haben und dennoch für Screenreader-Nutzer unbrauchbar sein. Accessibility ist gewissermaßen ein Fundament unter der Usability.

Häufige Fragen (FAQ)

Ab wann bin ich als Unternehmen zur Web-Barrierefreiheit verpflichtet? Durch das Barrierefreiheitsstärkungsgesetz (BFSG) müssen ab dem 28. Juni 2025 auch private Unternehmen mit mehr als 10 Mitarbeitenden oder über 2 Mio. € Jahresumsatz Produkte und Dienstleistungen barrierefrei gestalten.

Verschlechtert Accessibility das Design? Nein. Barrierefreiheit und gutes Design widersprechen sich nicht — sie ergänzen sich. Hoher Kontrast, klare Typografie und logische Struktur verbessern die Erfahrung für alle Nutzer.

Was ist der einfachste Einstieg in Accessibility? Semantisches HTML, sichtbarer Fokus-Indikator und Alt-Texte für Bilder decken bereits viele Grundanforderungen ab und sind mit wenig Aufwand umsetzbar.

Verwandte Einträge

• Web Design Grundlagen — Grundlagen und Prinzipien des Web Designs
• Typografie im Web — Lesbarkeit und Kontrast bei Schrift im Web
• Dark Mode Design – dunkle Farbschemata für Apps und Websites — Kontrastanforderungen im Dark Mode
• CSS Animationen & Transitions — prefers-reduced-motion für barrierefreie Bewegung
• Landing Page Design — Accessibility bei Conversion-Seiten

Weiterführend

• W3C: Web Content Accessibility Guidelines (WCAG) 2.1, w3.org, 2018
• Lawson, Bruce / Sharp, Remy: Introducing HTML5, New Riders, 2011
• Horton, Sarah / Quesenbery, Whitney: A Web for Everyone, Rosenfeld Media, 2014
• Bundesfachstelle Barrierefreiheit: Leitfaden zur digitalen Barrierefreiheit, bundesfachstelle-barrierefreiheit.de, 2023
• WebAIM: Introduction to Web Accessibility, webaim.org (laufend aktualisiert)