Dieser Leitfaden wurde erstellt, um es Redakteur*innen leichter zu machen barrierefreie Inhalte zu erstellen. Er enthält die wichtigsten Regeln in möglichst kurzer Form. Er bildet nicht alle potentiell gültigen Regeln ab. Das komplette zugrundeliegende Regelwerk sind die Web Content Accessibility Guidelines (WCAG) (Englisch).
Generell: Wenn es keinen wichtigen Grund gibt, sollte nicht von den vorgegebenen Formatvorlagen eines Content Management Systems (CMS) oder Redaktionssystems abgewichen werden. Konkret: Schriften, Farben, Schriftsatz (z.B. linksbündig) werden nicht verändert, da sie bereits optimiert wurden.
Weitere Informationen in der Kleinen Schreibschule von BIK für Alle
Strukturieren Sie Texte in sinnvolle Abschnitte. Verwenden Sie Überschriften, Listen und Absätze um Texte zu strukturieren.
Verwenden Sie Überschriften in aufsteigender Hierarchie. Einzelne Überschriftenebenen dürfen nicht übersprungen werden.
Beispiel: Nach einer „Überschrift Ebene 2“ kommt entweder eine weitere mit der Ebene 2, oder eine der Ebene 3.
Vermeiden Sie Blocksatz.
Wenn ein Text Worte oder Sätze in einer anderen Sprache enthält, müssen dieses entsprechend gekennzeichnet werden, damit Bildschirmvorleseprogramme diese in der passenden Sprache vorlesen können. Das geht in HTML mit dem lang-Attribut, oder in einem CMS mit einer entsprechenden Editor-Einstellung.
Grafiken und Bilder brauchen aussagekräftige Alternativtexte um für blinde und seheingeschränkte Menschen verständlich zu sein und wahrgenommen werden zu können.
Unterschiedliche Grafiken erfordern unterschiedliche Alternativ-Texte. Dabei sollte man sich die folgende Frage stellen: „Welchen Zweck erfüllt die Grafik?“
Die häufigsten Fälle:
alt="Beschreibung des Inhalts des Bildes"alt="Artikelüberschrift"Weitere Fälle können im Alt-Decision-Tree(Englisch) nachgeschlagen werden. Weitere Infos zu Alternativtexten auf Deutsch
Jede Webseite benötigt einen eigenen Titel, der den Inhalt der jeweiligen Seite eindeutig beschreibt und von anderen Seiten unterscheidet. Meist eignet sich dafür die Hauptüberschrift der Seite.
Die wichtigsten Informationen kommen an den Anfang, z.B. den Namen der Seite vor dem Namen der Organisation. Bei Seiten, die Teil eines mehrstufigen Prozesses sind, geben Sie den aktuellen Schritt im Seitentitel an.
Beispiel: Bei einem Artikel names „Das war 2022“ im Blog der Agentur „Windrich & Sörgel“ hieße der Titel „Das war 2022 - Windrich & Sörgel“.
Linktexte müssen den Inhalt/Zweck des Linkziels beschreiben.
Zu vermeiden: „hier klicken“ oder „mehr lesen“.
Besser: Der Titel oder die erste Überschrift der Zielseite. Bei Downloads: Dateityp und -größe angeben, z.B. „Quartalszahlen 2023 (PDF, 20MB)".
Sehbehinderte Menschen, die Bildschirmvorleseprogramme verwenden, erschließen sich Tabellen, indem sie mit der Tastatur durch die Spalten und Zeilen navigieren. Tabellen sollten daher so einfach wie möglich gestaltet werden.
Video & Audioinhalte benötigen Untertitel, Transkripte, Audiodeskriptionen und Gebärdensprachenversionen um barrierefrei zu sein.
Leitfaden zu audiovisuellen Medien in den WCAG (Englisch)
Eigentlich sollten Sie als Redakteur*in nicht mit Farben in Berührung kommen, weil die bereitgestellten Formatvorlagen alle Fälle abdecken und bereits optimiert sind. Diese Regeln gelten für den Fall, dass sie wider Erwarten etwas Neues erfinden müssen.
Wenn Sie Grafiken einfügen, oder Texte einfärben, stellen Sie sicher, dass ausreichende Kontraste vorhanden sind. Wenn Vordergrund- und Hintergrundfarben in ihrer Helligkeit zu ähnlich sind, könnte der Kontrast möglicherweise zu gering sein. Hierbei handelt es sich nicht um Fotografien, sondern um Symbole, Schaubilder oder Diagramme. Nutzen Sie einen Kontrast-Checker.
Achten Sie darauf, Informationen nicht ausschließlich durch Farben zu vermitteln.
Beispiel: Beim Anzeigen einer Fehlermeldung oder Warnung sollte diese nicht nur durch Farbe (Gelb/Rot) zu erkennen sein, sondern auch mit einem Icon gekennzeichnet werden.
Beispiel 2: Bei einem Schaubild mit verschiedenen Kurven sollte die Unterscheidung zwischen den Kurven nicht nur durch Farben erfolgen, sondern auch durch unterschiedliche Darstellungsformen wie beispielsweise gestrichelte oder gepunktete Linien.
Um zu überprüfen, ob Ihre Inhalte barrierefrei sind, können Sie verschiedene Tools verwenden. Hier sind zwei Beispiele:
…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.
I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.
If that sounds like you could use my help, let’s talk! 💬