Digitale Barrierefreiheit 2/3 – Checkliste barrierefreie Website

Ein barrierefreies Internet ist für eigentlich alle Menschen entscheidend, um uneingeschränkt am digitalen Leben teilzuhaben. Also: Was können wir tun, damit Websites für alle zugänglich sind? »How to barrierefreie Website?« 

Von der Gestaltung über Content bis zur technischen Umsetzung gibt es viele Stellschrauben, um das zu erreichen. Der Katalog ist lang und man kann und muss viel machen. Und klar, das kann stellenweise echt kompliziert sein. Genau deshalb lohnt es sich, einfach mal anzufangen. 

tl;dr

• Barrierefreie Websites sind wichtig für alle, um am digitalen Leben teilzunehmen.
• Designer:innen, Entwickler:innen und Redakteur:innen können zusammenarbeiten, um Barrierefreiheit zu erreichen.
• Designer:innen können klare Strukturen verwenden und auf gutes Design achten.
• Redakteur:innen sollten klare und verständliche Texte erstellen und alternative Texte für Bilder bereitstellen.
• Entwickler:innen können mit passendem HTML, CSS und ARIA-Tags sicherstellen, dass die Website zugänglich ist.
• Regelmäßige Tests sind wichtig, um Barrierefreiheit zu gewährleisten und zu verbessern.
• Es ist wichtig, Barrierefreiheit von Anfang an zu berücksichtigen und kontinuierlich daran zu arbeiten.

Barrierefreies Design

Designer:innen spielen eine entscheidende Rolle bei der Entwicklung von barrierefreien Websites. Sie können dafür sorgen, dass das Design ansprechend und zugänglich zugleich ist. Barrierefreiheit bedeutet nicht, dass das Design darunter leiden muss. Im Gegenteil, ein gut gestaltetes Design kann die Benutzererfahrung und Benutzbarkeit für alle verbessern. Designer:innen können klare Strukturen verwenden, gut lesbare Schriften wählen, auf Kontraste und Farben achten etc. Darüber hinaus können sie sich auch mit Nutzer:innen austauschen, um deren Bedürfnisse besser zu verstehen und in das Design einzubeziehen.

Farbe und Kontrast

• Kontrast zwischen Text und Hintergrundfarbe beachten und überprüfen (AA Großer Text: 4.5:1 , Kleiner Text: 3:1).
• Prüfung ist erforderlich bei Text und Grafiken, die für das Verständnis der Website wichtig sind.
• Der Kontrast sollte auch nicht zu stark sein. z.B. auf einem weißen Hintergrund sollte man ein leicht aufgehelltes Schwarz verwenden
• Das Verständnis von Inhalten sollte nie ausschließlich von Farbmarkierungen abhängig sein.

Schriftart

• Die Schriftart beinhaltet alle benötigten Schnitte. z. B. Regular, Bold, Italic
• Die Schriftart beinhaltet alle benötigten Zeichen und Sonderzeichen.
  z. B. »ß«
• Eine klare und gut lesbare Schrift wählen, die in großen & kleinen Textgrößen funktioniert.
• Die einzelnen Zeichen sollten nicht zu breit oder zu schmal sein.
• Die Strichstärke sollte nicht zu dünn oder zu dick sein. d. h. feine und fette Schriftschnitte vermeiden.
• Die Strichstärke der einzelnen Zeichen sollte nicht zu stark variieren.
• Alle Zeichen sollten sich voneinander absetzen und klar erkennbar sein.

Typographie

• Die Schrift sollte groß genug sein, um sie einfach lesen zu können (mindestens 16px, das ist jedoch sehr von der gewählten Schrift abhängig).
• Die Zeilen bei Fließtexten sollten nicht zu lang oder zu kurz sein, damit sie gut lesbar sind (ca. zwischen 45 und 75 Zeichen pro Zeile).
• Die Zeilenhöhe sollte gut zu lesen sein (nicht zu wenig oder zu viel Abstand zwischen den Zeilen).
• Überschriften sollten sich vom Fließtext durch Größe, Schnitt oder Farbe absetzen.
• Wichtige oder längere Inhalte sollten nicht in Versalien oder kursiv geschrieben sein.

Media

• Grafiken sollten Bildunterschriften haben.
• Eine Grafik nicht als einziges Mittel zum Verständnis für Inhalte verwenden.
• Icons sollten am besten informativ sein und nicht nur als Dekoration fungieren.
• Die Bedeutung der Icons sollte gängig sein.
• Texthintergrund nicht transparent gestalten oder das Bild unter dem Text stark abdunkeln, wenn Text auf einem Bild steht.
• Animationen sollten nicht zu schnell ablaufen oder flackern.
• Es sollte einen Pause-Button für Animationen, Bewegtbild oder Audio vorhanden sein.
• Audio- oder Videoinhalte sollten nicht von alleine starten.

