Accessibility für die Content-Erstellung

[…] because accessibility is everyone’s responsibility.

– Melissa Foley

Accessibilty bei points

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.

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.

  • Der Text muss auf 200% vergrößerbar/zoombar sein, ohne dass dabei Funktionalität oder Inhalt verloren geht. Das bedeutet, dass man dann immer noch den ganzen Text sieht, auch wenn man horizontal scrollen muss. Um die höchstmögliche Zugänglichkeit (Stufe AAA) zu erreichen, muss der Text auf 200% lesbar sein, ohne scrollen zu müssen.

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.

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.

Hamburger Verständlichkeitskonzept:

    1. Einfachheit: Eigenschaften dieses Merkmals sind z.B. Satzlänge (einfache, kurze Sätze) und geläufige Begriffe.

    1. Gliederung und Ordnung: Texte können besser verstanden werden, wenn sie

        • inhaltlich folgerichtig aufgebaut sind

        • durch optische Gliederungen übersichtlich sind

    1. Kürze und Prägnanz: Ein verständlicher Text sollte in seinem Inhalt weder weitschweifig noch gedrängt erscheinen.

    1. Anregende Zusätze: Hierzu zählen Beispiele, Illustrationen, Analogien oder die persönliche Anrede des Lesers.

Mehr zum Thema Sprache:

Um Texte zugänglich zu machen, sollte eine einfache und klar Sprache verwendet werden, das bedeutet einfache Worte in kurzen Sätzen und kurzen Textblöcken (wenn man die höchstmögliche Zugänglichkeit, Level AAA, erreichen möchte, sollte das Lese-Level ungefähr der 8. Klasse entsprechen). Dies hilft Menschen, die kognitive Beeinträchtigungen oder Lernschwächen haben.

Dies kann auch den Nutzern helfen, die auf Screenreader angewiesen sind, da diese deutlich mehr Wörter pro Sekunde lesen, und der Screenreader-Nutzer mehr Content schneller verstehen können muss. Einfache Wörter zu benutzen bedeutet auch, dass der Screenreader sie korrekt ausspricht.

Es sollte auch vermieden werden, technische Begriffe und Abkürzungen zu verwenden, es sei denn, sie werden erklärt oder buchstabiert.

Wichtig ist es, keine Formulierungen wie "auf der rechten Seite" oder "links" zu verwenden, da Screenreader von oben nach unten lesen, und es kein links und rechts gibt. Auch könnte die Reihenfolge von Inhalten auf kleineren Bildschirmen vertauscht werden (Responsive Design). Wenn die Buchstaben einer Abkürzung einzeln vorgelesen werden sollen, sollte man Punkte verwenden (z. B. C.I.A.).

Inhalte im Web sollten strukturiert werden, indem z.B. Absätze als Absätze, Überschriften als Überschriften, Listen mit einem der verschiedenen Listentypen usw. ausgezeichnet werden. Um etwas hervorzuheben sollte und nicht verwendet werden.

Strukturierte Inhalte können besser mit alternativer Zugangssoftware erschlossen werden.

Weitere wichtige Themen

Headlines

  • Aussagekräftige Überschriften
  • Struktur der Überschriften beachten (h1 – h6, keine Ebene überspringen)

Mehr dazu im Blog unter Überschrift- und Inhaltstruktur.

  • 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):

Resources for Content Writers

Inbesondere diese Seite:

Tips for Getting Started Writing for Web Accessibility

nach oben