Barrierefreie Websites, Apps und Shops: Kriterien, Beispiele und Tests

Durch Barrierefreiheit können sich auch Menschen mit eingeschränkten körperlichen oder sensorischen Fähigkeiten via Internet mit den Inhalten, Produkten und Dienstleistungen von Unternehmen beschäftigen. Erfahren Sie hier, mit welchen einfachen Maßnahmen Sie barrierefreie Websites, Apps und Shops für Nutzer gestalten.

In diesem Artikel behandelte Themen

• Barrierefreiheit im Internet: Das sollten Unternehmen beachten und umsetzen
• Guidelines für Barrierefreiheit: BITV & WCAG
• So verbessern Sie die Barrierefreiheit mit einfachen Maßnahmen
• Websites, Web-Apps (PWA) & native Apps (Android/iOS) – worin liegen die Unterschiede?
• Barrierefreies Web: Auf den Punkt gebracht

Ziel des Beitrags: Unternehmen werden für das Thema „Barrierefreiheit im Web“ sensibilisiert – auch in wirtschaftlicher Hinsicht. Sie erhalten Tipps für einfache erste Maßnahmen, um barrierefreie Websites, Apps und Shops zu realisieren.

Barrierefreiheit im Internet: Das sollten Unternehmen beachten und Umsetzen

Es war nie eine gute Idee, Menschen durch zu hohe Barrieren von der Nutzung digitaler Inhalte auszuschließen. Doch heute mehren sich die Gründe, eine Website sowie Apps und Online-Shops endlich nachhaltig barrierefrei umzusetzen: Öffentliche Träger etwa sind sogar verpflichtet, dies alles nach dem Behindertengleichstellungsgesetz (BGG) umzusetzen.

Aber auch Unternehmen sollten dieses wichtige Thema spätestens nach der Einstufung von Google als Ranking-Faktor (sog. Core Web Vitals) angehen. Sonst kann eine Seite über kurz oder lang im Suchergebnis abrutschen und Traffic verlieren – was natürlich schlecht fürs Geschäft ist.

Guidelines für Barrierefreiheit: BITV & WCAG

Neben den internationalen Web Content Accessibility Guidelines (WCAG) werden in Deutschland Tests oft nach der Barrierefreie-Informationstechnik-Verordnung 2.0 (BITV) durchgeführt. Leider folgt die deutsche Verordnung nicht in allen Belangen dem weltweiten Standard – es gibt jedoch sehr viele Übereinstimmungen.

Ein Vergleich beider Verordnungen ist an dieser Stelle äußerst hilfreich (kursiv gesetzte Punkte sind hier wie dort zu finden):

BITV-Test

Der BITV-Test wurde im Jahr 2021 überarbeitet. Falls Sie einen Selbsttest durchführen möchten, verwenden Sie bitte die neue Version.

In der überarbeiteten Fassung finden Sie die folgende Gliederung:

• Allgemeine Anforderungen
• Zwei-Wege-Sprachkommunikation (in der WCAG so nicht enthalten)
• Videofähigkeiten (dito)
• Textalternativen
• Zeitbasierte Medien
• Anpassbar
• Unterscheidbar
• Per Tastatur zugänglich
• Ausreichend Zeit
• Anfälle
• Navigierbar
• Lesbar
• Vorhersehbar
• Hilfestellung bei der Eingabe
• Kompatibel
• Benutzerdefinierte Einstellungen (dito, ggf. über „Conformance Requirements“ abgedeckt)
• Autorenwerkzeuge (dito)
• Dokumentation und Support

WCAG

Obwohl aktuell an der Version 2.2 gearbeitet wird, gilt derzeit noch die WCAG 2.1 (hier in deutscher Sprache). Zur Durchführung eines Selbsttests steht Ihnen der “Website Accessibility Evaluation Report Generator” zur Verfügung.

Die Gliederung der WCAG sieht wie folgt aus:

1 Wahrnehmbar

1.1 Textalternativen