Layout und Hierarchien

• Wichtige Inhalte sind gut zu erkennen und einfach lesbar.
• Inhalte sind gut strukturiert und in Hierarchien eingeteilt.
• Die Lesereihenfolge sollte beachtet werden.
• Abstände zu den einzelnen Elementen in einem visuell angenehmen Verhältnis anlegen, z. B. keine zu großen Abstände in Listen oder zwischen einzelnen Modulen der Seite.

Barrierefreier Content

Auch Redakteur:innen können ein paar Dinge bei der Erstellung von barrierefreiem Web-Content beachten. Sie können durch klare und verständliche Texte dazu beitragen, dass die Informationen für alle Nutzer:innen zugänglich sind. Dazu gehört die Verwendung einfacher und leicht verständlicher Sprache sowie die Strukturierung des Inhalts mit aussagekräftigen Überschriften und Absätzen. Auch beim Einsatz von Bildern, Videos oder Audio gibt es Stellschrauben für weniger Barrieren.

Text

• Die Verwendung von H1 bis H6 Überschriften hilft dabei, die Seite klar zu strukturieren und eine intuitive Navigation zu ermöglichen.
• Durch das Verwenden von aussagekräftigen Texten als Links wird für alle Nutzer:innen deutlich, wohin der Link führt und welche Informationen sie erwarten können.
• Kurze und klar formulierte Titel sowie Einleitungstexte erleichtern es den Nutzer:innen, den Inhalt der Seite schnell zu erfassen und sich zurechtzufinden.
• Inhalte in Einfacher Sprache oder Leichter Sprache zur Verfügung stellen.

Media

• Alt-Texte nicht vergessen.
• Text- und Audioalternativen für Video- und Audio-Inhalte schaffen, z. B. Untertitel bzw. Audiodeskription für Video, Transkript für Audio

Struktur

• Seitenstruktur klar und logisch aufbauen
• Aussagekräftige Seitentitel wählen
• Unterseiten mit »Leichter Sprache« und »Gebärdensprache« erstellen. 

Barrierefreier Code

Devs sitzen an einem wichtigen Hebel in Sachen Barrierefreiheit von Websites. Viele Menschen greifen auf technische Assistenzsysteme wie Screenreader oder Tastaturnavigation zurück, um eine Website zu nutzen. Darum sind die technischen Grundlagen auch entscheidend, um Barrierefreiheit einer Website herzustellen. Das fängt beim HTML oder dem Page-Layout an und hört beim Testing noch lange nicht auf. Hier sind ein paar Dinge, auf die Entwickler:innen achten sollten:

Semantic HTML

• Der wichtigste und am meisten unterschätzte Teil. Für jeden Use-Case das passende Element benutzen. Beispiel: div button, div headline

Page Layout

• Inhaltlich korrekte Struktur der Seite in header, nav, main, aside, footer usw.
• Skiplinks für sich wiederholende Elemente (Bypass).

ARIA

• ARIA steht für »Accessible Rich Internet Applications«
• Extra Markup für bestimmte Fälle.
• Die erste Regel von ARIA: nicht verwenden, wenn ein äquivalentes natives HTML vorhanden ist.

CSS

• Relative Einheiten für Text und Layout benutzen, damit alles mitskaliert, wenn die Schriftgröße verändert wird.
• Media-Queries benutzen für Reduced Motion.

Text 

• Gute Struktur ist wichtig: Headlines in korrekter Hierarchie, Text in Paragraphen, Listen-Elemente usw.

Media

• Text-Alternativen für nicht-dekorative Bilder 
• Transkripts für Video- und Audiofiles

• Alternative Optionen für weitere Medienformen, z.B. anstatt eines virtuellen Rundgangs lieber ein Video 
• Automatische Animationen vermeiden bzw. stoppbar machen (reduced motion)

Testing

• Mit linting tools oder w3c validator den Code untersuchen und frühzeitig potenzielle Zugänglichkeitsprobleme finden und entsprechende Anpassungen vornehmen.
• Browser Plugins zum Testing nutzen (Google Lighthouse, Axe-Tools, Plugins die bestimmte Behinderungen simulieren wie Handschwäche/Zittern oder Sehschwächen)
• System-Tools vom Browser und vom OS nutzen und Seite testen (größere Schrift, mehr Kontrast, reduzierte Animationen, Dark-Mode, Vergrößerungstools etc.)
• Website mit Tastaturnavigation sowie Screen Reader Desktop und Mobile testen.

Ja gut, und jetzt?

Die gute Nachricht ist: Es gibt ein paar Maßnahmen, die einfacher umzusetzen sind als andere. Dazu gehören:

• Alternativ-Texte für Bilder können in den meisten CMS direkt durch Redakteur:innen gepflegt werden
• Texte strukturieren und aussagekräftige Titel für Links setzen
• Anpassungen am CSS für mehr Kontrast oder größere Schrift sind mit einem kleinen Audit recht einfach umzusetzen

Für andere Maßnahmen braucht es aber mehr Vorlauf. Man muss tiefer in den Code gehen, Content überarbeiten oder sogar ganz neu erstellen.

• Untertitel für Videos
• Videos mit Gebärdensprache
• Beiträge in leichter Sprache
• ARIA-Tags für einfache Bedienbarkeit mit Assistenzsystemen

Im besten Fall wird Barrierefreiheit nicht einfach nachgerüstet, sondern gleich von Anfang an mitgedacht und umgesetzt. Barrierefreiheit ist auch nicht einmal gemacht und dann passt das schon für die Zukunft. Das Gesetz »nach dem Launch ist vor dem Launch«, gilt auch hier. Also geht es auch um Strukturen und Prozesse. Das kannst und solltest du tun:

• Such dir Hilfe und Beratung (am besten nicht nur rechtlich)
• Mach einen Audit
• Mach User Testing
• Mach Trainings in deinem Unternehmen
• Schau dir das Thema Leichte Sprache an
• Sprich darüber und zeig anderen was du gemacht hast

Extra: Barrierefreie CMS

Mal weg von der Website und der Perspektive der Nutzer:innen. Denn hinter den meisten Websites steht ein Content Management System. Redakteur:innen nutzen CMS, um Inhalte auf der Website zu pflegen, Landingpages anzulegen, Artikel zu verwalten etc. Das CMS-Backend ist im Grunde genommen auch nur eine Webseite oder -App, daher spielt Barrierefreiheit natürlich auch hier eine Rolle und es gelten für die Zugänglichkeit dieselben Regeln wie für eine Website (das Frontend)

Bei CMS ist Barrierefreiheit ein Thema, das etwas komplexer ist. Es gibt nicht das eine CMS, das alle Anforderungen erfüllt. Einige bringen Barrierefreiheitsfunktionen "Out of the Box" mit, während andere durch Erweiterungen und Plugins erweitert werden können.

Aber zum Glück es gibt auch hierfür spezielle Richtlinien vom W3C für "Authoring Tools Accessibility" (ATAG), die sicherstellen sollen, dass die Tools zum Erstellen von Inhalten für möglichst viele Benutzer:innen zugänglich sind.

Diese Richtlinien sind in zwei Teile unterteilt: Guideline A bietet Anleitungen zur barrierefreien Gestaltung von Authoring-Tools. Guideline B legt fest, dass Funktionen vorhanden sein müssen, die die Erstellung barrierefreier Inhalte unterstützen. Hier geht es jedoch nicht nur um CMS, sondern auch um andere Arten von Tools wie z. B. Fotobearbeitung. 

CMS sind Softwareprodukte, die regelmäßig weiterentwickelt werden. Daher lohnt es sich, genau hinzuschauen, was sie für die Barrierefreiheit tun und wie sich das verändert. Beliebte CMS wie Wordpress und Drupal oder auch Wix haben solide Barrierefreiheitsfunktionen für Redakteur:innen. Jedoch schneiden in Deutschland beliebte CMS wie Typo3 oder Magnolia in Bezug auf Barrierefreiheit nicht so gut ab. Bei Produkten aus den USA sieht das anders aus.

Wir bevorzugen moderne CMS wie Webflow oder Strapi. Webflow ist praktisch das modernere Wordpress und bietet solide Funktionen in beiden Bereichen. Vor allem bei Guideline B der ATAG schneidet es gut ab. Es hat eine Selbstverpflichtung zur Barrierefreiheit und wurde von blinden Menschen mit Screenreadern erfolgreich getestet.

Strapi ist ein Open-Source, self-hostable Headless CMS, bei dem Frontend und Backend besser getrennt sind. Das Backend dient ausschließlich zur Datenpflege und ist daher übersichtlich und sauber. Im Frontend hat man volle Kontrolle über die barrierefreien Funktionen, und Strapi hat ebenfalls eine Selbstverpflichtung zur Barrierefreiheit. Beide sind also gut geeignet, um in einem möglichst barrierefreien Tool Websites zu erstellen, die selbst auch barrierefrei sind.

PS: Unter dem Schlagwort »Barrierefreiheit« findet Ihr hier auf der Website eine Sammlung von Projekten mit einem großen Schwerpunkt auf eben diesem Thema.

Hier geht es zu Teil 1 der Serie: »Die absoluten Basics«. Teil 3 folgt demnächst.