Blog

Barrierefreie Websites: Die wichtigsten Faktoren

Worauf Sie bei der Gestaltung achten sollten und wie Sie Barrierefreiheit prüfen können.

Barrierefreie Websites sind notwendig, um Ihre Inhalte für jedermann zugänglich zu machen. Denn für Menschen mit körperlichen Einschränkungen ist zu berücksichtigen, dass diese auf assistive Hilfsmitte angewiesen sind.

Was versteht man unter einer barrierefreien Website?

Unter einer barrierefreien Website versteht man ein Web-Angebot, das ohne zusätzliche Installationen oder (technische) Einschränkungen für jeden zugänglich ist. Der Begriff der barrierefreien Website bezieht sich also nicht nur auf Menschen mit physischen und / oder psychischen Beeinträchtigungen, sondern generell auf jeden Benutzer Ihrer Website.

Der Besucher Ihrer Website soll unabhängig seiner persönlichen und technischen Einschränkungen (Barrieren) all Ihre Inhalte ohne Probleme lesen und auch die Interaktionsmöglichkeiten nutzen können. Die Herausforderung Ihrerseits besteht allerdings darin, allen Anforderungen der Barrierefreiheit und gleichzeitig auch den Bedürfnissen der Benutzer, ohne jegliche Einschränkungen, gerecht zu werden. Ihre barrierefreie Website sollte dementsprechend sowohl für Sehende optisch ansprechend sein als auch für Menschen, die auf technische Hilfsmittel angewiesen sind, zugänglich sein. 

Welche Barrieren sind häufig anzutreffen?

Zu Barrieren zählen sowohl technische Einschränkungen als auch körperliche, geistige sowie seelische Einschränkungen, welche im §3 in dem Deutschen Behindertengleichstellungsgesetz (BGG) Berücksichtigung finden. Neben diesen Barrieren gibt es zudem noch zahlreiche Barrieren, die temporär bedingt sind.

Hier finden Sie eine Auflistung möglicher Barrieren, die Sie bei der Gestaltung Ihrer Website berücksichtigen sollten.

  • Technische Einschränkungen: Inhalte einer Website sind nicht für die Ausgabe durch assistive Hilfsmittel geeignet; keine oder nicht-funktionstüchtige Lautsprecher; Verwendung älterer Browser oder Text-Browser
  • Einschränkungen des Sehens: leichte bis starke Sehschwäche – kontrastarme Inhalte sowie Formen sind kaum wahrnehmbar / erkennbar; Blindheit; Farbsehschwächen (z.B. Rot-Grün-Schwäche); Temporäre Beeinträchtigung des Sehens (entzündetes oder verletztes Auge etc.)
  • Einschränkungen des Hörens: Taubheit; Temporäre Beeinträchtigung des Gehörs
  • Motorische Beeinträchtigungen: gebrochene oder fehlende Körperteile etc.; diverse körperliche Einschränkungen

Um diese Barrieren zu erkennen und abzubauen, existieren Empfehlungen und Richtlinien, an die Sie sich halten können.

Gesetze und Richtlinien

Die Web Content Accessibility Guidelines (WCAG) sind die weltweit geltenden Standards des World Wide Web Consortium (W3C). Die WCAG sind Richtlinien für alle auf Entwicklerseite beteiligten Interessensgruppen (Redakteure, Web-Developer etc.), welche Produkte entsprechend der Barrierefreiheit erstellen. Sie werden von der Web Accessibility Initiative (WAI), einer speziellen Arbeitsgruppe des W3C, aufgestellt.

Die Richtlinien der WAI stellen dabei keine rechtliche Verpflichtung dar. Sie sollen lediglich als Vorlage für entsprechende nationale Bestimmungen, wie die der Barrierefreihe Informationstechnik-Verordnung (BITV) in Deutschland dienen. 

Barrierefreie Websites sind im BGG §3 festgelegt

Seit 2002 ist in § 3 des Deutschen Behindertengleichstellungsgesetzes (BGG) festgelegt, dass Web-Angebote barrierefrei zu gestalten sind. Die BITV – seit 2011 BITV 2.0 – ist als Ergänzung des Gesetzes zu verstehen und basiert auf den Richtlinien des W3C. Sie soll bewirken, dass Informationstechniken für Menschen mit Beeinträchtigungen jeglicher Art zugänglich sind.

Es gibt zwei Prioritätsstufen, welche die Konformitätsstufen der WCAG beinhalten. Priorität 1 sollten alle Bereiche des Web-Angebots erfüllen. Navigations- und Einstiegsangebote hingegen sollten auch den Anforderungen der Prioritätsstufe 2 erfüllen. Die Verordnung gilt im Speziellen für sämtliche öffentlich-zugänglichen Web-Angebote des Bundes. Private und kommerzielle Seiten gehören nicht dazu, können sich aber an den WCAG des W3C orientieren.

Unter der Beachtung der genannten Richtlinien können Sie möglichst vielen Menschen den Zugang zu Ihrem Web-Angebot ermöglichen und somit die Menge potenzieller Besucher vergrößern. Um dies angemessen zu gestalten, können auch folgende Tipps hilfreich sein.

Checkliste: Das sollten Sie bei der Gestaltung Ihrer barrierefreien Website beachten

Um Ihre Website barrierefrei und gemäß den Richtlinien zu gestalten, sollten Sie auf folgende Dinge achten:

  • Strikte Trennung von Inhalt, Struktur und Design - ermöglicht im Nachhinein eine problemarme Aktualisierung der Inhalte ohne Eingriffe in das Design und umgekehrt
  • Skalierbarkeit: Maßeinheit für Schriften, Bereiche und Abstände usw. relativ angeben (em- oder %-Angaben). Da manche Nutzer die Funktion der Browser zur Vergrößerung von Schriften etc. nutzen, sollte selbst bei einer 200% Vergrößerung der Inhalt noch gut lesbar und erkennbar sein. 
  • Responsivität: Website sollte auf allen Endgeräten gut lesbar sein
  • Einhalten einer aussagekräftigen Struktur: Überschriften h1-h6 korrekt einsetzen (nur eine Hauptüberschrift (h1), der eine h2 folgt, welcher wiederum entweder eine weitere h2 oder eine h3 folgt)
  • Auf HTML-Grundbegriffe sollte nicht verzichtet werden (z. B. für das Einbinden individueller Styles per style-Angaben)
  • Navigation: Das Bewegen durch die Website sollte leicht und einfach zu verstehen sein
  • Kontrastverhältnis: kontrastreiche Farben einsetzen - v.a. ausreichender Kontrast zwischen Vorder- und Hintergrundfarben (gerade für Texte mit kleiner Schriftgröße wichtig)
  • Hochdeutsch wird eher von Vorleseprogrammen erkannt als Jugendsprache oder ähnliches - sollte diese Sprache aber beabsichtigt sein, empfiehlt sich ein zusätzliches Lexikon mit Erklärungen
  • kurze und verständliche Sätze (einfacher Satzbau)
  • weitgehender Verzicht auf Fremdwörter 
  • Akronyme und Abkürzungen mit vorgesehenem HTML-Element abbr auszeichnen
  • Aussagekräftige Metadaten wie Title-Tags und Meta-Description
  • Textalternativen / Bildbeschreibungen: alt-Attribute sollten für Bilder und Formulare immer ausgefüllt sein, da Vorlese-Anwendungen diese für die Sprachausgabe des Inhaltes benötigen; das title-Attribut ist ebenso wichtig, gerade für Links

Assistive Technologie für ein barrierefreies Internet

Menschen mit Behinderung stoßen bei der Benutzung von Computern und anderen Endgeräten auf gewisse Barrieren, die Ihnen den Zugang zu gesuchten Informationen verweigern. Assistive Technologien sind dafür geeignete Hilfsmittel. Sie erlauben es diesen Menschen, überhaupt erst einmal in die Welt der Digitalität einzutauchen. 

