Barrierefreiheit im Internet – Handbuch für Redakteure – Domingos de Oliveira

Dieser Artikel ist eine Zusammenfassung des Buches „Barrierefreiheit im Internet – Handbuch für Redakteure“ von Domingos de Oliveira.

Tenor: Barrierefreiheit hilft nicht nur Menschen mit Behinderung, sondern kommt allen Menschen zugute. Das ist auch im Web so, auch wenn es hier nicht so offensichtlich ist.

Die wesentlichen Anforderungen an die Barrierefreiheit sind die 3 Grundsätze:

1. Mehrkanal-Prinzip (o. Mehr-Sinne-Prinzip)
   Eine Handlung kann auf mindestens 2 Weisen erfolgen oder Infos sind auf 2 Wegen zugänglich, z. B. Navigation mit Maus und Tastatur, Bild hat alt-Text, Videos haben Untertitel für Gehörlose
2. Prinzip der Selbständigkeit
   Menschen mit Behinderung müssen grundsätzlich dazu in der Lage sein, Aufgaben selbständig ohne fremde Hilfe erledigen zu können
3. Prinzip eine Lösung für alle (Universal Design)

Wichtig: Versuchen, die Barrierefreiheit schon bei der Formulierung der Anforderungen und durchgängig bis zur Fertigstellung einer Website berücksichtigen.

Einige der Gesetze der guten Gestaltung sind auch im Bereich Barrierefreiheit wichtig:

• Gesetz der Nähe
• Gesetz der Ähnlichkeit
• Gesetz der Geschlossenheit
• Gesetz der Erfahrung

Design Patterns vereinfachen komplexe Prozesse. Wenn man diese Gestaltungsmuster auf Inhalte anwendet, wird es für den Nutzer leichter, die Inhalte zu verstehen, je mehr Seiten er anschaut.

Informationsarchitektur

Inhalte sollten so organisiert und verbunden sein, dass sie von Menschen mit kognitiven Störungen leichter verarbeitet werden können. Es sollte möglich sein, eine Vorstellung darüber zu gewinnen, wie eine bestimmte Information zu finden ist, und die Logik der Website zu verstehen. Einen Button immer an der gleichen Stelle zu haben, führt dazu, dass der Nutzer automatisch lernt, was getan werden muss, um die gewünschte Aktion auszuführen. Dieser Lernprozess wird verlängert, wenn eine Website inkonsistent gestaltet ist oder viele störende Elemente enthält. Kontextualisierung ist auch eine wichtige Aufgabe, Inhalte oder Informationen sollte nicht für sich alleine stehen, sondern in einen großen Zusammenhang eingeordnet werden. Komplexe Informationen sollten auf mehrere Unterseiten verteilt werden, genauso wie umfangreiche Formulare: es muss erkennbar sein welcher Schritt gerade bearbeitet wird, wie viel schon bearbeitet wurde, und welche Bereiche noch auszufüllen sind. Ebenfalls wichtig ist, im konkreten Zusammenhang unwichtige Informationen wegzulassen, also zu fragen: was können wir weglassen?

Informationshierarchie auf Webseiten

Webseiten sollten in Informationsblöcke beziehungsweise in logische Segmente eingeteilt werden. Informationen, die eine ähnliche Funktion haben, werden gemeinsam gruppiert. Überschriften werden in verschiedenen Größen dargestellt, bei Listen werden Unter-Elemente eingerückt, visuelle Hilfen zur Orientierung sind wichtig für Sehbehinderte, zum Beispiel durch den Einsatz von Weißraum, durch die Positionierung von Elementen, oder durch grafische Linien. Es sollte nicht so viele Informationsblöcke geben, damit sich Blinde besser orientieren können. Die wichtigen Blöcke sollten direkt ansteuerbar sein. Es wird empfohlen, Überschriften höherer Ordnung nur für den Inhaltsbereich zu verwenden. Wichtig ist auch, dass sich Blinde einfach durch lange Listen von Elementen bewegen können.

