digitale Barrierefreiheit

Bildbeschreibung

Das Setzen von Alternativetexten auf Bildern.
Hierbei ist es wichtig das detailiert beschrieben wird was auf dem Bild sichtbar ist.

Ist zum Beispiel eine Person abgebildet, kann der Text wie folgt lauten:
Ein altrosa Hintergrund. Im Vorderund steht eine Frau, mit rotblondem langem Haar. Sie hat braune Augen, Sommersprossen und trägt eine schwarze Bluse. Nur ihr Oberkörber ist abgebildet. Ihre Hände sind locker in ihre Hüfte gestemmt. Sie lächelt in die Kamera.

Können Sie sich unter dieser Beschreibung das Bild vorstellen? Auf meiner Webseite „Über MattGelb“ finden Sie es.

Sollte ein Bild nur einen dekorativen Zweck (Platzhalter) erfüllen, sollte das Alt-Attribut leer gelassen werden.

Text im Bild

Verzichten Sie auf Text in Bildern, wenn dieser nicht notwendig ist. Diese Texte können von Nutzer nicht angepasst werden. Weder in Größe, Kontrast noch Farbe.
Sollten dennoch Texte notwendig sein, sollten im Alternativtext diese Inhalte wieder auftauchen, hinzu ist eine zusätzliche Bildbeschreibung sinnvoll.

Bildsprache und Nutzung

Bilder sollten leicht verständlich sein. Es sollte auf den ersten Blick ersichtlich sein worum es geht. Thematisch sollten diese Bilder im Zusammenhang mit dem dazugehörigen Inhalt stehen. Auch das Nutzen von Icons muss hinterfragt werden. Ein Icon dient dazu eine kompakte Information, auf kleinem Raum, abzubilden. Es sollte nicht als Dekorationobjekt benutzt werden. Ist das Icon nicht gut verständlich (heißt, es ist auf den ersten Blick nicht erkennbar was das Icon für eine Information widerspiegelt) sollte darauf verzichtet werden.

Bei der Nutzung von Hintergrundfarben und textuellen Formatierungen sollte einiges beachtet werden.

Über Farben vermittelte Informationen sollen auch ohne Wahrnehmung der Farbe verfügbar sein.
Ein kleines Beispiel:
Der weiße Text auf einem roten Banner sollte auch ohne roten Hintergrund lesbar sein. Entweder durch die Umsetzung einer „Kontrast-/Farbversion“ (hier kann der Nutzer die Farbe mit Hilfe eines Schalters beeinflussen) oder durch eine andere Textfarbe.
Bei roter Schrift wäre es zum Beispiel möglich den Text zusätzlich „fett“ zu formatieren. Wenn der Nutzer eine Rot-Grün-Schwäche hat, würde er den Text grau sehen und zusätzlich hervorgehoben durch „fett“.

Um dem Problem der Rot-Grün-Schwächen vorzubeugen, kann man, wenn möglich, grundsätzlich auf diese Farben verzichten.

Kontrast

Es ist wichtig das Informationen gut lesbar und erkennbar sind. Alle Texte der Webseite müssen in allen Zuständen einen ausreichenden Helligkeitskontrast haben.

Mit diesem Tool von „Siteimprove“ kann man die Kontraste von Text und Hintergrund gut testen. Hinzu wird abgebildet ob der Kontrast dem W3C-Grad AA oder AAA entspricht. Der Grad AA ist das Minimum was erreicht werden muss um dem Barrierefreiheitsstärkungsgesetz zu entsprechen.

Formatieren Sie Textinhalte korrekt.

Zum Beispiel:
Nutzen Sie für Zizate das Element „Blockquote“.
Nutzen Sie für Aufzählungen das Listenelement. Hierbei muss zusätzlich beachtet werden ob es sich dabei um eine Liste oder Aufzählung handelt.
Ausschließlich Verlinkungen sollten die Formatierung einer Unterstreichung nutzen.

Wenn ein Teil des Inhaltes eine andere Sprache nutzt, muss dieser Bereich, in HTML, mit dem „lang“ Attribut formatiert werden.

Kein Muss aber ein Kann:
Nutzen Sie generell Wörter und Bezeichnungen die leicht verständlich sind. Handelt es sich um Fachbegriffe, sollten diese erläutert werden. Halten Sie Sätze und Abschnitte kurz. Wenn es Ihnen möglich ist, integrieren Sie einen Sprachumschalter für eine „leichte Sprache“.

Inhalte sollten per Titel strukturiert werden.
Titel sollten immer den Zweck oder Inhalt beschreiben bzw. wiedergeben.

Titel sollten in absteigender Reihenfolge gesetzt/formatiert werden.
Heißt, H1 -> danach folgt im Inhalt eine oder mehrere H2 -> nach einer H2 kann entweder erneut eine H2 kommen oder eine H3 -> nach einer H3 kann eine weitere H3 kommen oder eine H4. Die Reihenfolge ist durchgängig absteigend.
Nicht, H1 -> dann eine H3 -> dann eine H2 -> dann eine H4. Diese Reihenfolge ist nicht durchgängig absteigend.

Es muss immer eine H1 gesetzt sein.

