Digitale Barrierefreiheit

Accessibility Design | Usability

Was ist Barrierefreiheit?

Bei dem Thema der Barrierefreiheit (im Englischen „Accessibility“) geht es im Kern darum, (digitale) Inhalte allen Menschen zugänglich zu machen – unabhängig davon, ob sie körperliche und/oder geistige Einschränkungen haben oder nicht. Kurzum: Ziel ist es, beispielsweise eine Webseite so zu entwerfen und zu entwickeln, dass auch Menschen mit Blindheit die Inhalte verstehen können.

In diesem Artikel geht es darum, das Thema grundlegend zu erklären und aufzuzeigen, welche Möglichkeiten Designer:innen und auch Entwickler:innen haben, digitale Produkte barrierefrei zu machen.

Barrierefreies Design berücksichtigt Nutzer:innen, die eine Behinderung haben könnte.

Warum ist barrierefreies Design so wichtig?

Laut einem Report der WHO sind schätzungsweise 1,3 Milliarden Menschen permanent von Behinderungen betroffen (Quelle: WHO). Somit ist im Schnitt also jeder sechste Mensch durch Einschränkungen im täglichen Leben beeinträchtigt. In der EU ist die Zahl sogar noch höher. Laut einem Bericht leben 2022 circa 27% der EU-Bürger:innen (also jeder vierte Mensch) mit eine Form von Behinderung (Quelle: EU).

Die Art und die Schwere der Behinderungen sind dabei genauso vielfältig, wie die Menschheit selbst.

Info-Grafik zur Anzahl der EU-Bürger mit Behinderung (101 Millionen im Jahr 2022).

Bei der Frage nach „Was ist eine Behinderung?“, beziehen sich die meisten Antworten direkt auf die vermeintlich „klassischen“ Behinderungen, wie Blindheit, Taubheit oder auch fehlende Mobilität. Das Thema muss jedoch viel granularer betrachtet werden, denn neben unterschiedlichen Ausprägungen einer Behinderung gibt es noch zahlreiche weitere Formen, mit denen Menschen zurecht kommen müssen. So werden beispielsweise kognitive Einschränken bei der Wahrnehmung von Informationen schnell zu einer unüberwindbaren Barriere. Auch Menschen, die normalerweise keine Einschränkungen haben, können etwa durch einen Unfall oder einer OP temporäre Behinderungen haben.

Diese Zahlen und die Beispiele zeigen also schon recht deutlich, dass barrierefreies Design sich nicht nur an Einzelne richtet, sondern einen sehr breiten Teil der Gesellschaft betrifft.

Welche Arten von Beeinträchtigungen gibt es?

Grafik zeigt mittels Symbolen unterschiedlichen Formen von Behinderungen und Beeinträchtigungen.

Bevor ich im Detail darauf eingehen, wie ein digitales Produkt barrierefrei gestaltet und entwickelt werden kann, lohnt sich ein Blick auf die unterschiedlichen Formen von Behinderungen. Denn es ist wichtig zu verstehen, wie sich eine Behinderung auf den Alltag der Menschen auswirkt, um gezielt Maßnahmen für eine Barrierefreiheit entwickeln zu können.

Permanente und temporäre Behinderungen

Eine Behinderung kann entweder von Geburt an bestehen, sich erst nach und nach einstellen (z. B. durch das Älter werden) oder sie kann auch nur zeitlich begrenzt einen Menschen betreffen. So kann ein Bruch der Schreibhand beispielsweise Menschen im Alltag bei unterschiedlichen Dingen beeinträchtigen. Bezogen auf digitale Produkte kann eine solche Behinderung Nutzer:innen temporär daran hindern, ein Schreibprogramm wie “gewohnt” zu nutzen.

Blindheit

In der stärksten Ausprägung von Blindheit können Menschen mit dieser Behinderung nicht das sehen, was andere Menschen mit ihren Augen wahrnehmen können.

Es gibt aber auch zahlreiche Abstufungen oder andere Formen von Teilblindheit, die Menschen im Alltag stark beeinträchtigen können. So für das Glaukom (grüner Star) häufig dazu, dass das Sehfeld von Menschen beeinträchtig wird. Auch im digitalen Kontext ist das hinderlich, wenn sich etwa zusammenhängende Inhalte über große Bereich des Bildschirms erstrecken. Dann ist es für Nutzer:innen mit grünem Star schwer, die Inhalte zu erkennen.

Simulation eines eingeschränkten Sichtbereichs mit Blick auf eine Webseite.

