Digitale Barrierefreiheit – Der Comic

Da ich spätestens seit meiner Masterarbeit eine gewisse Affinität zu Comics entwickelt habe, bot es sich ab einem gewissen Punkt einfach an, meine gesammelten Erkenntnisse zum Thema Barrierefreiheit in einen Comic zu gießen.

Das Thema digitale Barrierefreiheit übersichtlich auf nur 12 Seiten erklärt. Viel Spaß beim Lesen.

Digitale-Barrierefreiheit-Comic Download PDF

Transkription – Screenreadable Version des Comics

Digitale Barrierefreiheit – Der Comic. Von Fenja Hanisch.
Titelbild mit einer bebrillten, weißen Frau – Fenja, die eine Baustellen-Absperrung wegträgt

Das Internet… Das Bild zeigt die Weltkugel im All, umrundet von blau leuchtenden Buchstaben „WWW“.
„Die Kraft des Internets liegt in seiner Allgemeingültigkeit. Der Zugang für alle, unabhängig von ihrer Behinderung, ist ein wesentlicher Aspekt.“ – Ein Zitat von Tim Berners Lee.
Aber.

Einige Zahlen zur Barrierefreiheit:
Von allen Webseiten haben:

86% schwachen Farbkonstrast
66% keine Alternativtexte
60% fehlerhafte Links
34% fehlende Steuerelemente

Quelle: statista (Februar 2020)

In Deutschland:

7,8 Millionen Schwerbehinderte
334.600 mit Sehbehinderung
fast 30.000 mit Sprach- oder Sprechstörung
mehr als 60% der Erwachsenen haben eine Fehlsichtigkeit
12% leiden an Rot-Grün-Schwäche

Quelle: statistisches Bundesamt (2021)

Ein Großteil der Webseiten ist für viele nicht/kaum nutzbar.
Fenja lehnt an der EU-Flagge und sagt, „Das soll eine EU-Richtlinie ändern.“
Im nächsten Bild hebt sie wieder eine Absperrung hoch. „Aber erst einmal schauen wir uns diese so genannten Barrieren genauer an.
„Offiziell betroffen sind nur etwa 13%. Aber!“ Fenja hat ein Kuchendiagram mit einem Kuchenstück der 13% in der Hand.
Drei Charaktere aus der Serie IT-Crowd halten sich Ohren, Augen oder Mund zu und sagen gemeinsam, „Wer nicht permanent betroffen ist, der kann temporär beeinträchtigt sein, oder sich in einer beeinträchtigenden Situation befinden.“
Dargestellt ist die „Microsoft Inklusiv Desing Matrix“. Gegenübergestellt werden Beeinträchtigungsdauer (permanent, temporär, situationsbedingt) und die verschiedenen Interaktionsmöglichkeiten (anfassen, sehen, hören, sprechen). Die Zellen enthalten Beispiele.

	Permanent	Temporär	Situationsbedingt
Anfassen	Einarming	Armverletzung	Junge Eltern
Sehen	Blind	Grauer Star	Abgelenkter Fahrer
Hören	Taub	Ohr-Infektion	Barkeeper
Sprechen	Stumm	Grippe	Starker Akzent

Microsoft Inklusiv Design Matrix

„Woher weiß ich, ob eine Anwendung barrierefrei ist?“ Fenja trägt einen großen Piratenhut. „Es gibt da Richtlinien.“

WCAG

Die Web Content Accessibility Guidelines, 13 Richtlinien des W3C (World Wide Web Consortium). Link: w3.org/TR/WCAG22/.
Fenja liest die Richtlinien vor. „Die WCAG stellt eine Checkliste mit 86 Erfolgskriterien bereit, aufgeteilt in 4 Prinzipien.“
Es folgen die 4 Prinzipien:

Wahrnehmbar

(engl. erceiveable) Alle Inhalte auf Webseiten müssen vom Benutzer wahrgenommen werden können und erkennbar sein.

Bedienbar

(engl. operable) Die Benutzer müssen die Webseite bedienen können.

Verständlich

(engl. understandable) Inhalte und Navigation müssen für die Benutzer verständlich sein.

Robust

(engl robust) Die Anwendung muss robust sein, damit sie mit einer Vielzahl von Werkzeugen genutzt werden kann.