Hilfsangebote/Kontaktdaten sollte immer an der gleichen Stelle auffindbar und gut organisiert sein.

Tabellen sollten nur genutzt werden, wenn diese unabdingbar sind und zum Zweck der Abbildung von Daten dient. Hinzu müssen Datentabellen strukturell richtig aufgebaut, Zeilen- und Spaltenüberschriften genutzt werden.

Ziel oder Zweck eines Links muss aus dem Linktext hervorgehen oder aus dem direkten Kontext des Links ermittelbar sein.
Verzicht auf „mehr lesen“ oder „hier klicken“.

Sollten Links auf Dokumente verweisen, muss der Link über das Dateiformat des Zieldokuments informieren.

Werden Bilder verlinkt, entspricht das Alt-Attribut des Bildes das Linkziel.

Sollte eine Webseite Geräusche erzeugen, müssen diese deaktivierbar sein.

Für Videos ohne Audio und Audiodateien müssen Texte als Alternative bereit gestellt werden.

In Videos müssen Untertitel gesetzt sein.

Videos welche wichtige Inhalte vermitteln ohne gesprochenes Wort (zum Beispiel wird ein informatives Plakat in dem Video gezeigt) benötigen eine Audiodeskription.

Dokumente wie PDF’s oder Word-Dateien sind ein selbstständiges Thema im Bereich Barrierefreiheit und muss der Richtlinie EN 301 549 Kapitel 10 entsprechen.
Die TU-Dresden hat dazu ein umfangreiches Dokument erstellt. Hier geht es zu dem Dokument über barrierefreie Dokumente (PDF, 6,03MB, Stand 2020)

Navigationen/Menüs sollen innerhalb des gesamten Webauftritts einheitlich auffindbar und nutzbar sein.

Kann, kein Muss:
Keine Nutzung von unterschiedlichen Sprachen im Menü. Zum Beispiel „Home“ und „Leistungen“.
Das Nutzen von verständlichen Bezeichnungen in der Navigation.
Wenn möglich auf Unterebenen verzichten. Wenn dann maximal eine Unterebene nutzen.

Wenn möglich keine Animationen nutzen.
Wenn doch welche genutzt werden, müssen diese stoppbar sein, falls diese Aniamtion länger als 5 Sekunden dauert. Außer diese Animation sind zwingend notwendig.

Kann, kein Muss.
Bei all den folgenden Elementen sollte der dringender Bedarf und der Sinn hinterfragt werden. Denn diese bringen im Bereich digitaler Barrierefreiheit und Nutzerfreundlichkeit einige Hürden und Probleme mit sich.

• Slider
• Tabellen
• Sticky Menü
• Overlays (Einblendungen von Werbung/Hinweisen über den Inhalt der Website)
• iFrames (Einbinden von externen Funktionen über ein iFrame)

Es gibt mitlerweile einige Anbieter welche sogenannte Overlays anbieten, welche die Website vermeintlich digital barrierefrei manipuliert/optimiert.
Dabei handelt es sich um eine Software welche in die Website eingebunden wird. Diese greift dann auf Code der Website zu.
Diese Overlays stehen in einem schlechten Ruf.

Die öffentliche Prüfstelle für digitale Barrierefreiheit hat sich über die Nutzung solcher Overlays bereits geäußert.

Anbei eine Zusammenfassung:

Overlays können viele wichtige Barrieren nicht beheben:

• Overlays können keine Untertitel hinzufügen.
• Sie beheben keine ARIA-Fehler bei der Auszeichnung dynamischer Elemente.
• Overlays können Interkationen mit Tastatur kaum verbessern
• Sie können auch keine Fehlermeldungen verbessern

Die Funktionen eines Overlays sind oft selbst schlecht zugänglich

• Das Overlay-Bedienelement kann schwer mit der Tastatur erreicht werden
• Overlay-Funktionen lassen sich oft nicht aktivieren und deren Fokus-Hervorhebungen sind oft mangelhaft
• Einmal eingeschaltet, konnte das Overlay (in dem obigen Test) nicht mehr ausgeschaltet werden. Hinzu ist das Bedienelement selbst nicht kontrastreich genug.

Overlay schaffen auch neue Mängel

• Aktivierte Schriftgrößen-Einstellungen führten oft zu überlappenden und abgeschnittenen Inhalten
• Beim Zoomen funktionieren der Textumbrüche nicht, es musste horizontal gescrollt werden.
• Die Bedienung kann durch im Hintergrund laufende Skripte extrem verlangsamt werden.
• Kritische, wichtige Bedienelemente (etwa Menü-Icons) werden überdeckt.
• Die übliche Tastaturnavigation wurde ausgehebelt und zum Beispiel durch eine Navigation nur über Nummern-Eingabe ersetzt (in dem obigen Test).

Die Idee hinter solch ein Overlay ist sehr gut und in einem gewissen Maß helfen diese auch. Allerdings habe ich deutliche Bedenken das damit korrekt technisch und inhaltlich, mit Fokus auf die Gesetzgebung des Barrierefreiheitsstärkungsgesetz, rechtlich (und vorallem für betreffende Personen: nützlich) alles korrekt umgesetzt werden kann.