Simulierter Blick auf eine Webseite mit eingeschränktem Sichtbereich durch eine Glaukom-Erkrankung.

Eine weitere häufige visuelle Beeinträchtigung ist Farbblindheit. Menschen haben dabei Schwierigkeiten, bestimmte Farben zu erkennen. Die häufigste Form der Farbenblindheit ist, dass Sie den Unterschied zwischen Grün, Rot und Grautönen nicht erkennen können.

Darstellung von einem roten und einem grünen Button ohne Sehbehinderung

Darstellung von einem roten und einem grünen Button mit Deuteranopia (Rot-Grün-Blindheit).

Taubheit und Stummheit

Die Zufriedenstellung beschreibt, wie angenehm und positiv die Nutzung eines Systems für Nutzer:innen ist. Sie wird sowohl durch Effektivität als auch durch Effizienz beeinflusst: Wenn ein System nicht effektiv oder effizient ist, kann dies die Zufriedenheit verringern.

Gleichzeitig kann eine hohe Zufriedenstellung die Effektivität und Effizienz verbessern, da zufriedene Nutzer:innen eher motiviert sind, Aufgaben erfolgreich zu Ende zu führen. Kaufanreize, wie Rabatte oder Extras, können beispielsweise die Zufriedenheit der Nutzer:innen positiv beeinflussen.

Ein probates Mittel, um die Zufriedenheit zu messen, sind Nutzerbefragungen. Häufig erleben wir diese Befragungen beispielsweise nach der Einführung neuer Funktionen in einer App.

Physische Behinderungen

Wie bereits im Abschnitt über die temporären Behinderungen beispielhaft aufgeführt, kann eine körperliche Einschränkung dazu führen, dass bestimmte digitale Produkte nicht so verwendet werden können, wie es Menschen ohne Behinderung tun können.

Das kann wie im obigen Beispiel die Texteingabe betreffen. Auch kann es aber sein, dass Menschen die Computermaus nicht bedienen können und auf die Tastaturnavigation oder andere assistive Technologien angewiesen sind.

Digitale Produkte sollten daher Nutzer:innen mit physischen Behinderungen immer berücksichtigen und beispielsweise alternative Navigationsformen anbieten.

Kognitive Behinderungen

Es gibt zahlreiche Arten von kognitiven Behinderungen. Einige von ihnen wirken sich auf die Art und Weise aus, wie Nutzer:innen digitale Produkte nutzen und/oder verstehen.

Menschen mit Autismus neigen beispielsweise dazu, sich leicht ablenken zu lassen. Außerdem können sie durch Fehler, die zum Beispiel während der Navigation auftreten, blockiert werden.

Auch Nutzer:innen mit einer Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) können von digitalen Angeboten stark beeinträchtigt werden. Denn häufig fehlt ihnen die Konzentrationsfähigkeit, um lange Texte aufmerksam zu lesen.

Und so gibt es noch viele weitere kognitive Behinderungsformen, die es beim Design und der Entwicklung zu berücksichtigen gibt. Ein häufiges Mittel ist es, Inhalte in leichter Sprache zur Verfügung zu stellen. Dies hilft den Betroffenen, von Inhalten nicht ausgeschlossen zu sein.

Umweltbedingte und andere Einschränkungen

Haben Sie sich schon einmal am Strand liegend, im schönsten Sonnenschein eine Website angesehen? Dann kennen Sie vermutlich das Problem: Stimmt der Kontrast der Website nicht, können Sie die Inhalte nur schlecht oder gar nicht lesen.

Und so können umwelttechnische Einflüsse zu einer Barriere für jeden Nutzer und jede Nutzerin führen, auch wenn eigentlich keine körperliche oder kognitive Behinderung vorliegt.

Ein weiteres Beispiel für eine Einschränkung, die jeden und jede treffen kann, ist das “Surfen” auf dem Smartphone im Bus. Sind Texte zu klein gestaltet, wird es schwer, bei hubbeligen Straßenverhältnissen Inhalte lesen zu können. So ist es daher bei der Konzeption von digitalen Produkten eklatant wichtig, auch solche Situationen zu berücksichtigen. Insbesondere gilt das natürlich für Produkte, die von Nutzer:innen mehrheitlich mobil genutzt werden.

Wie werden digitale Inhalte barrierefrei?

Grafik zeigt mittels Symbolen mehrere Möglichkeiten, digitale Inhalte barrierefreie zu machen.

Wie Inhalte barrierefrei gestaltet werden können und mit welchen Mitteln, hängt teils stark davon ab, welche Behinderung Nutzer:innen haben. Grundsätzlich sollten Designer:innen und Entwickler:innen es aber allen Menschen ermöglichen, Zugang zu ihren Inhalten zu bekommen.

Die Stärke des Internets liegt in seiner Universalität. Der Zugang für alle, unabhängig von einer Behinderung, ist ein wesentlicher Aspekt.

Quelle: Tim Berners-Lee, W3C-Direktor und Erfinder des World Wide Web.
Im folgenden gehe ich auf die wichtigsten, grundlegenden Möglichkeiten ein, mit denen barrierefreies Design möglich ist. Darüberhinaus gibt es noch viele weitere Möglichkeiten, wie zum Beispiel der Einsatz von assistiven Technologien. Diese werde ich in diesem Artikel jedoch nicht behandeln.

Farbigkeit

Farbe ist wichtig, um Dinge „schön” zu machen oder auf besondere Inhalte hinzuweisen. Das Problem dabei ist, dass nicht alle Menschen Farben auf dieselbe Weise sehen können.

Farbbedeutung

Menschen mit Rot-Grün-Sehschwäche (Deuteranopie) können Rot- und Grüntöne kaum unterscheiden, sie erscheinen oft grau. Inhalte sollten daher nie nur über Farben kommuniziert werden. Fehlermeldungen sollten zusätzlich zur roten Farbe ein Symbol, wie ein Ausrufezeichen, enthalten.

Auch Textlinks müssen für alle Nutzer:innen klar erkennbar sein. Eine rein farbliche Hervorhebung genügt nicht; nach Usability-Standards sollten Links idealerweise unterstrichen sein, um allgemein verständlich zu bleiben.

Darstellung eines Online-Formulars mit einer WCAG-konformen Fehlermeldung.

WCAG-konforme Fehlermeldung mit zusätzlicher visuelle und textlicher Auszeichnung.

Farbkontrast

Für Menschen mit Sehbehinderung ist ein hoher Kontrast essenziell. Texte in hellen Pastelltönen auf weißem Hintergrund mögen zwar „schön“ wirken, sind jedoch schwer lesbar.

Normale Texte sollten mindestens ein Kontrastverhältnis von 4.5:1 aufweisen; große Texte ab 24 Pixel benötigen nur 3:1 für WCAG Level AA.

Mit Tools wie dem WCAG Color Contrast Checker lassen sich Kontraste einfach testen, wobei die Tools auch das WCAG-Level angeben.

Screenshot eines Online-Tools zur Auswertung des Farbkontrasts.

Mittels verschiedener Online-Tools lässt sich der Farbkontrast hinsichtlich der WCAG-Kriterien und erreichten Levels überprüfen.

Tastaturnavigation

Menschen mit körperlichen Einschränkungen navigieren sich oft nur per Tastatur durch digitale Inhalte. Daher muss ein digitales Produkt, wie eine Website, eine einfache Tastaturnavigation ermöglichen. Die WCAG-Kriterien empfehlen standardgemäß die Pfeil- oder Tabulatortasten zu unterstützen. Außerdem sollten Nutzer:innen durch visuelles Feedback verstehen können, wo sie sich aktuell befinden.

Visuelles Feedback ist typischerweise ein optisch deutlicher Fokus-Zustand, wie ein Rahmen um den aktuellen Textlink.

Darstellung von WCAG-konformen Button- und Textlink-Zuständen.

Zusätzlich zu einem Hover-Status sollte Buttons und Textlinks einen visuellen Fokus-Status haben.

Dinge zusammenhalten, die zusammengehören

Wenn Nutzer:innen beispielsweise an einem Glaukom leiden, können sie nur einen Teil des Bildschirms sehen. Es ist daher wichtig, Dinge zusammenzuhalten, die zusammengehören.

Ein Formular beispielsweise, das besonders umfangreich ist, wird so zu einer Herausforderungen für diese Nutzer:innen. Daher sollten umfangreiche Formulare entweder in mehrere einzelnen Formular-Schritte oder zumindest in Abschnitte unterteilt werden.

Zum Vergleich: eingeschränkter Sichtbereich (Glaukom) auf ein kurzes und ein langes Formular.

Gegenüberstellung von zwei unterschiedlichen langen Formularfeldern aus Sicht einer Person mit Glaukom-Erkrankung.

Aber auch bereits weniger komplexe Elemente in einem digitalen Produkt können Nutzer:innen mit Glaukom beeinträchtigen. Ist beispielsweise eine Suchleiste sehr breit und der Button zum Auslösen der Suche befindet sich am Ende, kann das dazu führen, dass beides zugleich nicht in einem Fokusbereich der Nutzer:innen liegt.

Alternativen Text bereitstellen

Bilder und Infografiken sind oft visuell ansprechend, aber für Menschen mit Blindheit oder eingeschränktem Sehvermögen unzugänglich. Deshalb sollten visuelle Inhalte auch in Textform verfügbar sein:

  • Bilder sollten immer mit einem alternativen Text (ALT-Text in HTML) beschrieben sein.
  • Buttons mit Icons sollten ARIA-Labels erhalten, sodass Screenreader-Programm z. B. „Schaltfläche: Speichern“ vorlesen können.
  • Videos sollten grundsätzlich Untertitel haben. Außerdem sollten Geräuschbeschreibungen enthalten sein, wie etwa „Es klingelt an der Tür“.
  • Für Audioaufnahmen ist eine Transkription sinnvoll, die unter der Tonspur oder auf einer separaten Seite bereitgestellt wird.
Bild von einer surrealistischen Kuh in einem Mondkrater.

Bildmotiv mit zusätzlicher Bildbeschreibung für nicht-sehenden Nutzer:innen.

Leseniveau berücksichtigen

Texte sollten so einfach geschrieben sein, dass sie für die Mehrheit verständlich sind; idealerweise auf dem Lesekompetenz-Niveau von 12-Jährigen. Dieser Ansatz gilt zwar nicht für alle Texte – wissenschaftliche Arbeiten dürfen komplexer sein –, doch sollten Texter:innen immer bedenken, dass Leser:innen auch abgelenkt sein können. Geräusche oder andere Umweltfaktoren können das Leseverständnis beeinflussen.

Für längere Texte ist eine einfache Kurzzusammenfassung hilfreich. Ein nützliches Tool zur Überprüfung der Textkomplexität ist die Hemingway App, die Texte in verschiedene Schwierigkeitsstufen einteilt.

Kleines Kind sitzt auf den Schulter des Vaters, der im Homeoffice arbeitet.

Ablenkung führt zur reduzierten Wahrnehmung von digitalen Inhalten. Diese Beeinträchtigung kann jeden/jede treffen und sollte bei der Texterstellung bereits berücksichtigt werden.

Kleine Stellschrauben mit großer Wirkung

Mit einigen wenigen „Tricks“ lassen sich Barrieren in digitalen Produkten vermeiden oder zumindest verringern. Wird bei der Konzeption einer Website beispielsweise der Farbkontrast von 4.5:1 berücksichtigt oder die Tastaturnavigation ermöglicht, ist das Produkt mehr Menschen zugänglich.

Und das beste: Werden die WCAG-Kritierien von Beginn an berücksichtigt, hält sich der Aufwand, um ein digitales Produkt barrierefrei zu machen, in Grenzen.

Wichtige Richtlinien für Barrierefreiheit im digitalen Raum

Wie im Abschnitt zuvor beschrieben, gibt es unterschiedliche Möglichkeiten, digitale Produkte barrierefrei zu gestalten. Damit digitale Produkte jedoch nach einem möglichst einheitlichen Standard barrierefrei entwickelt werden können, gibt im europäischen Raum im Kern drei Referenz-Richtlinien:

  1. Web Content Accessibility Guidelines (WCAG) der W3C (internationale Norm)
  2. EN 301 549 (europäische Norm für digitale Barrierefreiheit)
  3. BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung 2.0)
  4. Ergänzung: Barrierefreiheitsstärkungsgesetz (BFSG)

 

Web Content Accessibility Guidelines (WCAG) der W3C

Die WCAG-Richtlinien wurden vom W3C entwickelt und stellen eine internationale Richtlinie für die Barrierefreiheit von Webinhalten dar. Die aktuelle empfohlene Fassung ist die Version 2.2. Sie enthalten Prinzipien, Richtlinien und Erfolgskriterien in drei Stufen: A, AA und AAA.

Der Fokus liegt auf allen Arten von Webinhalten, ohne spezifische Berücksichtigung rechtlicher Anforderungen. Die WCAG-Richtlinien sind weltweit verbreitet und anerkannt. Sie dienen auch als Basis für viele nationale Gesetze zur Barrierefreiheit (u.a. in Europa und in den USA).

Link zur Webseite: https://www.w3.org/TR/WCAG22/

EN 301 549 (Europäische Norm für digitale Barrierefreiheit)
Die EN 301 549 ist eine europäische Norm, die Anforderungen an die Barrierefreiheit von IKT-Produkten (Informations- und Kommunikationstechnologien) und Diensten, wie zum Beispiel Webseiten, Software oder mobile Anwendungen, definiert.

Die Richtlinie basiert auf den WCAG 2.1-Kriterien und schreibt die Einhaltung der Level A und AA vor. Darüberhinaus beinhaltet sie noch zusätzliche spezifische Anforderungen für Hardware, Dokumente und Software.

Der Fokus liegt auf der Regelung von Barrierefreiheit für öffentliche Einrichtungen in der EU und stellt sicher, dass diese digitale Inhalte und Technologien zugänglich bereitstellen. Die EN 301 549 ist in der EU gesetzlich verpflichtend und Grundlage der EU-Webseitenrichtlinie (EU 2016/2102).

Link zum PDF: https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf

BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung 2.0)

Die BITV 2.0 ist eine deutsche Verordnung, die die Anforderungen an barrierefreie IT für Bundesbehörden und öffentliche Stellen speziell in Deutschland festlegt.

Sie basiert ebenfalls auf den WCAG 2.1 und fordert primär die Einhaltung des WCAG 2.1 AA-Standars, wie auch die EN 301 549. Für bestimmte, besonders relevante Bereiche, wie die Startseiten und Navigationsmöglichkeiten, werden darüberhinaus die Level-AAA-Kriterien verlangt, sofern technisch umsetzbar. Das Ziel ist es, die Barrierefreiheit für die wichtigsten Nutzerinteraktionen und zentralen Navigationselemente auf ein möglichst hohes Niveau zu bringen.

Fokus der BITV 2.0 liegt auf der Regelung des öffentlichen Sektors in Deutschland, und ergänzt damit landesspezifische Anforderungen und Vorschriften für die Umsetzung der Barrierefreiheit.

Link zur Webseite: https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreie-informationstechnik-verordnung-2-0.html

Ergänzung: Barrierefreiheitsstärkungsgesetz (BFSG)
Das Barrierefreiheitsstärkungsgesetz (BFSG), das am 28. Juni 2025 in Kraft tritt, soll die Zugänglichkeit von Produkten und Dienstleistungen in Deutschland für Menschen mit Behinderungen verbessern. Damit setzt es die EU-Richtlinie 2019/882 (European Accessibility Act) um, die verbindliche Anforderungen an Barrierefreiheit in verschiedenen Bereichen festlegt. Unternehmen müssen bestimmte Produkte und Dienstleistungen barrierefrei gestalten, um Inklusion zu fördern und Diskriminierung zu reduzieren.

Betroffene Produkte und Dienstleistungen:

Betroffene Produkte

  • Computer und Betriebssysteme
  • Geldautomaten, Ticket- und Check-in-Automaten
  • Smartphones und Tablets
  • E-Books und E-Reader

Betroffene Dienstleistungen

  • Elektronischer Handel
  • Bankdienstleistungen, wie z. B. Online-Banking
  • Telekommunikationsdienste
  • Transportdienstleistungen (z. B. Ticketbuchung für den öffentlichen Verkehr)

Link zur Webseite: https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html

Fazit

Barrierefreiheit in digitalen Produkten ist weit mehr als nur ein technisches Feature – sie ist ein grundlegender Aspekt der inklusiven Gestaltung, der allen Menschen Zugang zu Informationen ermöglichen soll. Barrierefreiheit betrifft uns alle, denn Einschränkungen können temporär oder dauerhaft, physisch oder kognitiv sein und jeden von uns betreffen.

Die steigende Zahl an Menschen mit Behinderungen und die demografische Entwicklung unterstreichen die Relevanz eines inklusiven Designs.

Um digitale Inhalte barrierefrei zu gestalten, bedarf es eines entsprechenden Mindsets, das von Empathie und Verständnis für die Bedürfnisse unterschiedlichster Nutzer:innen geprägt ist. Mit einer Kombination aus technischen Mitteln und einem klaren Bewusstsein für Barrieren können Inhalte für alle zugänglich gemacht werden. Internationale Standards, wie die WCAG 2.2-Richtlinien, geben Orientierung und bieten Anforderungen.

Ein bewusster Umgang mit diesen Richtlinien stellt sicher, dass die digitale Welt ein Stück gerechter und zugänglicher wird – für alle Menschen mit und ohne Behinderungen.

Diesen Artikel teilen:

       

Weitere Artikel zu dem Thema