„Für einen ersten Aufschlag gibt es Quick-Checks und Analyse-Tools.“ Fenja schaut mit einer Lupe, gezeigt wird das Ergebnis des Tools Lighthouse mit einer Punktzahl von 94 für Barrierefreiheit. Link: wave.org.
Aber Achtung, Tools finden nur etwa 30% aller Probleme. Für den Rest muss der Mensch ran.

Farbe und Kontrast

Es werden drei Farbräder gezeigt. Eines in normal, eines, wie es mit Rot-Grün-Schwäche aussieht und eines in Grauntönen, wie es sich für Farbenblinde darstellen würde. Die Bilder der Seite sind eingefärbt, um Rot-Grün-Schwäche, bzw. Farbenblindheit aufzuzeigen. Fenja in schwarz-weiß erklärt, „Farben sind schön, aber nicht jeder kann sie wahrnehmen.“
„Informationen, die von Farbe abhängen, können verloren gehen.“ Fenja steht mit zwei Kellen da, die gleich aussehen, bei normalen Farben aber rot und grün wären. Ebenso die Symbole im Hintergrund mit der Anweisung „Rot auswählen“, was bei der aktuellen Farbgebung unmöglich zu erkennen ist.
Fenja zeigt links und rechts Texte in dunkelgelb auf hellgelb, bzw. gelb auf hellgelb, die schwer zu lesen sind. Sie erklärt, „Außerdem kann es anstrengend sein, Text mit geringem Kontrast zu lesen. Oder unmöglich.“
„Um das zu vermeiden gibt es Contrast-Checker, die Hintergrundfarbe und Textfarbe vergleichen.“ Fenja steht im Chemielabor und mischt Farben miteinander. Daneben sieht man verschiedene Farbkombinationen und den jeweiligen Kontrast.

Fail: 2.76:1
Level A: 4.5:1
Level AAA: 7.5:1

Bereits im Design sollte man auf eine barrierefreie Farb-Palette achten. Es folgen fünf bunte Kringel, die allerdings nur unterschiedlich grau dargestellt werden.
Fenja sitzt zuletzt vor einem Monitor und sieht den Text „Hier ist der Link“, in dem nicht ersichtlich ist, welches Wort farblich als Link hervorgehoben ist. „Trotzdem gibt es noch viele Situationen, wo man sich auf Farbe verlässt.“

Layout

Die Seite ist gedreht um den Lesenden ein anderes Format aufzudrängen, wie es auch für viele eingeschränkte Nutzende der Fall ist.
Das erste Bild ist heran gezoomt, sodass nur ein Teil sichtbar ist, Fenja mit einer Lupe und ein Ausschnitt der Sprechblase „… Seite, um… zu können.“
Im nächsten Bild steht Fenja normalgroß mit einer Lupe und einem Buchstaben da. Der Text in der Sprechblase ist diesmal gezoomt, sodass nur ein Teil zu lesen ist: „andere zoomen nur den Text.“
Die Richtlinien besagen Zoom bis 200%, Nur-Text-Zoom bis 200% und Orientierung.
Man sieht ein Gerät einmal im Porträt- und im Landschafts-Modus. Über beide verteilt ist der Text, „Manche können ihr Gerät nur in einer Ausrichtung nutzen. Z.B. weil es fixiert ist.“
„Inhalte müssen sich responsiv anpassen“, demonstriert Fenja, indem sie an einem Bild zieht. Inhalte sollten immer die gleiche Reihenfolge beibehalten wie im Quelltext. Es dürfen niemals zwei Scrollbalken nötig sein, um einen Text… Der rest ist leider nicht zu lesen, da zwei Scrollbalken angezeigt werden.
„Zur einfachen Orientierung müssen alle Seiten gleich aufgebaut sein. Das gilt besonders für Sonderfunktionen wie Login, Suche und Hilfe.“ Fenja hält drei Seiten einer Anwendung hoch, die gleiche Struktur, wenn auch unterschiedlichen Inhalt haben. Im Hintergrund sind Login, Suche und Hilfe hervorgehoben.
Um sich auf einer Seite zurecht finden zu können, braucht es

h1. Überschriften

Da die meisten Nutzer Seiten nur überfliegen, braucht es diese, um schnell die richtige Information zu finden.

h2. Formatierung

Der Inhalt wird so strukturiert und gegliedert. Die Ebenen dabei absteigend und ohne Lücken.

h2. Semantisches HTML

Elemente können so leichter erkannt und vorgelesen werden.

Beschriftung

Das Bild ist schwarz, man kann also nichts sehen. Aber hören, was Fenja sagt. „Nicht jede Nutzerin kann Inhalte sehen“
„… oder ausreichend erkennen.“ Dieses Bild ist stark verschwommen. Man erkennt vage Fenja und zwei weitere Bilder, die Anweisung „Kaktus wählen“ ist allerdings kaum umsetzbar.
„Dafür werden Bilder und Grafiken mit Alternativ-Text versehen. Gute Alt-Texte sind eine Kunst für sich.“ Gezeigt werden dazu drei Bilder mit zugehörigem Alt-Text.

Foto Fenja
Logo SI
Komplizierte Grafik…

Weiter geht es mit besonderen Bildern, den Icons. „Auch Icons sind nicht eindeutig. Deswegen immer mit Text kombinieren.“ Man sieht links einzelne Icons wie eine Figur, Wolke, drei Striche und ein Stift. Rechts daneben die gleichen Icons mit Text. Figur mit „Anmelden“, Wolke mit „Speichern“, drei Striche und „Menu“ und der Stift mit „Unterschreiben“.
„Dynamische Inhalte sollten vom Screen-Reader vorgelesen werden.“ passend dazu sieht man ein Display von einem Shopping-System, wo ein Artikel hinzugefügt wird, woraufhin sich der Gesamtpreis des Warenkorbs erhöht. Es wird vorgelesen „neuer Gesamtpreis 42 Euro“. Hier hilft ARIA.
Zuletzt werden Button und Link gegenüber gestellt. Der Unterschied ist wichtig, denn…

Button

Buttons führen eine Aktion aus
haben ein click-Event
werden ohne Event nicht vorgelesen

Link

führen eine Navigation aus
haben ein href mit Link-Ziel
werden ohne href nicht vorgelesen

Die Beschriftung sollte auf die Aktion, bzw. das Ziel hinweisen. Beispielhaft werden hierzu drei Buttons dargestellt, alle mit dem Text „Hier buchen“. Denkt ans Vorlesen!

Tastatur

Mit kleinen Bildern werden verschiedene Tools aufgeführt:

Touchpad
Finger
Maus
Joystick
Sipp-And-Puff / Strohhalm
Tastatur

Dazu erklärt Fenja, „Es gibt verschiedene Eingabemöglichkeiten. Und genauso viele Gründe, warum sie nicht genutzt werden können.“ Passend dazu hat Fenja einen Arm in der Schlinge und der andere ist geschient.
„Stellvertretend für alle assistiven Eingabegeräte muss eine Anwendung ausschließlich per Tastatur bedienbar sein.“ Das Bild zeigt in der Hauptsache eine Tastatur, auf die Fenja mit einem Finger tippt. Mehr sollte nicht nötig sein, deswegen sagt sie, „Und zwar Single-Pointer. Navigation. Und sämtliche Funktionen.“
Die wichtigste Taste hierfür ist die Tab-Taste, die Fenja im nächsten Bild hochhält und sagt, „Dafür muss die Reihenfolge stimmen, sodass die Tab-Taste genutzt werden kann.“ Im Bild sieht man außerdem wichtige Elemente:

„Zum Inhalt“ Element, das bei Tab Navigation angezeigt werden sollte, um die Navigation und
Header-Inhalte zu überspringen
Tab-Navigation mit Fokus und aktivem Tab
Radiogroup
Dropdown

Der Fokus muss eindeutig ersichtlich sein.
„Die meisten Elemente funktionieren von Haus aus.“ Im Bezug auf den „Tab Index“. Besonders bei Eigenbau darauf achten, dass alles per Tastatur verfügbar ist.
Achtung! Keyboard-Traps sind Zustände, aus denen per Tastatur nicht heraus navigiert werden kann.

ScreenReader

Das Bild ist wieder schwarz, wie schon bei der Beschriftung. Man sieht nur die Aussprache „Schon wieder schwarze Bilder?“
Im nächsten Bild kommt die Antwort. „Ja, aber fortgeschritten“, zudem wird der Schriftzug „Level 02“ angezeigt. Die Sprache kommt aus einem Lautsprecher.
„Diesmal geht es darum, Elemente vorlesbar zu machen. Dafür müssen sie in erster Linie semantisch korrekt sein.“
Jetzt ist Fenja wieder sichtbar und verteilt Schilder an HTML-Elemente, wie „collapsed“, „aktiv“ und „inaktiv“ und erklärt dazu „Bei reaktiven Elementen (Akkordeon, Dropdown, Links, …) muss der Zustand erkennbar sein.“
„Zusammengehörige Elemente müssen entsprechend geschachtelt werden.*“ Der Stern verweist auf eine Fußnote, die unterhalb von Fenjas Füßen angezeigt wird: Und Verweise wie Fußnoten werden direkt mit vorgelesen.
„Alle komplexen Elemente brauchen Beachtung, ob sie barrierefrei sind.“ Aufgeführt, um Fenja herum, werden besonders problematische Elemente:

Tooltip
Autocomplete
Dialog
Akkordeon
Karussel
Datepicker

ARIA

„Zum Nachhelfen gibt es ARIA“ Accessible Rich Internet Applications
Rollen (role) definieren die Art eines Elements. Zustände (state) und Eigenschaften (properties) ergänzen die aktuell gültigen Informationen, passend zur Rolle.

Formulare

Fenja präsentiert eine Login-Maske. „Zur Nutzerinteraktion braucht es Formulare.
„Da wir etwas vom Nutzer wollen, sollten wir es ihm so einfach wie möglich machen.“ Passend dazu bringt Fenja ein Namens-Label und ein Input mit dem Placeholder „nutzername“ zusammen.

Input

Label (verknüpft mit Input) – eindeutig (Bsp. Name)
Placeholder – beispielhafte Eingabe, ersetzt nicht das Label
Pflichtfeld-Kennzeichnung – möglichst nur Pflichtfelder abfragen
Fehlermeldung – soll bei Fehlerbehebung helfen, nicht „Eingabe falsch“

„Inhalte die zusammengehören, müssen entsprechend strukturiert sein.“ Fenja zeigt ein Formular, indem persönliche Angaben und Passwort mit einer Linie von einander abgegrenzt sind.
„Die Autofill-funktion ermöglicht besonders einfaches Ausfüllen. Dafür müssen die Felder nur sinnvoll benannt sein. Ggf. mit dem autofill-Attribut nachhelfen.“ Gezeigt wird die Autofill-Funktion eines Browsers die es ermöglicht, abgespeicherte Personendaten automatisch einzugeben.

Fehler

Fehlermeldungen werden an fehlerhaften Feldern angezeigt.

Prävention durch Hilfestellung
Kennzeichnen der fehlerhaften Felder (nicht nur mit Farbe)
Hilfe zur Korrektur durch Fehlermeldung

Nach dem Ausfüllen des Formulars… Überprüfbar? Korrektur? Was bewirkt Abschicken?
„Und nach dem Abschicken braucht es eine Rückmeldung“ Zum Beispiel „Danke für die Anmeldung zum Newsletter.“

Video & Audio

Man sieht, dass Fenja redet. Sie hält inne, dann fällt ihr auf, dass man sie nicht hört. Schließlich schaltet sie Untertitel an und man liest „Nicht jeder kann (zu) hören“
Nun trägt Fenja zufrieden Kopfhörer. „Je nach Art des Inhaltes gibt es unterschiedliche Text-Alternativen.“

Untertitel

Gesprochenes in Textform (Wenn Audio nicht verfügbar ist oder das Gesprochene schwer verständlich)

Transkript

Enthält neben dem Gesprochenen auch Regieanweisungen

Audio Description

Zusätzlich zum Transkript vermittelt ein Erzähler wichtige, visuelle Informationen

Fenja steht vor einem Videoplayer mit Baustellenabsperrung und zeigt auf, „Die Bedienelemente eines Players müssen barrierefrei sein. Alternativtexte müssen in der Nähe zu finden sein.“
Im nächsten Bild stellt sie sich vor den pausierten Player, denn „Videos dürfen nicht automatisch starten. Sound darf nicht automatisch abspielen.“

„Dieser Comic ist keine vollständige Anleitung. Besonders dynamische oder selbstgebaute Elemente brauchen viel Aufmerksamkeit.“ Hinter Fenja sieht man entsprechende Elemente durch die Gegend schwirrend, wie eine digitale Zeitanzeige, einen Ladebalken, Kalender, Wecker und ein Quietscheentchen.
Im nächsten Bild sieht man drei Menschen mit unterschiedlicher Behinderung, die digitale Produkte testen. „Das Wichtigste ist es, sich in die Anwendenden hinein zu versetzen und Betroffene um Unterstützung zu bitten.“
„Los geht’s und viel Erfolg“, winkt Fenja, während sie im Raumanzug durch den Weltraum der ersten Seite, mit dem Globus und dem WWW fliegt.