Markus Lemcke 17. März 2020

Barrierefreie Entwicklung von Webseiten, Software und Apps

Die Blindenschrift wird auch Braille genannt. © Adobe: Negro Elkha / stock.adobe.com / 281444018 — © Adobe: Negro Elkha

Die Barrierefreiheit in der Informatik gibt es offiziell seit 01.05.2002. An diesem Tag ist das Gesetz zur Gleichstellung von Menschen mit Behinderungen in Kraft getreten. In dieser Fassung war nur von der Barrierefreiheit bei Webseiten und Programmen die Rede. Im Jahr 2016 ist das Behindertengleichstellungsgesetz überarbeitet worden. Seitdem ist auch die Barrierefreiheit bei Apps Bestandteil dieses Gesetzes.

Warum ist barrierefreie Entwicklung von Webseiten, Software und Apps wichtig?

In Deutschland gibt es 7,8 Millionen schwerbehinderte Menschen und rund 17,5 Millionen Menschen, die 65 Jahre oder älter sind [1]. Ältere Menschen bekommen aufgrund ihres fortgeschrittenen Alters körperliche Einschränkungen, welche Sie beim Bedienen von Webseiten, Programmen und Apps beeinträchtigen. Beide Personengruppen sind daran interessiert, dass Webseiten, Programme und Apps barrierefrei entwickelt werden. Diese Menschen sind potentielle Kunden. Diese Tatsache ist für Inhaber von Webshops scheinbar häufig nicht von Bedeutung.

Ein weiterer Grund ist die gesellschaftliche Entwicklung. Seit 2008 gibt es die UN-Behindertenrechtskonvention [2]. Sie beinhaltet einen allgemeinen Artikel über Barrierefreiheit. In diesem Artikel wird auch die Barrierefreiheit in der Informatik erwähnt. Seit Oktober 2016 gibt es die EU-Richtlinie 2016/2102 des europäischen Parlaments und des Rates [3]. In dieser Richtlinie geht es um den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen.

Allgemeines zu Richtlinien

Egal ob Webseiten, Software oder Apps barrierefrei entwickelt werden sollen – damit dies umgesetzt werden kann, benötigt es Richtlinien. Diese Richtlinien beinhalten Prüfungsschritte, welche durchgeführt werden müssen. Die Zusammenstellung der Prüfungsschritte hat das Ziel, dass bei der Bedienung von Webseiten, Software und Apps auf möglichst alle körperlichen Einschränkungen Rücksicht genommen wird. Leider gibt es nur für die Barrierefreiheit bei Webseiten internationale Richtlinien. Sie heißen Web Content Accessibility Guidelines (WCAG)2.1 [4].

Bei der barrierefreien Softwareentwicklung gibt es keine einheitlichen Richtlinien. Hier gibt es Richtlinien von Oracle, Microsoft und IBM. Grundsätzlich gibt es viele Gemeinsamkeiten zwischen den Richtlinien, es gibt aber auch deutliche Unterschiede. Wünschenswert ist, dass es Richtlinien gibt, die für barrierefreie Softwareentwicklung mit allen Programmiersprachen gültig sind.

Für die barrierefreie Appentwicklung gibt es Richtlinien von Google und Apple. Diese sind ebenso ähnlich aber nicht gleich. Seit 2016 gibt es die progressive Web App als Alternative zur native App. Da progressive Web Apps im Grunde mobile Webseiten mit Funktionalitäten sind, kann hier die Richtlinie zur barrierefreien Webentwicklung angewandt werden.

Wichtige Begriffe erklärt

Hier werden einige Begriffe erklärt, die für das Verstehen des Artikels wichtig sind.

Was ist ein Screenreader?

Der Begriff Screenreader wird in diesem Artikel mehrfach vorkommen, deswegen macht es Sinn, diesen Begriff zu erklären. Ein Screenreader ist ein Bildschirmleseprogramm. Wenn ein Mensch blind oder sehbehindert ist, heißt das nicht, dass er nicht am PC/Laptop arbeiten kann. Der Screenreader "spielt" für den blinden oder sehbehinderten Menschen die Augen und liest den Bildschirminhalt. Die Vermittlung der Informationen auf dem Bildschirm kann dabei auf zwei verschiedene Arten geschehen:

Akustisch (über eine Soundkarte) oder
Taktil (über eine Braillezeile (s. u.)).

Wenn der gelesene Text über die Soundkarte ausgegeben wird, heißt das, dass der Text dem blinden oder sehbehinderten Menschen vorgelesen wird. Im Fall der Braillezeile kann der Nutzer den Inhalt selbst in Blindenschrift mit den Fingern ertasten. Da Screenreader in unterschiedlichen Betriebssystemen anders heißen, hier eine kurze Auflistung:

Betriebssystem	Name des Screenreaders	Wo finden Sie den Screenreader?
Windows	Sprachausgabe	Einstellungen/Erleichterte Bedienung
IOS	Voice Over	Einstellungen/Bedienungshilfen
Android	Talkback	Einstellungen/Bedienungshilfen oder Eingabehilfe
Ubuntu	Bildschirmleser	Einstellungen/Zugangshilfen

Der Screenreader, den die meisten blinden Menschen nutzen, ist das zahlungspflichtige Jaws. Der Screenreader NVDA kann kostenlos heruntergeladen werden [6].

Was ist eine Braillezeile?

Die Braillezeile wird auch Zeile oder Brailledisplay genannt. Die Braillezeile ist ein Computerausgabegerät, welches Zeichen in Blindenschrift übersetzt. Die Blindenschrift wird auch Braille genannt. Üblicherweise werden sie durch Screenreader angesteuert, die Zeichen in ausgewählten Bildschirmbereichen auslesen und in Computerbraille darstellen. Die Braillezeile ermöglicht blinden und sehbehinderten Menschen die Nutzung von Computern und Laptops. Die Zeichen der Brailleschrift werden mit Stößeln dargestellt, welche der Nutzer einer Braillezeile mit den Fingern ertasten kann.
Sechs Punkte, drei in der Höhe mal zwei Punkte in der Breite, bilden das Raster für die Punkte-Kombinationen, mit denen die Zeichen (Buchstaben, Ziffern, Leerzeichen, …) dargestellt werden. Bei sechs (binären) Punkten ergeben sich 2⁶ = 64 Variationen; es sind also 64 verschiedene Zeichen darstellbar. Da für die Arbeit am Computer mehr Zeichen notwendig sind, als sich mit sechs Punkten darstellen lassen, werden bei der Braillezeile noch zwei weitere Punkte je Braillezeichen hinzugefügt.

Farbsehschwäche / Farbfehlsichtigkeit

Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht immer den richtigen Farbnamen zuordnen können. Ebenso fehlt diesen Menschen das Gefühl, welche Farben zusammenpassen. Menschen mit einer Farbfehlsichtigkeit haben Probleme, wenn eine Webseite oder eine Software einen dunklen Hintergrund und eine dunkle Schrift oder einen hellen Hintergrund und eine helle Schrift hat.

Was ist der Colour Contrast Analyser?

Der "Colour Contrast Analyser" ermöglicht Ihnen, Probleme beim Farb-Text-Kontrast einer Webseite unter WCAG 2-Anforderungen zu analysieren. Unter verschiedenen Kriterien wie Grün-, Rot- oder Blaublindheit können Ihnen Fotos, ganze oder Teile von Internetseiten sowie PDF-Dokumente simuliert werden. Als Ergebnis wird angezeigt, ob die Konformitätsstufe und das Kontrastverhältnis von Vorder- und Hintergrund stimmt.

Barrierefreies Webdesign

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie für alle Menschen – auch für Menschen mit Behinderungen oder anderen körperlichen Einschränkungen – bedienbar ist.

Zur Zeit findet in Sachen Richtlinien für barrierefreies Webdesign ein Übergang statt: Die deutsche Richtlinie (BITV 2) [7] wird abgelöst durch eine europäische Richtlinie. In diesem Artikel wird die Internationale Richtlinie WCAG 2.1 erläutert.

