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 jeder Besucher sollte unabhängig von persönlichen oder technischen Barrieren die Inhalte auf Ihrer Website lesen, verstehen und mit ihnen interagieren können. Einige Menschen sind hierbei auf assistive Hilfsmitte angewiesen.

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. Entgegen der weit verbreiteten Annahme bezieht sich dies also nicht nur auf Menschen mit physischen und/oder psychischen Beeinträchtigungen, sondern generell auf jeden Benutzer Ihrer Website.

Die Besucher Ihrer Website sollen unabhängig von 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 als auch für Menschen, die auf technische Hilfsmittel angewiesen sind, erfassbar 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 Barrierefreiheit 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.

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 der WAI zu gestalten, sollten Sie auf folgende Dinge achten:

  • Strikte Trennung von Inhalt, Struktur und Design: Diese 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.
  • HTML-Grundbegriffe: Diese sollten stets verwendet 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. Für Menschen, die keine Maus bedienen können, sollte die Navigation auch per Tastatur möglich sein.
  • Kontrastverhältnis: Kontrastreiche Farben einsetzen – v.a. auf ausreichenden Kontrast zwischen Vorder- und Hintergrundfarben (gerade für Texte mit kleiner Schriftgröße wichtig) achten.
  • 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: Einfachen Satzbau verwenden und auf Fremdwörter weitgehend verzichten.
  • Akronyme und Abkürzungen: Diese mit vorgesehenem HTML-Element abbr auszeichnen.
  • Aussagekräftige Metadaten: Title-Tags und Meta-Description befüllen.
  • Textalternativen / Bildbeschreibungen: alt-Attribute sollten für Bilder und Formulare immer ausgefüllt sein, da Vorleseanwendungen 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 verwehren. 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 und 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. Diesen kann er 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 als solche gekennzeichnet sein. 

Verwendung einer Braille-Zeile für barrierefreie Websites
Braille-Zeile für die Nutzung barrierefreier Websites.

Neben dem Screenreader sind aber vor allem Braille-Zeilen besonders relevant für blinde Menschen. Sie bestehen 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 zum Testen auf Barrierefreiheit

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 integriert und ermöglicht viele verschiedene Tests auf Webseiten. So auch der Test auf Accessibility. Seit 2018 ist Lighthouse ein fester Bestandteil des Google Chrome Browsers 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 „Lighthouse“ aus. Daraufhin öffnet sich dann folgendes Fenster.

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

Nun klicken Sie die gewünschten Test-Optionen, hier „Accessibility", an. Dazu können Sie auswählen, für welches Endgerät (Desktop oder Mobile) Sie den Test durchführen möchten. Mit dem Klick auf „Generate report“ beginnt der Test und sie können gespannt auf Ihre Auswertung warten.

Screenshot des Ergebnis in Lighthouse
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 zur BITV wurde vom Bundesministerium für Arbeit und Soziales innerhalb des Projektes „Barrierefrei informieren und kommunizieren (BIK)“ entwickelt. Ihm liegen die Anforderungen der Barrierefreie-Informationstechnik-Verordnung (BITV) zugrunde. Die BITV wiederum basiert auf den Vorgaben der Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI).

Der BITV-Test beinhaltet 60 Prüfschritte. Zu jedem Prüfschritt gibt es ausführliche Erläuterungen, die genau besagen, was geprüft wird, warum das wichtig ist und wie in der Prüfung vorzugehen ist. Das Testverfahren ist vollständig offengelegt.

Entwicklungsbegleitende und abschließende BITV-Tests können Sie bei erfahrenen Experten in den BITV-Test Prüfstellen in Auftrag geben. Sie können aber auch eine Selbstbewertung nach BITV vornehmen. Diese dient Ihnen als Einschätzung zum Stand der Zugänglichkeit Ihrer Website.

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

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-E-Mail erhalten Sie eine Auswertung Ihrer Website sowie Optimierungsvorschläge bezüglich der Accessibility per Mail.

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

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

Wenn Sie möchten, können Sie sich das Tool auch als Extension für Ihre 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.  

Häufige Fragen zu barrierefreien Websites kompakt beantwortet

Eine Website gilt als barrierefrei, wenn Sie von jedermann ohne Einschränkungen genutzt werden kann. Barrierefreiheit schließt sowohl die Nutzung durch Menschen ohne als auch mit Behinderung (Einschränkungen des Hörens, Sehens oder der motorischen Fähigkeiten) ein. Auch bestehen keine technischen Barrieren, beispielsweise durch die fehlende Ausgabemöglichkeit über gängige Webbrowser.

Zum Test der Barrierefreiheit einer Website gibt es verschiedene kostenlose als auch kostenpflichtige Tools und Anlaufstellen. Um einen ersten Eindruck zur Zugänglichkeit einer Website zu erhalten, eignet sich das kostenfreie Tool Lighthouse, welches in den Chrome Developer Tools integriert ist.

Für eine umfangreiche Prüfung nach Anforderungen der Barrierefreie-Informationstechnik-Verordnung (BITV) ist der BITV-Test zu empfehlen. Dieser kann sowohl durch Prüfstellen als auch eigenständig in einer Selbstbewertung vorgenommen werden. 

Gute Beispiele für barrierefreie Websites, welche im Sinne der BITV barrierefrei sind, finden Sie unter https://www.bitvtest.de/sites_und_agenturen/barrierefreie_websites.html

Durch das Gesetz zur Gleichstellung behinderter Menschen sind öffentliche Stellen des Bundes zur barrierefreien Umsetzung von Websites verpflichtet. Die Anforderungen hierzu sind in der Barrierefreie-Informationstechnik-Verordnung (BITV) definiert. Übergeordnet dazu existieren die weltweiten Standards der Web Accessibility Initiative (WAI), welche in den Web Content Accessibility Guidelines (WCAG) festgehalten sind. Die BITV basiert auf diesen Standards. Für private und kommerzielle Websites besteht keine rechtliche Verpflichtung zur Einhaltung der Richtlinien.

Fazit

Barrierefreie Websites sind auf keinen Fall zu unterschätzen. Sie erfordern zunächst einmal die Kenntnis über verschiedene Standards, die 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-Test lohnt sich, wenn Sie aufgrund von Vorgaben oder Zielgruppen eine hochgradig barrierefreie Website benötigen. Auch wenn Sie als öffentliche Stelle des Bundes zu einer barrierefreien Website verpflichtet sind, sollte dieser Test durchgeführt werden.

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