Screenreader und Braille-Zeilen

Screenreader gehören zu den speziellen Ausgabegeräten, die vor allem blinden Menschen die Navigation durch eine Website ermöglichen. Mithilfe des Screenreaders können dem Nutzer sämtliche Inhalte, Elemente (Grafiken, Text etc.) über einen Lautsprecher oder Kopfhörer vorgelesen werden.

Zudem kann der Nutzer mit einem Screenreader Kontaktformulare ausfüllen oder Links erkennen, denen dann entweder auf eine andere Seite folgen oder überspringen. All dies funktioniert allerdings nur dann problemlos, wenn Ihre Seite auch so programmiert wurde, dass der Screereader die Seitenstruktur Ihrer Website erkennt. Links und Formulare müssten dafür ebenfalls als solche gekennzeichnet sein. 

Verwendung eines Brailledisplays für barrierefreie Websites
© elypse - stock.adobe.com

Neben dem Screenreader sind aber vor allem Braille-Zeilen besonders relevant für blinde Menschen. Sie besteht aus einer Lochmasken-Schiene, durch die einzelne Stifte beim Auslesen des Textes hochgedrückt werden und als Braille-Schrift wiedergegeben werden. Hier wird der Inhalt also nicht auf akustischer, sondern auf taktiler Ebene ausgegeben. 

Tastatursteuerung

Es gibt unzählige Ausprägungen von speziellen Tatstaturen: von außergewöhnlich großen zu sehr kleinen Tasten sowie besonderen Tastenbelegungen für die Bedienung mit nur einer Hand ist alles dabei. Die Tastatur kann manuell oder über andere Körperteile (Ellenbogen, Kopf etc.) bedient werden.

Menschen mit eingeschränkter Motorik nutzen in der Regel Tastaturen, die auf ihre Bedürfnisse angepasst sind. So können zum Beispiel Touchpads, Minitastaturen oder Joysticks zum Einsatz kommen. Auch die Steuerung über einen Kopf- sowie Mundstab sind möglich.

Spracheingabe

Als Alternative zur Tastatursteuerung nutzen viele Menschen, deren Sehfähigkeit eingeschränkt ist, Softwarelösungen, die eine Bedienung des Computers über die Sprache ermöglichen. Eine sogenannte Spracherkennungssoftware kann aber auch bei anderen körperlichen Einschränkungen zielführend sein.

Eine solche Spracherkennungssoftware wandelt gesprochene Worte in Text um, überträgt sie und gibt sie aus. Man unterscheidet grundsätzlich zwischen einer sprecherabhängigen und sprecherunabhängigen Spracherkennung. Bei der sprecherabhängigen Spracherkennung muss die Software anders als bei der sprecherunabhängigen Erkennung auf die Stimme und Sprechweise des Sprechers abgestimmt werden. Dies erfordert gezieltes Sprachtraining. 

Vergrößerungssoftware

Eine Vergrößerungssoftware lohnt sich besonders für Menschen mit eingeschränkter Sehfähigkeit. Sie ermöglicht eine pixelweise Vergrößerung des Computerbildes. Dabei spielt die Software immer einen bestimmten vergrößerten Bildschirmausschnitt aus, welcher durch den Nutzer über spezielle Farb- und Kontrasteinstellungen optisch verändert werden kann. 

Navigierbarkeit durch ein barrierefreies Web-Angebot

Die Navigation durch eine barrierefreie Website wird oft über bestimmte HTML- oder JavaScript- Einstellungen geregelt. Eine bestimmte Reihenfolge der Links oder der Steuerelemente wird dafür über tabindex ermöglicht. Neben tabindex gibt es noch den Accessible Rich Internet Snippet (ARIA), welcher vor allem für Screenreader von großer Bedeutung ist. 

Verwendung von tabindex