Die vier Prinzipien von barrierefreien Webdesigns

Die Richtlinien und Erfolgskriterien basieren auf den folgenden vier Prinzipien, welche die Grundlage für den Zugriff auf und die Verwendung von Webinhalten bilden. Jeder, der das Web nutzen möchte, muss über folgende Inhalte verfügen:

Wahrnehmbar – Informations- und Benutzeroberflächenkomponenten müssen den Benutzern so präsentiert werden können, wie sie sie wahrnehmen können. Dies bedeutet, dass Benutzer in der Lage sein müssen, die präsentierten Informationen wahrzunehmen (sie dürfen nicht für alle Sinne unsichtbar sein).
Bedienbar – Komponenten der Benutzeroberfläche und Navigation müssen bedienbar sein. Dies bedeutet, dass Benutzer in der Lage sein müssen, die Schnittstelle zu bedienen (die Schnittstelle darf keine Interaktion erfordern, die ein Benutzer nicht ausführen kann).
Verständlich – Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein. Dies bedeutet, dass Benutzer in der Lage sein müssen, die Informationen sowie die Funktionsweise der Benutzeroberfläche zu verstehen (der Inhalt oder die Bedienung darf nicht außerhalb ihres Verständnisses liegen).
Robust – Inhalte müssen robust genug sein, damit sie von einer Vielzahl von Benutzeragenten, einschließlich unterstützender Technologien, zuverlässig interpretiert werden können. Dies bedeutet, dass Benutzer mit fortschreitenden Technologien auf den Inhalt zugreifen können müssen (wenn sich Technologien und Benutzeragenten weiterentwickeln, sollte der Inhalt zugänglich bleiben).

Wenn einer dieser Punkte nicht zutrifft, können Benutzer mit Behinderungen das Web nicht nutzen.

Unter jedem der Prinzipien befinden sich Richtlinien und Erfolgskriterien, die dazu beitragen, diese Prinzipien für Menschen mit Behinderungen anzugehen. Es gibt viele allgemeine Richtlinien zur Benutzerfreundlichkeit, die Inhalte für alle Menschen, einschließlich Menschen mit Behinderungen, benutzerfreundlicher machen. In der WCAG 2.1 befinden sich jedoch nur die Richtlinien, die sich speziell mit Problemen von Menschen mit Behinderungen befassen. Dies schließt Probleme ein, die den Zugriff auf das Web blockieren oder den Zugriff auf das Web für Menschen mit Behinderungen stärker beeinträchtigen.

Eine Auswahl der Prüfschritte der WCAG

Nachfolgend wird eine Auswahl an Prüfschritten der WCAG erläutert.

Prüfschritt: Alternativtexte für Grafiken und Objekte
Nicht verlinkte informationsorientierte Grafiken und Bilder müssen mit Alternativtexten versehen werden. Die Alternativtexte ersetzen das Bild, sie sollen also (wenn möglich) dieselbe Aufgabe erfüllen wie das Bild.
Bei eingebundenen Multimedia-Objekten, Video- beziehungsweise Audio-Dateien oder Applets soll der Alternativtext zumindest eine beschreibende Identifizierung des Inhalts ermöglichen. Thema dieses Prüfschritts sind auch Textalternativen für Hintergrundbilder, Icon Fonts und SVGs, sofern diese nicht verlinkt sind.
Für blinde Benutzer oder für Benutzer von einfachen Textbrowsern sind Grafiken und Bilder nicht zugänglich. Die Textalternative tritt dann an die Stelle der Grafik, sie soll die Grafik ersetzen.
Prüfschritt: Alternativen für Audiodateien und stumme Videos
Audiodateien und stumme Videodateien, die Informationen vermitteln, müssen mit gleichwertigen Medienalternativen versehen werden – es sei denn, es handelt sich bei ihnen bereits um Medienalternativen für Text. Audiodateien sind für hörbehinderte Nutzer nicht oder nur eingeschränkt zugänglich, deshalb brauchen sie eine Transkription. Stumme Videodateien (etwa eine Film- oder Animationsequenz, die zeigt, wie ein Gerät zusammengesetzt wird) sind für blinde und sehbehinderte Nutzer nicht verfügbar. Sie brauchen deshalb eine vollwertige Medienalternative (Text oder Audiodatei).
Prüfschritt: HTML-Strukturelemente für Überschriften
Überschriften müssen korrekt mit den HTML-Strukturelementen h1 bis h6 ausgezeichnet sein und die Inhalte der Seite erschließen. Visuell werden Webseiten-Inhalte durch Überschriften strukturiert. Dank dieser Strukturierung weiß der Benutzer, was zusammengehört, kann die Inhalte der Webseite leicht überblicken und gezielt auf Inhalte zugreifen, die ihn interessieren.
Prüfschritt: Kontraste von Texten ausreichend
Alle Texte der Seite sollen ausreichende Helligkeitskontraste haben. Sie sollen auch für farbfehlsichtige Benutzer wahrnehmbar sein. Bei Seiten, die eine ausreichend kontrastreiche Version über einen Styleswitcher anbieten, wird auch geprüft, ob der Ausgangszustand Mindestanforderungen an Schriftkontrasten erfüllt. Im Zweifel den Contrast Analyser öffnen. Schriftfarbe und Hintergrundfarbe auswählen und Kontrastverhältnis prüfen.
Prüfschritt: Text auf 200 Prozent vergrößerbar
Text soll um bis zu 200 Prozent geändert werden können, ohne dass dabei Inhalt oder Funktionalität verloren geht. Eine der folgenden Voraussetzung soll erfüllt sein:
- Mit der Zoom-Funktion des Browsers kann das gesamte Layout proportional zur Schriftgröße vergrößert werden.
- Mit der Nur-Text-Vergrößerung im Browser kann der Text vergrößert werden.
- Über ein Bedienelement der Seite kann die Schriftgröße vergrößert werden.
Prüfschritt: Ohne Maus nutzbar
Die Webseite soll auch ohne Maus – also ausschließlich mit der Tastatur – zu benutzen sein. Die Bedienung soll geräteunabhängig möglich sein. Das bedeutet: Sie muss sowohl mit der Maus als auch mit der Tastatur möglich sein. Denn auch andere Spezialgeräte verhalten sich so wie eine Maus oder wie eine Tastatur.
Probleme gibt es meistens mit der Tastaturbedienung, denn die Mehrzahl der Webnutzer arbeitet mit der Maus, daher werden oft auch nur diese bedacht. Auf die Tastaturbedienbarkeit angewiesen sind zum Beispiel viele motorisch eingeschränkte Menschen oder Blinde.
Prüfschritt: Bewegte Inhalte abschaltbar
Ablenkung durch blinkende oder sich bewegende Elemente soll vermieden werden, auf 5 Sekunden begrenzt sein oder abschaltbar sein.
Bewegte oder automatisch aktualisierte Inhalte, z. B. periodisch wechselnde Nachrichten-Aufmacher (Teaser) sollen zum Lesen anhaltbar sein.
Viele Benutzer haben Schwierigkeiten, Seiten zu nutzen, die mit blinkenden oder sich bewegenden Elementen (zum Beispiel Werbung) ausgestattet sind. Solche Elemente lenken ab. Der Benutzer kann sich möglicherweise nicht auf andere Elemente des Webauftritts konzentrieren. Viele Benutzer haben außerdem Schwierigkeiten, blinkende oder bewegte Inhalte zu lesen, etwa bei Newstickern. Schließlich können interaktive bewegte Inhalte für Benutzer mit motorischen Einschränkungen problematisch sein.

Korrekte Syntax

Die verwendete Markup-Sprache HTML muss korrekt eingesetzt werden. Dabei muss für jedes Element folgendes gewährleistet sein:

Sie besitzen vollständige Start- und Endtags,
sie sind gemäß Spezifikation korrekt verschachtelt,
sie enthalten keine doppelten Attribute und
alle ihre IDs sind eindeutig, außer dort, wo die Spezifikationen etwas anderes erlauben.

Die korrekte Syntax kann mit dem W3C-Validator überprüft werden [8].

Barrierefreie Softwareentwicklung

Barrierefreie Softwareentwicklung bedeutet, dass eine Software so gestaltet ist, dass sie für alle Menschen – auch für Menschen mit Behinderungen oder anderen körperlichen Einschränkungen – bedienbar ist. Um barrierefreie Software entwickeln zu können, muss es möglich sein, der Programmoberfläche Texte zu hinterlegen, die ein Screenreader vorliest. Die hinterlegten Texte müssen die Oberfläche der Software beschreiben bzw. erklären. Der blinde Mensch muss sich durch diese beschreibenden Texte die Programmoberfläche vorstellen können.

Zur Zeit gibt es zwei Programmiersprachen, welche diese Möglichkeit zur Verfügung stellen:

Dotnet bzw. C# (Winform und WPF)
Java (Java Swing und JavaFX)

Damit eine Software als barrierefrei bezeichnet werden kann, müssen ebenfalls bestimmte Kriterien erfüllt sein. Nachstehend werden die Kriterien betrachtet, die auf der Webseite von Microsoft zu finden sind.

Wie wird eine Programmoberfläche screenreader-tauglich?

Damit ein Screenreader seinem Nutzer die Programmoberfläche vorlesen kann, müssen in den Oberflächenkomponenten Texte hinterlegt sein, welche die Oberflächenkomponenten beschreiben. Ein Eingabefeld für den Vornamen einer Person bekommt zum Beispiel den Text "Geben Sie den Vornamen" ein. Dieser Text wird von der Screenreader-Software vorgelesen oder an die Braillezeile geschickt. Dadurch weiß ein blinder Nutzer, was er in dieses Eingabefeld eintragen muss.

Unterstützung der Systemsteuerungseinstellungen für Größe, Farbe, Schriftart und Eingabe

Menschen mit einer Sehbehinderung können in Betriebssystemen wie Windows oder Ubuntu die Systemschrift vergrößern. Damit diese Änderung Sinn macht, sollten Programme in der Lage sein, diese Systemschrift zu übernehmen. Ebenso muss geprüft werden, ob nach Übernahme der vergrößerten Systemschrift alle Bedienelemente vom Software-Nutzer bedient werden können.

Wenn der Software-Nutzer im Betriebssystem ein anderes Farbschema auswählt, muss die Software in der Lage sein, dieses Farbschema zu übernehmen.

Unterstützung für den Modus für hohe Kontraste

In vielen Betriebssystemen kann ein hoher Kontrast eingestellt werden. Der hohe Kontrast wird von Menschen mit einer starken Sehbehinderung oder Menschen mit Farbsehschwäche genutzt. Eine Software muss in der Lage sein, diesen hohen Kontrast zu übernehmen.

Um eine Computermaus gezielt bewegen zu können, ist es notwendig, dass ein Anwender sehen kann!

Bereitstellen von dokumentierten Tastaturzugriffen auf alle Features

Blinde Menschen oder Menschen mit einer starken Sehbehinderung können keine Computermaus nutzen. Um eine Computermaus ganz gezielt an eine bestimmte Stelle auf dem Bildschirm bewegen zu können, ist es zwingend notwendig, dass ein Anwender sehen kann!

Deswegen ist es wichtig, dass eine Software ohne Computermaus, also nur per Tastatur bedienbar ist. Das bedeutet, dass alle Bedienelemente durch mehrmaliges Drücken der Tabulatortaste erreichbar sein müssen. Zusätzlich sollten wichtige Programmfunktionen per Tastaturkürzel erreichbar sein. Bekannte Tastaturkürzel sind Strg+N für Datei/Neu oder Strg+O für Datei öffnen. Die Tastaturkürzel sollten in der Programmhilfe aufgelistet werden oder im Programmfenster dokumentiert werden.

Visuelle und programmgesteuerte Anzeige der Position des Tastaturfokus

Es gibt Programmfenster mit vielen Eingabefeldern, etwa eine Eingabemaske zur Adressenverwaltung. In Eingabefeldern wird der Textcursor nur als senkrechter Strich dargestellt. Das ist für Menschen mit einer starken Sehbehinderung ein Problem. Da der senkrechte Strich schlecht zu sehen ist, können sie nicht erkennen, in welchem Eingabefeld sich der Textcursor befindet. Um das Problem zu lösen, sollte das aktive Eingabefeld eine andere Hintergrundfarbe bekommen. Hierfür eignet sich die Farbe Gelb. Bedienelemente wie aufklappbare Listen oder Radiobuttons sollten ebenfalls eine gelbe Hintergrundfarbe bekommen, wenn diese aktiv sind.

Vermeiden, dass wichtige Informationen ausschließlich akustisch übermittelt werden

Ein gutes Beispiel hierfür sind Sprachassistenten, zum Beispiel Siri. Siri reagiert auf Sprachkommandos immer mit Sprachausgabe. Sprachausgabe ist für gehörlose Menschen nicht wahrnehmbar. Das bedeutet, dass gehörlose Menschen Sprachassistenten überhaupt nicht nutzen können. Deswegen sollte Software immer so entwickelt werden, dass es eine Alternative zur akustischen Information gibt, zum Beispiel Meldungsfenster.

Barrierefreie Appentwicklung

Barrierefreie Appentwicklung bedeutet, dass eine App so gestaltet ist, dass sie für alle Menschen – auch für Menschen mit Behinderungen oder anderen körperlichen Einschränkungen – bedienbar ist.

Die barrierefreie Appentwicklung ist in der Gesellschaft noch nicht angekommen. Deswegen gibt es sehr wenig Informationen zu diesem Thema. Hier werden die wichtigsten Punkte beleuchtet.

Screenreadertauglichkeit

Eine Appoberfläche sollte von den Screenreadern Talkback [9] und Voice Over [10] vorgelesen werden können. Hierfür müssen der Appoberfläche Texte hinterlegt werden, die dem Screenreader-Nutzer erklären, wie die Appoberfläche aufgebaut.

Zoomfähigkeit

Menschen mit einer Sehbehinderung oder einer altersbedingten Seheinschränkung haben Probleme beim Lesen von kleinen Buchstaben. Deswegen sollte es möglich sein, die App-Oberfläche mit der üblichen Fingergeste zu vergrößern. Für Menschen mit einer motorischen Einschränkung ist es ebenfalls wichtig, dass die App-Oberfläche zoomfähig ist, weil so die Fläche von Bedienelementen vergrößert werden kann.

Farbkontrast

Hier gilt genau das gleiche wie bei Webseiten und Programmen. Es muss auf einen guten Farbkontrast zwischen Hintergrund- und Schriftfarbe geachtet werden.

Große einfache Bedienelemente

Die Benutzeroberfläche Ihrer App ist einfacher zu verwenden, wenn sie Steuerelemente enthält, die leichter zu sehen und zu tippen sind. Deswegen sollte jedes interaktive UI-Element einen fokussierbaren Bereich oder eine Touch-Zielgröße von mindestens 48✕48 dp haben, noch größer ist aber besser. Außerdem benötigt jedes UI-Element in Ihrer App eine Beschreibung, die den Zweck des Elements beschreibt.

Übernehmen von Betriebssystemeinstellungen

Wenn im Betriebssystem, zum Beispiel Android, eine große Systemschrift eingestellt ist, dann sollten die Apps diese Systemschrift übernehmen. Beispiel: Ein Nutzer mit Sehbehinderung nutzt eine Bundesliga-App. Wenn dieser Nutzer die Bundesliga-App startet, dann hat er den Wunsch, dass die Bundesliga-App die große Systemschrift übernimmt. Wenn das Betriebssystem Farbeinstellungen oder Kontrasteinstellungen anbietet, sollten Apps auch diese übernehmen.

Quellen