Leitfaden für digitale Barrierefreiheit

Das Wichtigste auf einen Blick

• Durch Barrierefreiheit im Internet sollen Menschen mit Behinderungen gleichberechtigt am digitalen Leben teilhaben können. Dabei werden zahlreiche Menschen früher oder später einmal auf barrierefreie Online-Angebote angewiesen sein.

• Die Web Content Accessibility Guidelines (WCAG) definieren vier Prinzipien für die Zugänglichkeit im Web: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Abgeleitet von den vier Prinzipien werden 78 Kriterien bestimmt, die drei unterschiedlichen Konformitätsstufen (A, AA und AAA) zugeteilt sind.

• Bei der Realisierung barrierearmer Internetauftritte sind viele verschiedene Bereiche von Bedeutung. Um digitale Barrierefreiheit ganzheitlich sicherzustellen, sollten Expert*innen aus den Bereichen Entwicklung, Design und Content daher eng zusammenarbeiten.

• Mit unserem Accessibility-Audit unterstützen wir beim Minimieren digitaler Barrieren. Sie erfahren, wie es um die Barrierefreiheit Ihrer Online-Präsenz gestellt ist und können gezielt Verbesserungen vornehmen. Eine erste Einschätzung zur Barrierefreiheit Ihrer Website erhalten Sie mit unserem kostenlosen, automatisierten Accessibility-Schnellcheck.

Was bedeutet „barrierefrei“ im digitalen Raum?

Nicht nur Gebäude oder Transportmittel, sondern auch das Web weisen verschiedene Arten von Barrieren auf, die den Zugang erschweren oder sogar unmöglich machen können. Eine barrierearme Onlinepräsenz soll es sämtlichen Nutzer*innen – unabhängig ihrer Einschränkungen – ermöglichen, eigenständig eine Website, Software oder ein digitales Dokument zu nutzen. Um eine ganzheitliche Zugänglichkeit sicherzustellen, müssen dabei visuelle, auditive, kognitive und motorische Barrieren berücksichtigt werden.

Eine barrierefreie Website kommt allen zugute

Barrierefreiheit im Web hilft Menschen mit Behinderungen, selbstbestimmt am digitalen Leben teilnehmen zu können. Zahlreiche Maßnahmen, die der Minimierung von Barrieren dienen – zum Beispiel deutliche Kontraste, konsistente Strukturen oder hilfreiche Fehlermeldungen – kommen dabei sämtlichen Nutzer*innen zugute und verbessern die Usability insgesamt.

Auch gewinnt ein barrierefreier digitaler Raum nicht zuletzt angesichts einer älter werdenden Gesellschaft an Bedeutung. Außerdem ist zu bedenken, dass Einschränkungen unterschiedlichen Ursprungs sein können und viele von uns früher oder später einmal auf barrierefreie Online-Angebote angewiesen sein werden. Es wird zwischen folgenden Kategorien unterschieden:

• Permanente Einschränkung: Eine permanente Sehbehinderung erfordert beispielsweise einen Screenreader.

• Temporäre Einschränkung: Eine Verletzung der Hand kann die Nutzung einer Maus behindern. Die Tastatursteuerung ermöglicht in solchen Fällen, weiterhin die Navigation zu bedienen.

• Situative Einschränkung: Laute Umgebungen setzen voraus, dass Videos untertitelt sind.

Weitere spannende Einblicke: Barrierefreie Website: In 7 Schritten zur besseren Accessibility und SEO-Performance

Wie wird digitale Barrierefreiheit definiert?

Die Web Content Accessibility Guidelines (WCAG) – ein internationaler Standard für Barrierefreiheit digitaler Angebote – umfassen vier Prinzipien für die Zugänglichkeit im Web:

• Informationen und Funktionen müssen wahrnehmbar sein.

• Die IT-Lösung muss bedienbar sein.

• Inhalte müssen verständlich sein. 

• Inhalte müssen robust, also mit unterschiedlichen Technologien wie Browsern und assistiven Technologien kompatibel sein.

Mit Ausgangspunkt in diesen vier Prinzipien definieren die WCAG 78 Kriterien für digitale Barrierefreiheit, die wiederum in drei Konformitätsstufen, A, AA und AAA, klassifiziert sind. Um gute digitale Zugänglichkeit zu schaffen, sollte das zweite Level (AA) berücksichtigt werden.

Individuelle Faktoren sind entscheidend

Wichtig ist, sich vor Augen zu führen, dass es in Bezug auf digitale Barrierefreiheit keine One-size-fits-all-Lösung gibt. Denn individuelle Voraussetzungen – etwa die Ausgangssituation des bestehenden Webauftritts sowie die Zielsetzung beziehungsweise gewünschte Konformitätsstufe – sind verschieden. Daher kann sich auch der konkrete Weg zu mehr Barrierefreiheit von Fall zu Fall unterschiedlich gestalten.

Vielfältige, konsistente und autonome Anwendbarkeit

• Ein flexibles, responsives Design und relative Größeneinheiten sorgen für Geräteunabhängigkeit und passen sich, unter anderem beim Zoomen, den Wünschen der Nutzer*innen an.

• Die Kompatibilität für Assistenztechnologien sowie die Tastatur-Zugänglichkeit müssen sichergestellt werden. Elemente ohne sichtbaren Text, wie Schaltflächen oder Icons, sollten via ARIA-Attribut für Screenreader zugänglich gemacht werden.

• Semantisches HTML für Überschriften, Links, Buttons, Bilder, Aufzählungen, Tabellen, Sprache und andere eingesetzte HTML-Elemente müssen bei der Programmierung berücksichtigt werden.

• Komponenten müssen sich logisch verhalten, sodass Erwartungen erfüllt und keine unerwarteten Kontextänderungen ausgelöst werden. HTML-Elemente müssen dafür entsprechend ihrer Funktion ausgewählt werden.

• Geräusche und Animationen sollten aus- und eingeschaltet werden können. Auf flackernde oder blinkende Elemente sollte verzichtet werden.

• Es sollten keine zeitsensitiven Elemente enthalten sein, die Benutzer*innen eine begrenzte Zeitspanne zum Abschluss von Aktionen geben.

Struktur und gute Nutzer*innenführung

• Eine saubere Website-Struktur sorgt dafür, dass Inhalte leicht zu finden sind, die Navigation klar ist und Besuchende sich auf der Internetseite zurechtfinden. Zusätzlich zur Navigation kann eine Suchfunktion integriert werden.

• Einheitliche Beschreibungen für Menüpunkte, Elemente wie Buttons oder Formularfelder sowie eine feste Platzierung der Navigation und Hilfsangebote erleichtern die Orientierung.

• Korrekte Überschriftenhierarchien helfen Screenreadern dabei, eine Seite zu interpretieren.

• Mit textlichen Fehlermeldungen und Anweisungen zur Korrektur werden Nutzer*innen bei der Vermeidung und Behebung von Fehlern unterstützt.

• Es sollten keine Wiederholungen von zum Beispiel Anmeldevorgängen seitens der Nutzer*innen nötig sein.

Gut erkennbare Darstellung

• Eine serifenlose Schriftart, bei der sich die Buchstaben gut voneinander unterscheiden, sorgt für gute Lesbarkeit. Fließtext sollte linksbündig platziert sein, es sollte auf einen großzügigen Zeilenabstand geachtet werden und bei längeren Texten auf Versalien (Großbuchstaben) verzichtet werden.

• Texte, Schaltflächen, Links und andere aktive Komponenten müssen groß genug sein, um gut erkannt und durch Berührung aktiviert werden zu können.

• Text und andere wichtige Elemente sollten ein gutes Kontrastverhältnis (mindestens 4,5:1) zum Hintergrund aufweisen und Verlinkungen sollten optisch hervorgehoben werden.

• Farben sollten niemals als einziges Mittel zur Übermittlung von Informationen oder zur Identifizierung von Inhalten genutzt werden.

• Formularfelder sollten zusätzlich durch Beschreibungen gekennzeichnet sein.

• Bilder sollten keine wichtigen Informationen enthalten.

Verständlicher Inhalt

• Verständliche Texte und übersichtlich aufbereitete Informationen mit Überschriften, die den Inhalt beschreiben, sind essenziell für ein gutes Verständnis.

• Durch Gebärdensprache und Leichte Sprache können sich auch gehörlose Menschen sowie Menschen mit Lern-Schwierigkeiten auf einer Internetseite informieren.

• Mit alternativen Darstellungsformen wie Untertiteln, Audiodeskriptionen oder Textalternativen für Videos sowie Textalternativen für Audios werden unterschiedliche Sinne angesprochen.

• Es sollten klare Linktexte statt generelle Formulierungen wie „mehr lesen" verwendet werden. So wissen Nutzer*innen, was sie erwartet. Werden versteckte Texte für Screenreader integriert, müssen diese genauso beginnen wie der sichtbare Text.

• Durch Alt-Attribute können blinde Menschen den Inhalt von Bildern und anderen grafischen Elementen erschließen. Rein dekorative Bilder ohne informativen Inhalt sollten mit einem leeren Alt-Attribut vor Screenreadern versteckt werden.

• Auch Formulare und Dokumente müssen Anforderungen der Barrierefreiheit erfüllen.

Weitere spannende Einblicke: Barrierefreiheitsstärkungsgesetz: Fristen, Pflichten und warum es wichtig ist

Fazit 

Die Realisierung einer barrierefreien Onlinepräsenz, die wahrnehmbar, bedienbar, verständlich und robust im Sinne der WCAG ist, stellt vielfältige Anforderungen an Entwicklung, Design und Content und setzt auf diese Weise breit gefächertes Expert*innenwissen und eine enge Zusammenarbeit unterschiedlicher Fachgebiete voraus.

Dabei besteht das primäre Ziel darin, eine breite Zugänglichkeit sicherzustellen und zu gewährleisten, dass möglichst viele Menschen – unabhängig von individuellen Voraussetzungen oder Einschränkungen – das digitale Angebot nutzen können. Dies geschieht zum einen dadurch, dass bestehende Barrieren minimiert werden; zum anderen dadurch, dass alternative Möglichkeiten geboten werden, um Inhalte zu erfassen und Aktionen auszuführen. Denn so wird die Autonomie der Nutzer*innen gewahrt.

Sie wünschen sich einen möglichst barrierearmen Internetauftritt?

Wer etwas verbessern möchte, sollte sich einen soliden Überblick der Ausgangssituation verschaffen. Einen ersten Eindruck vom Stand der Barrierefreiheit Ihrer Website erhalten Sie mit unserem kostenlosen, automaisierten Accessibility-Schnellcheck. Gerne nehmen wir Ihre aktuelle Onlinepräsenz unter die Lupe, analysieren Schwachstellen hinsichtlich der digitalen Barrierefreiheit, geben Handlungsempfehlungen zur gezielten Optimierung und unterstützen aktiv bei der Fehlerbehebung. 

Zu unserem Accessibility-Audit