Navigationskonzepte

• Verschiedene Wege auf einer Webseite etwas zu finden sind wichtig
• Intuitiv verständliche Navigation
• Logischer und konsistenter Aufbau
• Frustfreies Nutzererlebnis
• Verständliche Gestaltung
• Eine gute Navigation erfüllt drei grundlegende Anforderungen:
• der Nutzer weiß immer auf welche Ebene er sich befindet
• er sollte immer in der Lage sein, durch die Seiten der Ebene zu blättern auf der er sich gerade befindet
• er sollte problemlos zur höheren Ebene gelangen
• Stichwort active und breadcrumb
• Weitere Möglichkeiten: grafische Sitemap, Inhaltsverzeichnis, tag cloud, interne Suche (evtl. mit autosuggest), weiterführende Links im Inhaltsbereich
• Man sollte sich fragen, was für den Nutzer noch wichtig oder interessant sein könnte, wenn er gerade eine bestimmte Unterseite angesehen hat

Informationsverteilung

• Eine einzelne Unterseite muss für sich selbst genommen funktionieren
• Die Informationen auf einer Website sind verteilt, deshalb ist es wichtig das Zusammenspiel der einzelnen Unterseiten sinnvoll zu organisieren
• Zusammenhängender Informationskomplex ist wichtig
• Intelligente Redundanz: Eine Information, die an einer Stelle der Website behandelt wurde, wird auf einer anderen Seite anders formuliert wiederholt, wenn sie in diesem neuen Zusammenhang wichtig ist

Grafiken

Dekorative Grafiken:

Banner, Logos, Hintergrundbilder

Sie sind nicht selber Träger von Information, sondern lockern den Text auf.

Sie sollten erwartungskonform verwendet werden, z. B.: das Logo sollte zur Startseite linken

Funktionale Grafiken:

• Lösen eine Funktion aus und werden praktisch auf allen Webseiten eingesetzt, zum Beispiel das Drucker Symbol für Druckfunktion oder dass RSS Symbol
• Sie sind sehr eingängig, weil man sie teilweise schon aus anderen Kontexten kennt, vom Desktop
• Sie kommen alle Menschen zu Gute, wenn sie ohne weiteres verständlich sind und machen aus einer komplexen Interaktion einen einfachen und intuitiven Prozess, auch für Menschen mit Lernschwierigkeiten oder geringer Lesefähigkeit
• Eigene Piktogramme sollten schnell erkenn- oder erlernbar sein

Anforderungen an Grafiken

• So groß, dass sie mit der Maus oder dem Finger gut anzutippen ist
• Grafiken müssen einen gewissen Abstand zueinander haben und sollten bei normaler Auflösung auf einem mittelgroßen Bildschirm gut zu erkennen und gut anzuklicken sein
• Grafiken sollten gut mit der Tastatur zu erreichen sein (Tab-Reihenfolge)
• Blinde benötigen Alternativ-Text, alle anderen Nutzer brauchen den Titel um zu erfahren, welche Funktion sich hinter der Grafik verbirgt
• Beschreiben sollte man das Bildobjekt nur, wenn es zum Verständnis des Textes bei trägt
• Grafiken, die ähnliche Funktionen erfüllen, sollten gemeinsam gruppiert werden
• Der Beschreibungstext einer Funktionsgrafik erklärt ihre Funktion, in keinem Fall ihr Aussehen
• Vermeiden von grellen Farben, schwachen Kontrasten, flackern und flimmern als Effekte. Auch kein Mouseover Effekt bei dem die Grafik ihre Farbe verändert

Usability

