[…] because accessibility is everyone’s responsibility.

Auch Redakteure, die die Inhalte einpflegen und aktualisieren, sind an der Barrierefreiheit des Auftritts beteiligt. Sie können dazu beitragen, Barrieren abzubauen, indem sie wissen, was im Hinblick auf bessere Zugänglichkeit bei der Erstellung von Content wichtig ist.
Um eine Website so zugänglich wie möglich zu gestalten, ist es ebenfalls sehr wichtig, sich intensiv mit einer guten Content-Erstellung auseinander zu setzen. Auch hierbei ist es wichtig, immer den Nutzer im Hinterkopf zu haben und sich zu fragen, die Inhalte einer Seite gut strukturiert, verständlich und gut navigierbar sind.
Bei Content kann es sich um Texte, Bilder und Videos handeln und für jeden Bereich gibt es Dinge, die es zu beachten gilt. Redakteure sind beispielsweise verantwortlich für die korrekte Auszeichnung von Überschriften, Listen, Tabellen, Links, Videos etc. und müssen die Alternativtexte für Grafiken verfassen.
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?
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
Texte zugänglich machen
Um Texte im Web so zugänglich wie möglich zu machen, gibt es einige Gestaltungsrichtlinien, an denen man sich orientieren kann.
[sp_easyaccordion id=“1015″]
Weitere wichtige Themen
Headlines
- Aussagekräftige Überschriften
- Struktur der Überschriften beachten (h1 – h6, keine Ebene überspringen)
Mehr dazu im Blog unter Überschrift- und Inhaltstruktur.
Links
- Sprechende Linktext
- keine gleichen Linktexte auf einer Seite (man muss erkennen können, wohin ein Link führt)
- Fließtextlinks eindeutig oder „sprechend“ formulieren: Für die Barrierefreiheit ist es wichtig, dass alle Links außerhalb ihres Kontextes für sich stehen können, damit z.B. in Sprachausgaben die Navigation mit der Tabulatorentaste möglich ist.
- Wenn mehrere Textbeiträge auf einer Seite angerissen werden und im Anschluss der Teaser ein Link mit der Bezeichnung „mehr“ zu weiteren Informationen führt, so sind die „mehr“–Links nicht eindeutig. Eindeutig wird der Link, indem der Text des Links erweitert wird, etwa „mehr zum Beitrag XY“.
- Keine kompletten Link-URLs 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.
Mehr dazu, auch zum Beispiel zu Bildern als Links, im Blog unter Links.
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
Bilder / Grafiken
Grafiken können in dekorative Grafiken und funktionale Grafiken unterteilt werden.
Dekorative Grafiken sind z. B. 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
Alternativer Text bei Bildern und Grafiken
Um dargestellte Grafiken zu beschreiben, gibt es die Möglichkeit, das alt-Attribute zu befüllen. Dies ist gar nicht so einfach und man sollte sich als Redakteur intensiv mit dem Thema beschäftigen. Es beginnt schon mit der Entscheidung ob ein alternativer Text gebraucht wird oder nicht (s. hierzu auch die hilfreiche Seite zum „alt-decision-tree„) und wenn ja, muss gut überlegt werden, was geschrieben wird.
Mehr zum alternativen Text und zu Bildern im Blog unter Bilder und Alt-Text.
Eine weitere gute Seite zu Bildern und Grafiken hat Domingo de Oliviera auf seiner Website.
Audio und Video
Um so viele Menschen wie möglich zu inkludieren, sollte man sich darüber Gedanken machen, was man an Hilfsmitteln zur Verfügung stellt, wenn man auf einer Website Audio- und Video-Inhalte einbindet.
Video-Inhalte solten beispielsweise Captions haben, Audio-Deskriptionen und Text-Alternativen, sowie evtl. ein zusätzliches Video in Gebärdensprache enthalten. Audio-Inhalte sollten ein Text-Transkript dabei haben.
Audio- und Videoinhalte
- Bedienen Elemente sollten möglichst groß und eindeutig sein
- Player sollte mit der Tastatur und mit Screen Reader bedienbar sein
- Die Inhalte sollten nicht auf Autoplay eingestelllt sein und es sollten Play und Pause/Stop Funktionen geben
Mehr zum Thema, wie man barrierefreie Videos erstellt, findet man hier im Blog im Artikel „Wie erstelle ich barrierefreie Videos“, bzw. hier in der Link-Liste dazu.
Hilfreiche Werkzeuge und Vorgehensweisen
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
Quellen:
How to Make Your Web Content Accessible
Buch: Barrierefreiheit im Internet – Ein Handbuch für Redakteure, Domingos de Oliveira
Weitere Links
Ein guter Startpunkt, sich mit barrierrefreier Content-Erstellung vertraut zu machen sind die Seiten der WAI (Web Accessibility Initiative):
Inbesondere diese Seite: