Barrierefreie Websites: Grundlagen und Anwendung

Eine barrierefreie Website richtet sich nicht nur an Menschen mit Behinderung, sondern verbessert die Nutzerfreundlichkeit für alle.

Barrierefreiheit in Kürze:

  • Barrierefreies Webdesign und Inhalte sind für die meisten Unternehmen und Organisationen keine Pflicht, man kann dadurch aber rund 1/3 der Bevölkerung erreichen.
  • Gut gewählte Kontraste und Laufweite von Texten erleichtern die Lesbarkeit – auch für Menschen ohne Einschränkungen.
  • Hierarchische Überschriften und sinnvoll gewählte Alterantivtexte von inhaltlich relevanten Bildern – also keine Schmuckbilder – sind auch bei der SEO hilfreich.

Doch lohnt sich die Investition in Barrierefreiheit und was muss dazu unternommen werden?

Das a11y-Projekt bietet eine gut strukturierte und interaktive Checkliste zur Barrierefreiheit (auf Englisch).

Zielgruppe

Im Allgemeinen betreffen Barrieren Menschen

  1. mit Sehschwäche oder Blinde, die (manche) Inhalte nicht erkennen können,
  2. mit motorischen Einschränkungen, denen die Navigation schwerfällt,
  3. mit auditiven Einschränkungen oder Gehörlose, welche Videos und Audioformate wie Podcasts nicht oder nur schwer verstehen können,
  4. mit Konzentrationsschwäche oder Migrationshintergrund, welche sich schwertun, komplexe Informationen zu verstehen.

Der Aktion Mensch zufolge sind 30 % der Bevölkerung von Einschränkungen betroffen, für 10 % der Bevölkerung ist Barrierefreiheit unerlässlich. Dabei sind in Deutschland 13 Millionen Menschen von Sehschwäche, motorischen oder auditiven Einschränkungen betroffen (Quelle: Statista 2017). Dazu kommen 11,8 Millionen Ausländer (Quelle:  DeStatis 2021). Nicht zu beziffern sind Menschen unter Stress und/ oder mit Konzentrationsschwäche,   welche ebenfalls barrierefreien Angeboten im Internet profitieren können.

Ziele

Es gibt vier Grundsätze des barrierefreien Zugangs:

  1. Wahrnehmbarkeit, d. h., die Informationen und Komponenten müssen den Nutzern in einer Weise dargestellt werden, dass sie sie wahrnehmen können
  2. Bedienbarkeit, d. h., der Nutzer muss die Komponenten der Nutzerschnittstelle und die Navigation handhaben können
  3. Verständlichkeit, d. h., die Informationen und die Handhabung der Nutzerschnittstelle müssen verständlich sein
  4. Robustheit, d. h., die Inhalte müssen robust genug sein, damit sie zuverlässig von einer Vielfalt von Benutzeragenten, einschließlich assistiven Technologien, interpretiert werden können.

Rechtslage

Disclaimer: Ich habe die Inhalte gewissenhaft recherchiert, bin aber kein Rechtsanwalt und kann daher auch nicht für die Korrektheit garantieren.

Barrierefreiheit wird auf Bundesebene in der Barrierefreie-Informationstechnik-Verordnung – BITV 2.0 definiert und ergänzt die EU-Richtlinie 2016/2102, welche den WCAG 2.1 Standard definiert.

Barrierefreiheit ist für die meisten private Unternehmen (noch) nicht verpflichtend, aber für öffentliche Stellen auf Bundes-, Landes- und Kommunaler Ebene schon. Dazu gehören Museen, die Bahn, Bürgerämter.

Allerdings sind gemäß Artikel 2 Absatz 1 Nr. 4 EU-Vergaberechtsrichtlinie auch private Einrichtungen und Dienstleister, die der Öffentlichkeit offenstehen bzw. bereitgestellt werden müssen, zur barrierefreien Angeboten verpflichtet. Dies trifft insbesondere auf Krankenhäuser und kommunale Nahverkehrsunternehmen zu.

Ausgenommen von der Barrierefreiheitspflicht sind Websites und mobile Anwendungen

  • von öffentlich-rechtlicher Rundfunkanstalten nach Artikel 1 Absatz 3 a) und Nichtregierungsorganisationen, die keine Belange von Menschen mit Behinderungen vertreten;
  • mit Online-Karten und Kartendienste, sofern bei Karten für Navigationszwecke wesentliche Informationen in einer barrierefrei zugänglichen Weise digital bereitgestellt werden;
  • mit Inhalten von Dritten, die von der betreffenden öffentlichen Stelle weder finanziert noch entwickelt werden noch deren Kontrolle unterliegen;
  • die als Archive gelten, d. h., die ausschließlich Inhalte enthalten, die weder für aktive Verwaltungsverfahren benötigt werden noch nach dem 23. September 2019 aktualisiert oder überarbeitet wurden.
  • Schulen und Kindergärten nach Artikel 1 Absatz 5, unter der Voraussetzung, dass die Inhalte sich nicht auf wesentliche Online-Verwaltungsfunktionen beziehen.

Außerdem kann von der Richtlinie abgesehen werden, wenn eine barrierefreie Website eine unverhältnismäßige Belastung im Sinne des Artikels 5 darstellen würde.

Grundsätzlich muss eine barrierefreie Website über zwei Informationsseiten verfügen, die auf der Startseite (idealerweise im Footer) verlinkt sind:

  1. Eine Erklärung zur Barrierefreiheit, worin definiert wird, welche Inhalte nicht barrierefrei sind. Eine Mustererklärung zur Barrierefreiheit stellt bspw. das Bayerische Staatsministerium für Digitales bereit.
  2. Ein Feedback-Formular, womit auf Mängel der Barrierefreiheit hingewiesen werden kann. Dieser Feedback-Mechanismus muss in der Erklärung zur Barrierefreiheit integriert sein und einen Link zur Beschwerdestelle des Gesetzesgebers enthalten, falls nicht zeitnah oder keine zufriedenstellende Antwort gegeben wird (Vgl. Mustererklärung).

Darüber hinaus sind ein barrierefreies Webdesign sowie barrierefreie Inhalte erforderlich, auf die ich nachfolgend eingehe.

Die Krankenversicherung BKK ProVita bietet besagte Erklärung zur Barrierefreiheit und das Feedback-Formular im Footer an. Außerdem werden besonders wichtige Inhalte in leichter Sprache und Videos in Gebärdensprache an.

Barrierefreies Webdesign

Das Design einer Website beginnt schon mit der HTML-Auszeichnung des Kopfbereichs („Header“), des Inhaltsbereichs („Content“) und des Fußbereichs („Footer“), damit klar zwischen der Navigation und den Inhalten unterschieden werden kann. Der HTML-Code einer Website sollte zwar W3C-valide sein…

Screenshot des W3C-Validators

… allerdings muss man die dortigen „Fehler“ prüfen, wie das Beispiel zeigt:

  • Pink markiert sind eigentlich keine richtigen Fehler sondern Warnungen, die das Nachladen von JavaScript-Dateien zur Performance-Optimierung betreffen.
  • Die unteren beiden Boxen mit angeblichen CSS-Fehlern sind auch nicht unproblematisch: Entgegen des W3C-Tests existiert das Attribut antialiased (Quelle: Mozilla), nur halt wie bei den JavaScript-Dateien nicht nach deren sehr konservativen Standard, der nicht mehr ganz aktuell zu sein scheint.

Der WCAG-Test wird auf einer geringen Auflösung von 1024px x 768px (B x H) durchgeführt. Normale Websites werden zwar meist auf 1280px x 720px entwickelt (HD-Auflösung), aber durch die geringe Auflösung wird sichergestellt, dass auch auf kleinen und älteren Displays alles korrekt und ohne Querscrollbalken dargestellt wird.

Schrift

Es gibt zwar keine minimale Schriftgröße, aber ich empfehle mindestens auf 16px zu gehen, um eine gute Lesbarkeit zu gewährleisten. Der WCAG-Test definiert allerdings, dass unabhängig von der Browser-Breite die Schriftgröße um bis zu 200 % vergrößert werden können muss. Dazu ist eine maximale Zeilenbreite von 80 Zeichen zulässig – was primär Desktop-Geräte betrifft. Wir bewegen uns bei unseren Websites und einspaltigen Inhalten daher meist unter 800px breite.

Da eine reine Schriftvergrößerung unter Beibehaltung der Spaltenbreiten auf Websites kaum erfüllt werden kann und alle gängigen Browser über eine Zoom-Funktion verfügen, fordert der AA-Test lediglich, dass eine Website diese Funktion unterstützt und es zu keinen Darstellungsfehlern und Überlappungen kommt. Da die meisten Websites responsiv entwickelt werden, sprich gleichermaßen für Desktop- und Mobilgeräte, ist die Schriftvergrößerung mittels Zoom-Funktion meist „automatisch“ gewährleistet.

Eine Website-eigene Zoom-Funktion ist zwar nicht Pflicht, aber wenn man trotzdem eine Funktion zur Vergrößerung von Schriften oder zur Aktivierung eines Kontrastmodus anbieten möchte, empfiehlt sich bei WordPress das Plugin WP Accessibility.

Interaktionen

Beim Styling sollte außerdem dringend darauf geachtet werden, dass Buttons und Links ausreichend groß sind, um sie auch etwas ungelenker oder mit dickeren Fingern (mobil bzw. auf Touch-Displays) klicken zu können. Buttons und Links sollten verständlich bezeichnet und klar als Solche erkennbar sein, beispielsweise durch Unterstreichung letzterer.

Telefon-Nummern werden für Screenreader-Nutzer meist unzureichend beschriftet: Bei Fokuserhalt der Telefon-Nummer wird lediglich die Rufnummer vorgelesen. Diese Information kann schwer in einen Kontext gebracht werden. Hier sollte eine Beschriftung eingesetzt werden, wie „Tel.:“ oder „Über diesen Link erreichen Sie uns telefonisch“.

Zudem sollten alle Interaktionen – Buttons, Links, Formulare, Akkordeons etc. – mithilfe der Tastatur (Tab- oder Pfeiltasten) ansteuerbar sein und funktionieren. Damit Sehgeschädigte ihre Interaktionen mit der Tastatur besser erkennen, empfiehlt es sich :focus Styles in Signal- oder Komplementärfarbe zu definieren.

Farben

Barrierefreiheit bedeutet aber auch, dass die Farben ausreichend Kontrast haben, damit die Inhalte einfach lesbar sind. Ein Text oder ein inhaltlich relevantes Objekt sollten demnach mindestens den WCAG AA Standard erfüllen:

Eines meiner Lieblingstools zur Barrierefreiheit ist der Contrast Checker, mit dessen Hilfe man ermitteln kann, ob sich die auf der Website gewählten Schrift- und Hintergrundfarben ausreichend voneinander absetzen.

Elemente wie Schmuck- oder Hintergrundbilder sind davon per se nicht betroffen. Wenn Bilder aber wichtige Informationen für den Kontext enthalten oder Inhalte darauf abgebildet sind, ist ausreichend Kontrast dringend ratsam. Aus Sicht der Ladezeit-Optimierung empfehle ich auf Schmuck- oder Hintergrundbilder komplett zu verzichten.

Barrierefreie Inhalte

Grundsätzlich sollten Inhalte mit einer hierarchischen Überschriften-Struktur und Formatierungen versehen werden. Das ist übrigens auch zur Suchmaschinenoptimierung dringend empfehlenswert.

Screenshot aus dem Web Accessibility Evaluation Tool (WAVE)

Außerdem sollten leere Absätze und sinnfreie Listen unbedingt vermieden werden. Und umgekehrt sollten alle auflistbaren Elemente auch als solche formatiert werden.

Metadaten

Der Dokumententitel muss den Inhalt der individuellen Seite und das Webangebot (Firmennamen) enthalten. Aus SEO-Sicht ist der Firmenname zwar nur optional, da dieser meist schon in der Domain enthalten ist, aber wenn man den Firmennamen in Kurzform hinten anstellt, ist der Spagat zwischen Barrierefreiheit und SEO möglich.

Textverständnis

Barrierefreie Texte sollten leicht zu verstehen sein. Dabei kann man entweder Inhalte von vorne herein einfacher und in kurzen Sätzen formulieren, oder man bietet sie optional in einfacher Sprache an.

Es gibt zwar keine feste Regel, die vorschreibt, wie einfach oder kompliziert die Inhalte sein sollten, da dies von der Zielgruppe abhängig ist. Wenn man aber alle Menschen erreichen will, sollten Texte auch mit niedriger, sekundärer Schulbildung verstanden werden können. Das bedeutet einen Flesch-Wert von 71 zu erreichen:

Flesch-Reading-Ease-Score Lesbarkeit Verständlich für
0–30 Sehr schwer Akademiker
30–50 Schwer
50–60 Mittelschwer
60–70 Mittel 13–15-jährige Schüler
70–80 Mittelleicht
80–90 Leicht
90–100 Sehr leicht 11-jährige Schüler
Quelle: Wikipedia

Bilder & Videos

Wie bereits erläutert empfiehlt es sich aus Performance-Gründen auf Schmuck- und Hintergrundbilder sowie Videos im Hintergrund von Websites zu verzichten, wenn diese nicht zum Kontext beitragen. Sind Schmuckbilder und -Videos unvermeidlich, sollten dafür keine Alternativtexte hinterlegt werden, da diese meist irrelevant sind und es sehgeschädigten und Blinden Nutzern erschweren, mithilfe eines Screen-Readers die Inhalte einer Website zu verstehen.

Umgekehrt sollten aber alle Medien, die etwas zum Kontext beitragen, mit beschreibenden Alternativtexten versehen werden. In den sogenannten Alt-Tags sollten keine Keywords zur SEO auftauchen, sondern wirklich beschrieben werden, was abgebildet ist. Google kann übrigens Bilder auch ohne Alternativtext schon ziemlich gut verstehen.

Mithilfe des reCaptcha vermeidet Google nicht nur Spam, sondern trainiert seine K.I. zur Bilderkennung.

Zusätzlich sollten Bilder und Videos mit Titeln versehen werden. Videos sollten außerdem mit Untertiteln versehen werden, damit diese erschlossen werden können.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Die Untertitel von Videos eignen sich übrigens auch zur Video-SEO. Mit anderen Worten: Spricht man die Keywords ein, mit denen man gefunden werden will, erhöht das die Reichweite.

Formulare

Formulare sollten mit klaren Beschriftungen („Labels“) versehen werden, damit vor und nach Eingabe von Informationen klar ist, was benötigt wird. Außerdem sollte durch Klick auf die Beschriftung (zum Beispiel auf das Wort “Vorname”) sollte der Mauszeiger in das Eingabefeld springen.

Des Weiteren sollten Formularfelder für das automatische Ausfüllen („Autocomplete“) vorbereitet sein, damit Nutzerinnen ihre Kontaktdaten nicht manuell eintippen müssen.

Das Formular-Plugin GravityForms (Partnerlink) bietet bei Kontaktfeldern mit einem Klick die richtigen Attribute zur Auto-Vervollständigung. Hier werden die Labels für Autocomplete erläutert.

Das Nachricht-Feld in Formularen sollte erst nach Eingabe der Kontaktdaten erscheinen.

Fazit

Eigentlich ist barrierefreie Web-Entwicklung recht leicht, wenn man die Grundlagen zur Lesbarkeit (Kontraste, Schriftgröße, Dimensionen) beachtet, ordentliche Formatierungen anwendet und einfache Sätze verfasst.

Durch eine barrierefreie Website erreicht man mehr Menschen und integriert sie besser in die Gesellschaft. Barrierefreiheit eignet sich auch als Qualitäts-Standard für Websites, denn die Effekte einer ordentlich entwickelten Seite wirken sich auch positiv für die SEO aus.