Accessibility (Barrierefreiheit) bezeichnet die Gestaltung digitaler Produkte so, dass sie von Menschen mit unterschiedlichen Fähigkeiten genutzt werden können; WCAG (Web Content Accessibility Guidelines) sind die international anerkannten Standards hierfür.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Barrierefreiheit, Inklusives Design, a11y (Kurzform)

Was ist Accessibility?

Accessibility – häufig als „a11y" abgekürzt (von englisch: 11 Buchstaben zwischen A und Y) – stellt sicher, dass digitale Inhalte und Anwendungen von allen Menschen genutzt werden können, unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Das betrifft blinde Nutzende (die Screenreader verwenden), gehörlose Nutzende (die auf Untertitel angewiesen sind), motorisch eingeschränkte Personen (die mit der Tastatur navigieren) oder Menschen mit kognitiven Einschränkungen (die klare, einfache Sprache benötigen). Gutes Accessibility-Design kommt letztlich allen Nutzenden zugute.

Erklärung

Die Web Content Accessibility Guidelines (WCAG) werden vom World Wide Web Consortium (W3C) veröffentlicht und sind der globale Standard für barrierefreies Webdesign. Die aktuelle Version ist WCAG 2.2 (2023), WCAG 3.0 ist in Entwicklung.

Die WCAG sind nach vier Grundprinzipien strukturiert – dem POUR-Modell:

Perceivable (Wahrnehmbar): Inhalte müssen von allen Sinnen erfassbar sein. Bilder brauchen Alternativtexte (alt-Attribute), Videos Untertitel und Audiodeskriptionen, Texte ausreichend Kontrast zum Hintergrund.

Operable (Bedienbar): Die Benutzeroberfläche muss mit verschiedenen Eingabemethoden bedienbar sein – Tastatur, Schalter, Sprachsteuerung. Keine Funktion darf ausschließlich mit der Maus erreichbar sein. Zeitlimits müssen verlängerbar oder deaktivierbar sein.

Understandable (Verständlich): Inhalte und Bedienung müssen verständlich sein. Texte sollen in klarer Sprache verfasst sein, Formulare klare Beschriftungen haben und Fehler verständlich erklärt werden.

Robust (Robust): Inhalte müssen von verschiedenen Technologien – darunter Screenreader und assistive Technologien – zuverlässig interpretiert werden. Sauberer, semantisch korrekter HTML-Code ist hierfür Grundvoraussetzung.

Die WCAG definieren drei Konformitätsstufen: A (Mindeststandard), AA (empfohlener Standard, gesetzlich oft vorgeschrieben) und AAA (höchster Standard, nicht immer vollständig erreichbar).

In Deutschland und der EU ist Barrierefreiheit durch den European Accessibility Act (EAA) und das Barrierefreiheitsstärkungsgesetz (BFSG) ab 2025 für viele digitale Produkte verpflichtend.

Beispiele

  1. Alternativtexte für Bilder: Jedes informative Bild auf einer Website erhält ein alt-Attribut, das den Bildinhalt für Screenreader-Nutzende beschreibt. Dekorative Bilder erhalten ein leeres alt-Attribut (alt="").
  2. Tastaturnavigation: Alle interaktiven Elemente einer Website – Menü, Buttons, Formulare, Links – müssen per Tab-Taste erreichbar und per Enter/Space aktivierbar sein.
  3. Kontrastanforderungen: WCAG AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Helles Grau auf weißem Hintergrund scheitert typischerweise an dieser Anforderung.
  4. Untertitel: Videos auf Nachrichtenportalen oder Lernplattformen müssen Untertitel haben – sowohl für gehörlose Nutzende als auch für Menschen, die Videos ohne Ton konsumieren.
  5. Lesbare Fehlermeldungen: Statt eines roten Rahmens allein (farbenblinde Nutzende erkennen ihn nicht) wird ein Fehler durch Text und Icon kommuniziert: „Bitte geben Sie eine gültige E-Mail-Adresse ein."

In der Praxis

Accessibility wird am effektivsten eingebaut, wenn sie von Beginn des Designprozesses berücksichtigt wird – nicht nachträglich als „Accessibility-Audit". Tools wie der Axe DevTools Browser-Plug-in, Lighthouse (in Chrome integriert) oder WAVE helfen, automatisch erkennbare Fehler zu finden. Screenreader wie NVDA (Windows, kostenlos), JAWS (Windows) oder VoiceOver (macOS/iOS, integriert) sollten regelmäßig für manuelle Tests genutzt werden. In Medienunternehmen betrifft Accessibility nicht nur Websites, sondern auch PDFs, Videos, Podcasts und Social-Media-Inhalte.

Vergleich & Abgrenzung

Accessibility vs. Usability: Usability beschreibt die Qualität der Nutzung für alle; Accessibility fokussiert auf die Zugänglichkeit für Menschen mit Einschränkungen. Gute Usability setzt gute Accessibility voraus, aber nicht umgekehrt. Accessibility vs. Universal Design: Universal Design ist ein breiteres Konzept, das Produkte für möglichst viele Menschen ohne spezielle Anpassungen nutzbar macht – Accessibility ist sein digitaler Ausdruck. WCAG vs. BITV: Die BITV (Barrierefreie-Informationstechnik-Verordnung) ist die deutsche Umsetzung der WCAG für Behörden-Websites und basiert auf WCAG 2.1/2.2, Konformitätsstufe AA.

Häufige Fragen (FAQ)

Ist Barrierefreiheit gesetzlich vorgeschrieben? In Deutschland ja – seit 2018 für öffentliche Stellen (BITV) und ab 2025 für viele private Unternehmen im B2C-Bereich (BFSG, basierend auf dem European Accessibility Act). Verstöße können abgemahnt werden. Medienunternehmen mit digitalen Angeboten sollten frühzeitig WCAG AA umsetzen.

Kostet Barrierefreiheit viel Entwicklungsaufwand? Nachträgliche Accessibility-Anpassungen sind teuer. Wer Barrierefreiheit von Beginn in Designprozesse integriert, reduziert den Mehraufwand erheblich. Viele Maßnahmen – wie semantisches HTML, aussagekräftige Linktexte und gute Farbkontraste – sind „gratis" wenn man sie von Anfang an richtig macht.

Verwandte Einträge

Weiterführend

  • W3C (2023): Web Content Accessibility Guidelines (WCAG) 2.2. www.w3.org/TR/WCAG22.
  • Hellbusch, J. E. / Probiesch, K. (2011): Barrierefreiheit verstehen und umsetzen. dpunkt.verlag.
  • Zeldman, J. / Marcotte, E. (2009): Designing with Web Standards. 3. Auflage. New Riders.
Verwandte Einträge
UsabilityUser ExperienceResponsive DesignGestaltgesetze
← Zurück zu Mediendesign & Digitale Medien
Infotag · 13. Mai · 15:00 Uhr · Vor Ort

Sei am Mittwoch dabei.
Bring Eltern oder Freunde mit.

Ein halber Nachmittag, der dir drei Jahre Klarheit bringen kann. Kostenlos, unverbindlich, ehrlich.

  • Rundgang durch Studios, Schnitträume und Tonstudio
  • Echte Absolventenfilme sehen
  • 1:1-Beratung zu Bewerbung & BAföG
  • Studierende direkt fragen
  • Kaffee, Snacks, kein Sales-Pitch
  • Auch online möglich

Platz beim Infotag reservieren

Dauert 30 Sekunden. Bestätigung per E-Mail.
100 % kostenlos · keine Verpflichtung · jederzeit absagbar