• Barrierefreiheit und Usability sind beides Facetten der Interaktionsgestaltung
• Je flexibler sich Inhalte an Nutzerbedürfnisse anpassen lassen, desto zufriedener sind die Nutzer
• Eine Oberfläche sollte sich selbst erklären, helfen, Fehler zu vermeiden, und sich erwartungskonform verhalten
• Für Sehende und Sehbehinderte ist es zum Beispiel wichtig, einen Button zu erkennen, für Blinde ist es wichtig, dass der Button auch in HTML als Button gekennzeichnet wird
• Inhalte sollten leicht verständlich und widerspruchsfrei sein, und keinen Raum für Interpretationen lassen
• Aktionen müssen widerrufbar und korrigierbar sein
• Es dürfen keine unerwarteten Aktionen ausgelöst werden
• Das Design darf sich nicht plötzlich ändern
• Konsistenz ist auch für das Verhalten wichtig, nicht nur für das Design: Gleiche Funktionen müssen den gleichen Namen haben, unterschiedliche Funktionen brauchen unterschiedliche Bezeichnungen

Gestaltung von Inhalten

Es gibt drei Dimensionen:

1. Optische Textgestaltung
2. Gestaltung des Inhalts (Verständlichkeit)
3. Semantische Strukturierung von Inhalten

1a) Textgestaltung

Lesbarkeit hängt von der Typografie ab: Schriftart und Formatierung, Abstände von Buchstaben, Worten, Zeilen, Absätzen, Text – und Hintergrundfarbe

Für sehbehinderte und Leseschwache sind generell serifenfreie Schriften besser lesbar.

Es empfiehlt sich der Einsatz einer möglichst für viele Menschen gut lesbaren Schrift.

Die Lesbarkeit hängt auch davon ab, wie vertraut der Leser mit einer bestimmten Schrift ist. Serifenschriften sind auf Bildschirmen mit geringe Auflösung schlechter lesbar, sie sind bei gleichem Schriftgrad auch kleiner als serifenfreie Schriften.

Bei einer Serifenschrift sollte man eine Schrift wählen, bei der die Zeichen deutlich voneinander unterschieden und gut gelesen werden können, außerdem sollte man einen höheren Schriftgrad verwenden.

Auch der Zeichenabstand ist wichtig, darf nicht zu nah und nicht zu weit sein.

1b) Textsatz und Textfluss

Für Lesbarkeit und Orientierung auf der Webseite ist im Fliesstext linksbündig gesetzter Text optimal. Auch die unterschiedliche Länge der Absätze erleichtert im Auge die Orientierung. Empfohlen wird eine Zeilenlänge zwischen 50 und 60 Zeichen. Absätze sollten nicht zu lang werden, mehr als drei oder vier Sätze sollte ein Absatz nicht umfassen. Grobe Faustregel: die Länge eines Absatzes sollte möglichst zehn Zeilen nicht überschreiten, nach spätestens fünf Absätzen sollte eine Zwischenüberschrift eingefügt werden, aber nur dann, wenn tatsächlich auch logisch ein neuer Abschnitt beginnt. Text sollte nicht über mehrere Spalten laufen.

Absätze, Listen, Bilder und andere Inhalte bilden Orientierungspunkte und erleichtern damit das Wiederfinden verlorener Textstellen und die Orientierung in längeren Texten.

1c) Formatierung

Mit Formatierungen und Hervorhebungen sollte man immer sparsam umgehen. Kursiv, Großbuchstaben und Unterstreichungen verschlechtern in jedem Fall die Lesbarkeit. Genauso verhält es sich mit Effekten wie Schatten, solche Effekte sollten nur für sehr kurze Texte eingesetzt werden. Wenn etwas hervorgehoben werden soll, am besten durch Fettdruck.

2) Verständlichkeit von Texten

Folgendes machen einen Text verständlich: logischer Aufbau und Gliederung, Einfachheit des Ausdrucks, unterstützende Zusätze.

Eine einheitliche inhaltliche und optische Gestaltung ist von Vorteil. Für den Leser ist es hilfreich, wenn der Text linear und logisch aufgebaut ist. Ein gut strukturierter Text folgt einer bestimmten Logik, mit Entwicklungen im zeitlichen Verlauf: ein Gedankengang wird von Anfang an aufgerollt oder der Autor beschreibt erst Grundlagen, dann Spezielles. Die Hauptaussage des Satzes oder Absatzes sollte möglichst vorne stehen. Wenn Subjekt und Prädikat am Anfang stehen, haben es Menschen mit Leseschwäche leichter, die Kernaussage zu erfassen. Aus dem gleichen Grund sollten Zwischensätze und angehängte Nebensätze vermieden werden. Der Leser sollte weder über – noch unterfordert werden. Unterstützende Zusätze sind unterschiedliche Hilfsmittel zur Verbesserung der Verständlichkeit, zum Beispiel Grafiken oder Schaubilder, aber auch sprachliche Hilfsmittel wie Beispiele oder Metaphern, oder kurze Zusammenfassungen wie zum Beispiel als Infokasten.

Hyperlinks

• Keine kompletten Links in Text einfügen (Screenreader buchstabiert diese Links)
• Je technikaffiner eine Zielgruppe ist, desto besser kommt sie mit im Fließtext zurecht, normal ist es aber nicht sinnvoll, mehr als einen Link pro Absatz zu setzen
• Aus dem Anker-Text und dem näheren Kontext sollte deutlich werden, wohin der Link führt
• Nicht ohne Hinweis auf einen Film oder eine PDF Datei verlinken
• Links sollten im gleichen Fenster öffnen, der Leser soll selbst entscheiden, ob er einen neuen Tab öffnen möchte oder nichts
• Link muss kontextuell passen und sollte keine unerwarteten Aktionen auslösen
• Links müssen immer eindeutig erkennbar sein, vom umgebenden Text unterscheidbar und gleichzeitig gut lesbar. Sie sollten nicht rot oder grün gefärbt sein. Wichtig ist auch eine Hervorhebung, wenn der Link mit der Maus berührt oder mit der Tastatur angetabbt wird, entweder durch Farbveränderung, eine Unterstreichung, oder ein Rahmen.

Audio- und Videoinhalte

• Bedienen Elemente sollten möglichst groß und eindeutig sein
• Player sollte mit der Tastatur und mit Screen Reader bedienbar sein

Podcasts

• Um Podcasts bei barrierefrei zu machen, sollte man versuchen, eine möglichst gute Aufnahmequalität zu erreichen
• Hintergrundgeräusche und Rauschen reduzieren, langsam und deutlichs sprechen
• Text-Transkript für Gehörlose (auch gut für Menschen, die keine Zeit oder Lust haben, Podcast zu hören, Sie können es lesen)

Newsletter

• Keine aufwändige Gestaltung
• Es sollte für den Nutzer möglich sein, zwischen reinem Text und HTML Mails zu wählen
• Absender sollte auf einen Blick erkennbar sein und nicht nach Spam aussehen, die Betreffzeile sollte kurz und aussagekräftig sein
• Am Anfang der Mail sollte ein Inhaltsverzeichnis stehen
• Wenn man HTML Mails benutzt und formatiert, ist es wichtig, dass das Programm zum Versand der Mails diese Formatierungen überhaupt unterstützt
• Auch wichtig: eine einfache und barrierefreie Möglichkeit zur Abmeldung vom Newsletter

Werbung

• Bevorzugen von Text Werbung oder statischen Grafik anzeigen (nicht dynamisch)
• Video- oder Audio-Inhalte wie Trailer von Kinofilmen oder Werbespots sollten nicht automatisch starten
• Vermeiden von Anzeigen im Bereich des Fließtextes, stört den Lesefluss blinder und sehbehinderter Nutzer
• Auf Pop Ups verzichten, sie werden von modernen Browsern entweder im Hintergrund geöffnet oder gleich vollständig blockiert, und der Nutzer bemerkt nicht dass etwas passiert ist
• Störend sind Layer, die sich über den Inhalt legen und weggeklickt werden müssen, bei nicht bei barrierefreien Layern bemerken Blinde nicht, dass etwas passiert ist. Für Sehbehinderte und Tastaturnutzer ist es schwierig, diese Layer zu schließen
• Laut Telemediengesetz muss redaktioneller klar von werblichem Inhalt unterscheidbar sein, damit niemand aus Versehen auf eine Werbeanzeige klickt