Zur Navigation durch eine Seite werden normalerweise mittels der Tabulatorentaste Links und Steuerelemente nacheinander in einer bestimmten Reihenfolge im Quelltext angesprungen. Die Tab-Reihenfolge muss in der Regel also nicht verändert werden. Mit dem HTML-Attribut tabindex ist dies jedoch möglich. Empfehlenswert ist dies jedoch nicht.

Auch wenn das tabindex-Attribut noch im HTML als valide gilt, betrachtet Google dies als einen ungünstigen Lösungsansatz. Die Umsetzung ist zumeist fehlerhaft und zieht Probleme für den Nutzer nach sich

Accessible Rich Internet Application (ARIA)

Der WAI-ARIA ist ein Webstandard des W3C und ermöglicht Webentwicklern, Webinhalte und Web-Applikationen für Menschen mit Behinderungen und anderweitigen Einschränkungen zugänglich zu machen. So lassen sich mittels ARIA-Element Navigations-Landmarken sowie JavaScript-Widgets hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten. Es ist bereits in den meisten Browsern und Screenreadern implementiert.

ARIA kommt vor allem dann zum Einsatz, wenn das HTML nicht die nötige Semantik für die Accessibility aufbringt. Bei der Verwendung ist darauf zu achten, dass die Semantik des HTML nicht umdefiniert wird. Es ist nur als Ergänzungstechnik zu verstehen und auch nur dann einzusetzen, wenn Vorheriges der Fall ist.

Folgende Attribute können eingesetzt werden:

aria-label Bezeichnung für ein HTML-Element
role definiert die Art des HTML-Elements (z. B. article, alert, oder slider)
aria-hidden deaktiviert das Element für Screenreader
aria-live Ist für Statusmeldungen zuständig (sagt dem Screenreader, ob und wann er den Benutzer unterbrechen soll, um ihn von aktuellen Veränderungen in Kenntnis zu setzen)
aria-live="polite" Positive Meldung: der Nutzer soll etwas ausspielen, nachdem, was er gerade macht
aria-live=“assertive“ Negative Meldung: ist dringlich, Nutzer sollte sofort ausspielen, was in der Meldung steht (v.a. bei Fehlern)
aria-live=“off“ Deaktivieren der Statusmeldungen

Audit Möglichkeiten

Wenn Sie Ihre Website auf Barrierefreiheit beziehungsweise Accessibility (=Zugänglichkeit) überprüfen wollen, können Sie dies mit folgenden, teils kostenfreien Tools selbst in die Hand nehmen. 

Lighthouse

Lighthouse ist in die Chrome Developer Tools intergriert und ermöglicht viele verschiedene Tests auf Webseiten. So auch der Test auf Accessibility. Seit 2018 ist Lighthouse ein fester Bestandteil des Google Chrome Browser und kann per einfachem Klick der Taste F12 beziehungsweise dem Klick auf „weitere Tools“ im Menü geöffnet werden.

Wenn Sie sich auf der Seite befinden, die Sie testen wollen, wählen Sie den Reiter „Audit“ aus. Daraufhin öffnet sich dann folgendes Fenster.

Lighthouse als Audit-Möglichkeit für Ihre barrierefreie Website
Lighthouse als Audit-Möglichkeit für Ihre barrierefreie Website

Nun klicken Sie die gewünschten Test-Optionen an. Mit dem Klick auf „Run Audit“ beginnt der Test und sie können gespannt auf Ihre Auswertung warten. 

Optimierungsvorschläge für Ihre barrierefreie Website im Lighthouse-Audit
Optimierungsvorschläge für Ihre barrierefreie Website im Lighthouse-Audit

Kleiner Tipp: Ist die Punktzahl oben rechts unter 80, sollten Sie Ihre Seite optimieren. Was dabei den größten Optimierungsbedarf darstellt, können Sie in der Auflistung Ihres Ergebnisses erkennen. 

BITV-Test

Das Testverfahren der BITV wurde vom Bundesministerium für Arbeit und Soziales innerhalb des Projektes „Barrierefrei informieren und kommunizieren (BIK)“ entwickelt. Dieses Testverfahren kann als Selbsttest durchgeführt werden. Dies funktioniert jedoch nur vollständig manuell. Hierfür arbeitet man selbstständig eine Checkliste durch, welche 50 Prüfschritte umfasst. 39 der Prüfschritte lassen sich der Prioritätsstufe 1 zuordnen, welche jedes Web-Angebot erfüllen sollte.  

Eine Liste der Prüfschritte der BITV für barrierefreie Websites
Eine Liste der Prüfschritte der BITV für barrierefreie Websites

Was in jedem Prüfschritt zu bewerten ist und warum und wie dies funktioniert, erfährt man in den einzelnen Prüfschrittbeschreibungen. Die einzelnen Prüfschritte werden unterschiedlich gewichtet. Maximal 100 Punkte können erreicht werden. 95 Punkte bedeuten, dass Webauftritt „sehr gut zugänglich“ ist.

Siteimprove

Siteimprove ist ein kommerzielles Online-Tool, welches automatisierte Testverfahren anbietet, die Ihre Website gemäß der WCAG überprüfen. Unter Angabe Ihrer URL und Ihrer Geschäfts-Email erhalten Sie eine Auswertung Ihrer Website sowie Optimierungsvorschläge bezüglich der Accessibility per Mail.

https://siteimprove.com/de-de/barrierefreiheit/

WAVE-Toolbar

Die WAVE-Toolbar wurde von WebAIM.org entwickelt. Mittels dieser Überprüfung lassen sich wichtige Schlüsse über Ihre Website bezüglich der Zugänglichkeit ziehen. Um die Prüfung zu starten, rufen Sie das Online-Tool auf und geben die URL ein. Die Ergebnisse werden dann mit Symbolen direkt auf der geprüften Seite angezeigt

Wave Toolbar barrierefreie Websites
Eine Übersicht, die links neben der geprüften Seite erscheint und wichtige Informationen über den Optimierungsbedarf Ihrer barrierefreien Website enthält

Wer möchte, kann sich das Tool auch als Extension für seinen Google Chrome Browser runterladen. 

Color-Contrast-Analyser

Der Color-Contrast-Analyser prüft Ihre Website auf Farbkontrastprobleme gemäß den WCAG-Anforderungen und einem Algorithmus zur Berechnung des Kontrastverhältnisses des W3C. Dem Ergebnis können Sie dann entnehmen, ob das Verhältnis zwischen Vorder- und Hintergrundfarbe stimmt und ob alle Konformitätsstufen berücksichtigt wurden.  

Fazit

Barrierefreie Websites sind auf keinen Fall zu unterschätzen. Sie erfordern zunächst einmal die Kenntnis über verschiedene Standards, die in jedem Fall auch auf Ihrer barrierefreien Website Berücksichtigung finden sollten. Die strikte Trennung von Inhalt, Struktur und Design sind dafür sehr hilfreich und als Grundlage zu verstehen.

Der Lighthouse-Audit ist die optimale Möglichkeit, um sich selbst einen ersten Eindruck zu verschaffen, an welcher Stelle Optimierungsbedarf herrscht. Der BITV hingegen lohnt sich aufgrund der selbstständigen Durchführung nur, wenn Sie viel Zeit investieren wollen oder aufgrund von Vorgaben oder Zielgruppen eine hochgradig barrierefreie Website benötigen. Der Vorteil des BITV-Tests gegenüber dem Lighthouse-Audit ist jedoch, dass er staatlich anerkannt ist – zumal er auch erforderlich für Web-Angebote des Bundes ist. Es bietet sich durchaus an, zunächst die automatischen Tools zu verwenden, um dann im Nachgang den manuellen Test als Ergänzung vorzunehmen.

Nehmen Sie mit uns Kontakt auf. Wir beraten Sie gerne.