Web Content Accessibility Guidelines (WCAG)

Damit Dienstleistungen die Anforderungen des Barrierefreiheitsstärkungsgesetz erfüllen, müssen Webseiten einschließlich der zugehörigen Online-Anwendungen und auf Mobilgeräten angebotenen Dienstleistungen, einschließlich mobiler Apps, auf konsistente und angemessene Weise wahrnehmbar, bedienbar, verständlich und robust gestaltet werden.

Daraus ergeben sich Aufgaben, die sich in die vier Teilbereiche Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, Robustheit unterteilen lassen. Die Basis muss entwicklungsseitig gelegt sein. Gerade bei der Wahrnehmbarkeit und Verständlichkeit müssen sich Editoren aber künftig an feste Regeln halten. Darum geht es hier.

Leitfaden Barrierefreiheit Grafik (PDF – nur intern)

Checkliste

Sind Überschriften als Überschriften ausgezeichnet?
Ist die Überschriftenhierarchie korrekt?
Haben alle Texte einen ausreichenden Kontrast zum Hintergrund?
Wurden darauf verzichtet, Dinge als Überschrift auszuzeichnen, bloß um sie hervorzuheben?
Sind Informative Bilder mit Alternativtexten versehen?
Sind dekorative Bilder NICHT mit Alternativtexten versehen?
Sind verlinkte Bilder mit Alternativtexten versehen?
Wiederholen sich Alternativtext und Titel nicht?
Sind Videos und Audiosequenzen zugänglich? (Untertitel, Audiodeskription, Transkription)
Gibt es Bilder mit Text?

– Sind diese zwingend nötig?
– Ist der im Bild enthaltene Text durch einen Alternativtext zugänglich?
– Erfüllt der Text auf dem Bild die nötigen Kontrastanforderungen?
Wurde auf räumlich-, visuelle Zuordnungen verzichtet? (…in der linken Spalte…, …das Bild unten…, …im blauen Kasten… )
Sind Texte leicht zu verstehen und nicht unnötig kompliziert?

Überschriftenstruktur

Die Strukturierung von Überschriften ist ein wichtiger Aspekt der digitalen Barrierefreiheit, da sie den Benutzern dabei hilft, Inhalte schnell zu scannen und zu verstehen.

Einige Tipps zur Strukturierung von Überschriften sind:

Wir werwenden zur Strukturierung von Überschriften das richtige html-Element von H1 bis H6. Überschriften werden nicht durch bloße Vergrößerung oder Fettung der Schrift simuliert.
Überschriften gliedern einen Text in Sinnabschnitte.
Wir gestalten mit den Überschriften klare Hierarchie, um sicherzustellen, dass die Leser die Beziehung zwischen den verschiedenen Teilen des Textes verstehen können.
Jede Seite hat nur eine H1
Wir lassen kein Headline-Level aus, d.h. auf eine H1 folgt eine H2, dann ggf. eine H3 usw. und dann irgendwann möglicherweise die nächste H2. Wobei die H2 den Seitenaufbau in relevante Kapitel strukturieren.
Wir verwenden aussagekräftige und prägnante Überschriften, die den Inhalt des Abschnitts klar und deutlich beschreiben.
Wir verwenden Headlines nie, um Texte losgelöst von der Headline-Funktion aufzuhübschen. Eine absatzlange Headline darf es nicht geben. Wenn Text auffällig gestaltet werden soll, kann hierfür der "Abstract" verwendet werden.
Verschiedene Headlines einer Seite dürfen nicht den gleichen Text haben.

Links und Textgestaltung

Bezüglich der digitalen Barrierefreiheit bei Links und Texten gibt es mehrere wichtige Punkte zu beachten:

Wir verwenden aussagekräftige Linktexte, damit Benutzer verstehen, wohin der Link führt. Schon der Linktext sollte darauf hinweisen, was bei Klick passiert.
Wir vermeiden die Verwendung von URLs als Linktexte, da diese für viele Benutzer schwer lesbar sein können.
Linktexte sollten 80 Zeichen nicht überschreiten
Wenn auf ein Bild verlinkt wird, braucht dieses ein Alt-Attribut
Wir verzichten so weit es geht auf gestalterische Elemente wie bold (Textfettung), italic (kursiv) und Unterstreichungen bei Texten
Wir kopieren Texte ohne Artefakte aus möglichen Textfällen möglichst über das Klemmbrett im Editor, nutzen die Funktionen des Editors zur Textgestaltung und versuchen so eine möglichst harmonische Ordnung zu schaffen

Farbkontraste

Farbkontraste sind ein wichtiger Faktor für die digitale Barrierefreiheit, da sie dazu beitragen, dass Informationen auf einer Webseite leichter zu erkennen und zu erfassen sind. Ein hoher Farbkontrast zwischen dem Hintergrund und dem Text erleichtert es Menschen mit Sehbeeinträchtigung, den Inhalt zu lesen.

Wir vermeiden Farbkombinationen mit geringem Kontrast: wir vermeiden Farbkombinationen, die einen geringen Kontrast aufweisen, insbesondere zwischen Schrift- und Hintergrundfarben. Farben mit ähnlicher Helligkeit oder Sättigung können für Menschen mit Sehbehinderungen oder Farbsehstörungen schwer zu unterscheiden sein.
Unsere Komponenten helfen dabei, Kontrastregeln sicher einzuhalten. In der Bühne und bei der Wallpaper-Komponente liegt die Verantwortung beim Content Manager, darauf zu achten, dass Kontraste für alle erkennbar bleiben.

Bildbeschreibung

Die accessibility-konforme Bildbeschreibung ist ein etwas umfangreicheres Thema. Wir haben dafür eine eigene Seite gestaltet.

Bilder und Barrierefreiheit