1.2 Zeitbasierte Medien

1.3 Anpassbar

1.4 Unterscheidbar

2 Bedienbar

2.1 Tastaturbedienbar

2.2 Ausreichend Zeit

2.3 Anfälle und körperliche Reaktionen

2.4 Navigierbar

2.5 Eingabemodalitäten

3 Verständlich

3.1 Lesbar

3.2 Vorhersehbar

3.3 Hilfestellung bei der Eingabe

4 Robust

4.1 Kompatibel

5 Konformität 

5.1 Normative Anforderungen interpretieren

5.2 Konformitätsbedingungen

Sie haben sicherlich festgestellt, dass zwischen beiden Verordnungen deutliche Gemeinsamkeiten bestehen. Weitaus deutlichere übrigens, als noch während der alten Version der BITV. Es ist sehr erfreulich, dass es endlich zu einer drastischen Annäherung und grundsätzlichen Vergleichbarkeit gekommen ist.

Für Öffentliche Träger oder Unternehmen sind die einzelnen Prüfschritte allerdings auch heute nicht ausreichend transparent oder in verständlicher Sprache formuliert. Barrierefreiheit etwa bis zu den sogenannten Konformitätsleveln A, AA oder AAA (bei der WCAG) ist ohne ausreichende Expertise kaum zu erreichen, erst recht nicht bei komplexeren Web-Anwendungen, Apps oder E-Commerce-Projekten.

Daher präsentieren wir Ihnen nachfolgend erste, einfache Maßnahmen, mit denen Sie der Barrierefreiheit zumindest ein gutes Stück näher kommen und im Internet insgesamt mehr Menschen bzw. Nutzer erreichen.

So verbessern Sie die Barrierefreiheit mit einfachen Maßnahmen

Redaktion

Ihre Redakteure können mit relativ geringem Aufwand viel für mehr Barrierefreiheit tun:

• Dokumenttitel: Der Titel eines Web-Dokuments steht im sogenannten Title-Tag. Dieser Titel erscheint oben im Browserfenster oder in Suchergebnissen. Screenreader lesen den betreffenden Text zudem vor. Ihre Redakteure sollten daher einen prägnanten Titel vergeben, der den Inhalt der Seite widerspiegelt. 
• Alternativtexte für Grafiken: Der sogenannte Alternativtext für Bilder und Grafiken spielt für Menschen eine wichtige Rolle, wenn sie visuell eingeschränkt sind. Ein Screenreader kann ihnen stattdessen vorlesen, was auf dem jeweiligen Bild zu sehen ist. Vorausgesetzt, Ihre Redakteure haben eine guten und aussagekräftigen Text als Bildbeschreibung hinterlegt.
• Überschriften: Eine Website bietet oft vielfältige visuelle Möglichkeiten, die Gliederung der einzelnen Abschnitte zu erkennen. Menschen, die über einen Screenreader auch navigieren, sind auf eine sinnvolle Dokumentenstruktur angewiesen. Diese beginnt immer mit einer sogenannten H(eadline) 1, enthält in der zweiten Ebene der Hierarchie eine oder mehrere H2 und in der nächsten Ebene H3, H4, H5 und H6. Halten Ihre Redakteure diese Hierarchie ein und verwenden sinnvolle Überschriften, ist Ihr Web-Projekt bereits deutlich barrierefreier für Nutzer.

Design & Funktionalität

Auch Ihr Web-Designer oder -Entwickler kann mit ein paar grundsätzlichen Maßnahmen viel für mehr Barrierefreiheit tun:

• Kontraste: Sprechen Sie Ihren Web-Designer darauf an, im Fließtext und Überschriften auf ausreichend Kontrast zu achten: Dass eine annähernd schwarze Schrift auf weißem Hintergrund funktioniert, sollte klar sein. In weniger eindeutigen Fällen kann ein Kontrast-Checker verwendet werden. Falls Ihr Design nicht ausreichend Kontrast zulässt, können Sie eine spezielle Ansicht hinzufügen, die den Kontrast nach Klick auf eine ausreichend gekennzeichnete Schaltfläche erhöht und den Text besser lesbar macht. 
• Lesereihenfolge: Moderne Layout-Methoden bieten Designern und Entwicklern heute flexible Möglichkeiten, Inhalte zu positionieren und deren Reihenfolge zu ändern. Daher ist es im Sinne der Barrierefreiheit von besonderer Bedeutung, dass die Reihenfolge Ihrer Inhalte auch dann Sinn ergibt, wenn der Text beispielsweise in einem Screenreader vorgelesen wird. 
• Tastaturbedienbarkeit und Tastaturfokus: Wenn eine Bedienung per Maus nicht möglich ist, lässt sich eine Website zum Beispiel mit der Tab-Taste auf einfache Weise bedienen. Dabei ist es wichtig, dass der Nutzer dann immer noch weiß, wo genau er sich auf einer Seite befindet. Ein Tastaturfokus ist ein visuelles Feedback (etwa ein sichtbarer Rahmen oder eine Farbe), mit dem die aktuelle Position auf der Website angezeigt wird. 
• Vergrößerbarkeit: Grundsätzlich können Websites im Browser via STRG+ vergrößert werden. Dabei sollte sich der Text bis auf 200 Prozent zoomen lassen, ohne dass er durch Elemente überdeckt oder überlagert wird. 
• Formulare: In modernen Content-Management-Systemen sollten Formulare weitgehend barrierefrei sein. Sie können Ihren Teil dazu beitragen, indem Sie eine sichtbare Beschriftung, ein Label, vor jedes Formularfeld setzen. 
• Bewegte Inhalte: Bei einem bewegten Element, beispielsweise ein Slider oder Carousel, sollten Sie darauf achten, dass im Falle eines automatischen Bildwechsels ein Bedienelement vorhanden ist, durch das der Ablauf gestoppt werden kann. 
• Videos mit Untertitel: Die meisten Seiten binden Videos über YouTube ein. Hier werden Untertitel in aller Regel automatisch erstellt. Wer dagegen Vimeo nutzt oder Videos selbst hostet, muss die Untertitel selbst erstellen (manuell oder über einen Generator). Mit Amara steht Ihnen eine Untertitelungsplattform zur Verfügung, über die Sie Untertitel für Ihre Videos erstellen können. 

Sie sehen, dass es bereits bei diesen recht einfachen Maßnahmen ein paar wichtige Aspekte zu berücksichtigen gilt. Inwieweit Sie hier vor Herausforderungen gestellt werden, hängt zum Teil von der gewählten Lösung ab (bei Videos etwa davon, ob Sie auf YouTube setzen oder eine alternative Lösung für Sie sinnvoller ist).

Das folgende Video-Tutorial der Chrome Chrome Developers zeigt Ihnen, wie Sie prüfen können, ob Ihre Website barrierefrei ist.

Websites, Web-Apps (PWA) & native Apps (Android/iOS) – worin liegen die Unterschiede?

Besonderheiten bei Web-Apps (PWA)

Grundsätzlich können sowohl native Apps als auch sogenannte Progressive Web-Apps (PWA) barrierfrei realisiert werden. Denken wir einmal an die bereits besprochenen einfachen Maßnahmen wie etwa den Kontrast, Videos mit Untertiteln oder eine ausreichende Schriftgröße.

Da PWA letztlich Websites sind, können wir hier deutlich leichter die Guidelines der oben betrachteten Verordnungen anwenden. Web-Apps lassen sich somit genauso überprüfen und optimieren wie eine gewöhnliche Website.

Besonderheiten bei Online-Shops

Auch bei Online-Shops kommen erst einmal viele Aspekte zur Anwendung, die auch für eine herkömmliche Website von Bedeutung sind. Zusätzliche Aspekte beziehen sich auf die Produktauswahl, den Warenkorb, die Registrierung und Anmeldung, die Zugänglichkeit rechtlicher Informationen und natürlich auch auf den Checkout-Prozess. Da hierbei meist viele Formular- und Bedienelemente eingesetzt werden, kann es einen durchaus hohen Aufwand bedeuten, Shops geräteübergreifend auf Barrierefreiheit zu optimieren.

Beispielsweise öffnet sich in vielen Shops nach dem Klick auf den Warenkorb-Button eine Art Pop-up: Ist dieses Pop-up wirklich per Tastatur zugänglich? Und sind die Bedienelemente ausreichend beschriftet, so dass der Nutzer den Shop auch per Screenreader über die Registrierung bis hin zum Bestellabschluss bedienen kann?

Besonderheiten bei nativen Apps (Android, iOS)

Zweifellos gelten auch für native Apps für Android oder iOS viele Aspekte, die sich für PWAs oder klassische Websites umsetzen lassen. Ein hoher Kontrast und eine ausreichend große Schrift leuchten unmittelbar ein. Auch die Fokus-Reihenfolge gehört zwingend dazu.

Ein nächster wichtiger Punkt ist die Spracheingabe, die Sie bei der Umsetzung einer nativen App berücksichtigen sollten. Screenreader sind mit TalkBack für Android und VoiceOver für Apple-Smartphones (iOS) bereits verfügbar. Aufgabe von Entwicklern ist es nun, die native App so umzusetzen, dass sie via Screenreader bedient werden kann. Im Grunde funktioniert sie auf ähnliche Weise wie auch bei Websites oder Web-Apps. Zum Beispiel geht es auf allen Websites oder Apps darum, unnötige, ja nervtötende Klicks oder Swipers zu minimieren. Denn während sehende Nutzer oft direkt auf das gewünschte Element klicken können, brauchen etwa sehbehinderte oder blinde Nutzer meist einen längeren Weg, um an die gewünschte Stelle zu gelangen.

Das folgenden Video zeigt unter anderem, wie sich die Anzahl an Swipes durch „Content Grouping“ reduzieren lässt (Stelle: 2:22 min):

Ein weiterer wichtiger Aspekt, der ebenfalls in dem Video dargestellt wird, sind „Content Descriptions“. Wie schon in HTML, sollten auch native Apps die Funktion eines Buttons oder von Formularelementen beschreiben. Für die Beschreibungstexte gelten übrigens dieselben Richtlinien wie für Websites. Ein Button etwa sollte auf einer englischsprachigen App mit „Submit“ beschrieben werden, nicht mit „Submit Button“ („Button“ ist überflüssig, da der Nutzer die semantische Information aufgrund des Button-Elements bereits erhält).

Übersicht Accessibility-Funktionen nativer Apps

Uns ging es zunächst darum, Sie für Barrierefreiheit in nativen Apps zu sensibilisieren. Es ist gar nicht so schwer, dieses Thema während der Realisierung für iOS oder Android zu berücksichtigen. Smartphones sind moderne Endgeräte und verfügen über eine sogenannte Assistive Technology.

• Text-to-Speech: Sprachausgabe über Screenreader (TalkBack, VoiceOver) 
• Haptisches Feedback: Fühlbare Rückmeldung des Touch-Screens
• D-Pad-Navigation: Mit Richtungstasten (Directional Keys) navigieren
• Gestenbasierte Navigation: Touch-Gesten wie Fingertipp oder Swipe

Das folgende Video von „Android Developer“ fasst diese Sektion einmal zusammen.

Mehr Barrierefreiheit von nativen Apps ist zwar für viele ein vergleichsweise neues Thema, in seiner Wichtigkeit nimmt es jedoch ganz klar zu. Schließlich sind nach „EU -Richtlinie […] alle die Stellen, die zur Einhaltung der EU-Vorschriften zur Vergabe öffentlicher Aufträge verpflichtet sind, auch zur Barrierefreiheit von Websites und mobilen Anwendungen verpflichtet”. 

Barrierefreiheit für verschiedene Endgeräte

Wenn Sie eine Website, PWA oder native App realisieren, haben Sie es in der Regel mit verschiedenen Endgeräten zu tun: Ist die Schriftgröße auf allen Endgeräten ausreichend? Sind alle Bedienelemente für Nutzer entsprechend zugänglich?

Weil sich Schriftgrößen, Abstände von Buttons, Navigationselemente etc. geräteübergreifend ändern, sollten Tests diese Gegebenheiten immer mit berücksichtigen. Oftmals müssen jedoch bei weitem nicht alle Aspekte für jedes Endgerät durchgespielt werden. Ganz vernachlässigen sollten Sie die Vielfalt von Endgeräten, Browsern und Bildschirmgrößen trotzdem nicht!

Barrierefreie Dokumente (PDF)

PDF werden gerne “vergessen”, wenn es um Barrierefreiheit im Internet geht. Auch wenn viele Altbestände sicherlich nicht im Nachhinein optimiert oder gar neu erstellt werden können, sollte Barrierefreiheit zumindest bei der Erstellung neuer Dokumente unbedingt berücksichtigt werden. Die bekannten einfachen Maßnahmen wie Kontrast oder Schriftgröße können eins zu eins auch auf PDF angewendet werden. Und ja, auch Alternativtexte für Bilder können in diesen Dokumenten hinterlegt werden.

Barrierefreie PDF können Sie übrigens in diversen Programmen erstellen, etwa in Microsoft Word, LaTeX oder InDesign. Die Art und Weise, wie Barrierefreiheit hergestellt wird, kann von Programm zu Programm sehr unterschiedlich sein (Absatzformate spielen etwa in InDesign eine Rolle bei den Überschriften, bei Word sind es die Formatvorlagen).

Barrierefreies Internet: Auf den Punkt gebracht

Sie haben nun einen Eindruck bekommen, worin sich eine klassische Seite im Internet von barrierefreien Online-Shops oder Apps unterscheidet. Zusätzlich haben wir Sie für das oft vergessene Thema PDF sensibilisiert. Damit sind Sie nun in der Lage, erste Maßnahmen durchzuführen, um schnell bestehende Barrieren beispielsweise für Menschen mit stark eingeschränktem Sehvermögen aus dem Weg zu räumen. Etwa indem Sie sicherstellen, dass für diese Nutzer hilfreicher Text wie zum Beispiel bei Bildbeschreibungen zugänglich ist, den sie sich per Screenreader vorlesen lassen können. Hinzu kommt aber auch, dass Ihr Unternehmen so eine wichtige Ranking-Voraussetzung bei Google erfüllt!

Kurzum, eine barrierefreie Seite oder Anwendung hilft nicht nur den von Einschränkungen betroffenen Menschen, sondern ist für Sie immer auch ein wirtschaftlicher Erfolgsfaktor.

In Ihrer Redaktion sehen wir den ersten ersten Anlaufpunkt. Dort lässt sich in der Regel vieles umsetzen, was auch in der BITV oder den WCAG wichtig ist. Doch wer auf lange Sicht barrierefrei sein will, braucht eine eingespielte Redaktion, die entsprechende redaktionelle Maßnahmen beständig umsetzt.

Wir wissen nicht, ob Sie später einen der angesprochenen Tests durchführen. Es ist sicherlich lohnend, sich beide Verfahren einmal anzusehen. Immerhin haben sich beide Standards einander zuletzt stark angenähert. In unserem Beitrag haben wir Ihnen daher die grundsätzlichen Übereinstimmungen verdeutlicht und aufgezeigt. Ziel war es, Ihnen einen guten Überblick über das Thema “Barrierefreie Websites, Apps und Shops” zu ermöglichen.

Wenn Sie Fragen zu Barrierefreiheit rund um Websites, Online-Shops und Apps haben oder sich für eine Einschätzung zu Ihrem Projekt interessieren, sprechen Sie uns gerne an.

<< Zur Übersicht