Hilfreiche Werkzeuge

Redaktionshandbuch

• Leitfaden mit den redaktionellen Richtlinien zur Gestaltung von Texten, Auswahl von Bildern oder Erstellen von Grafiken
• Kann als Hilfe genutzt werden, um Barrierefreiheit sicherzustellen
• Hier können auch Begriffe festgelegt werden, die man im Sinne der inklusiven Sprache verwenden oder vermeiden möchte
• Auch gut für neue Autoren und Redakteure zum Nachschlagen
• Nützlich sind kurze Checklisten zu den einzelnen Bereichen, zum Beispiel zum Erstellen barrierefreier Texte oder PDFs

Vier-Augen-Prinzip

• Inhalte, die man selbst erstellt hat, sollte immer noch jemand anders kritisch prüfen
• Die Person sollte aber wissen, nach welchen Problemen sie Ausschau halten sollte
• Man selbst sollte das auch bei anderen tun, um den Blick für kleinere und größere Probleme zu schaffen

Qualitätssicherung

• Zeit für Qualitätssicherung einplanen
• Aufspüren von 404-Seiten
• Verschwundene externe Seiten auf spüren und Links entfernen
• Veraltete Informationen im Blick haben
• Auch auf PDFs achten, bei Änderungen nicht nur den Link sondern auch die Datei löschen
• Regelmäßige Prüfung mit Web Analytics Tools und Webmaster Tools
• Bei Formularen und Bestellprozessen Zahl der Abbrüche messen und prüfen ob es an der Stelle Probleme gibt
• Andere Verhaltensweisen prüfen, zum Beispiel wie oft wird ein Drop-Down Menu aufgerufen
• Nutzer einladen zum Feedback geben

Barrierefreiheit einführen

Kollegen gewinnen

• Alle Verantwortlichen an einen Tisch holen
• Präsentation durchführen
• Aha Effekt durch Screenreader
• Videos zeigen
• Erst dann Sach-Argumente vorbringen: Prestigegewinn beziehungsweise Vermeiden von Ansehensverlust durch schlecht zugängliche Website
• In unserem Fall passt das ganze Thema sehr gut zur Gemeinwohlbilanz
• Keine moralischen Argumente anbringen, sie stellen Behinderte häufig als Opfer da, denen geholfen werden muss
• Nicht in die Untiefen der vor Ordnungen und Standards absteigen
• Es ist abzusehen, dass es in einigen Jahren auch Regeln zur Barrierefreiheit für Privatunternehmen geben wird
• Auf Bilder und Metaphern setzen

Generell:

Wenn die Anforderungen für den Relaunch oder den Bau eines Webauftritts formuliert werden, sollte man Barrierefreiheit von Anfang an als eine Anforderung unter anderen einplanen. Wenn man Dokumente wie Styleguides oder Redaktionshandbücher erstellt, sollten Regeln festgehalten werden, nach denen Texte formuliert und Bilder oder Grafiken erstellt werden. Je stärker man Barrierefreiheit in den Arbeitsprozess integriert, desto einfacher wird es, sie umzusetzen.

Erklärung zur Barrierefreiheit

• Bekannt machen der Aktivitäten im Bereich der Barrierefreiheit
• Keine allgemeinen Aussagen, sondern konkret beschreiben, was Barrierefreiheit ist und wie man die Website zugänglicher gemacht hat
• Deutlich zeigen, dass Barrierefreiheit selbstverständlich ein Teil des verantwortlichen Handelns ist und man kein großes Aufhebens darum macht
• Die Zeit, als Behinderung ein Thema für spezielle Unterseiten oder Broschüren war, ist vorbei. Barrierefreiheit sollte für das Unternehmen selbstverständlich sein