Magazinbereich von mindshape

Magazin Barrierefreie Websites: die wichtigsten Faktoren

Barrierefreie Websites sind notwendig, um Ihre Inhalte für jede:n Nutzer:in zugänglich zu machen. Denn jede:r Besucher:in 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 zusätzlich auf assistive Hilfsmittel angewiesen. Worauf Sie bei der Gestaltung Ihrer Webinhalte achten sollten und wie Sie diese auf Barrierefreiheit prüfen können, haben wir Ihnen im Folgenden zusammengefasst – inklusive Checkliste, in der alle relevanten Regelungen Berücksichtigung finden.

Liza Müller von mindshape
Autorin
Liza Müller
Creation

Was versteht man unter einer barrierefreien Website?

Eine barrierefreie Website ist 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 jede:n Benutzer:in Ihrer Website.

Die Besucher:innen Ihrer Website sollen unabhängig von persönlichen und technischen Einschränkungen (Barrieren) alle 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:innen 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.

Wir unterstützen Sie bei der Gestaltung Ihrer barrierefreien Website!

Unsere Expert:innen prüfen Ihre Website entsprechend aktuell geltender Richtlinien für Barrierefreiheit im Web. Gemeinsam entwickeln wir eine Strategie, um Ihre Webpräsenz für alle Nutzer:innen und mögliche assistive Hilfsmittel zugänglich zu machen. Melden Sie sich jetzt für eine kostenfreie und unverbindliche Erstberatung!

Welche Barrieren sind häufig anzutreffen?

Zu Barrieren zählen sowohl technische Einschränkungen als auch körperliche, geistige sowie seelische Einschränkungen, die in §3 des Deutschen Behindertengleichstellungsgesetzes (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 es bei der Gestaltung Ihrer Website zu beachten gibt.

  • Technische Einschränkungen: Inhalte einer Website sind nicht für die Ausgabe durch assistive Hilfsmittel geeignet (u. a. durch fehlende Untertitel, Alternativtexte etc.); 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 einige Empfehlungen und Richtlinien, an die Sie sich halten können.

Gesetze und Richtlinien zur Barrierefreiheit von Web-Angeboten

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.), die Produkte entsprechend der Barrierefreiheit erstellen. Sie werden von der Web Accessibility Initiative (WAI), einer speziellen Arbeitsgruppe des W3C, aufgestellt.

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

Seit 2002 ist in § 3 des Deutschen Behindertengleichstellungsgesetzes 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 und bedienbar 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.

2016 trat die EU-Richtline 2016/2102 für einen barrierefreien Zugang zu Websites und mobilen Anwendungen öffentlicher Stellen in Kraft. Bis 2018 hatten alle Mitgliedsstaaten der Europäischen Union Zeit, die Richtlinie umzusetzen. Neben der Anpassung des Behindertengleichstellungsgesetzes wurde auch die BITV 2.0 überarbeitet. Seither müssen alle Webinhalte, Office-Dokumente und PDFs barrierefrei zugänglich und bedienbar sein. Nicht-webbasierte mobile Applikationen müssen seit Ende Juni 2021 Barrierefreiheit gewährleisten. Ab 2025 soll die EN 2019/882 durch das Barrierefreiheitsbestärkungsgesetz (BSFSG) einsetzen. Ziel dieser EU-Richtlinie ist es, einen einheitlichen Standard in puncto Zugänglichkeit von Dienstleistungen und Produkten im Web zu ermöglichen.

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:innen vergrößern. Wenn wir Websites erstellen, prüfen wir die Barrierefreiheit der Seiten ebenfalls mit Blick auf diese Richtlinien. 

Checkliste für barrierefreie Websites: Tipps für die Gestaltung

Um Ihre Website barrierefrei und gemäß den Richtlinien der WAI zu gestalten, orientieren Sie sich an den folgenden Tipps:

  • 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: Geben Sie Maßeinheiten für Schriften, Bereiche und Abstände usw. relativ an (em- oder %-Angaben). Da manche Nutzer:innen 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: Eine Website sollte auf allen Endgeräten gut lesbar sein.
  • Einhalten einer aussagekräftigen Struktur: Setzen Sie die Überschriften h1-h6 korrekt ein. Es darf nur eine Hauptüberschrift (h1) existieren, auf die eine h2 und im weiteren Verlauf des Inhalts 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, ist daher auch die Navigation per Tastatur bedeutend.
  • Kontrastverhältnis: Setzen Sie auf kontrastreiche Farben. Achten Sie allem auf einen ausreichenden Kontrast zwischen Vorder- und Hintergrundfarben (gerade für Texte mit kleiner Schriftgröße wichtig).
  • Kurze und verständliche Sätze: Verwenden Sie einen einfachen Satzbau und verzichten Sie weitgehend auf Fremdwörter.
  • Hochdeutsch: Mit leicht verständlicher Sprache in Hochdeutsch erreichen Sie alle Nutzer:innen besser. Hochdeutsch wird eher von Vorleseprogrammen erkannt als Jugendsprache oder ähnliches – sollte diese Sprache aber beabsichtigt oder gar Fremdwörter für den Kontext relevant sein, empfiehlt sich ein zusätzliches Lexikon mit Erklärungen.
  • Akronyme und Abkürzungen: Diese zeichnen Sie am besten mit dem vorgesehenen HTML-Element <abbr> aus.
  • Aussagekräftige Metadaten: Befüllen Sie Title-Tags und Meta-Description.
  • Textalternativen/Bildbeschreibungen (Alternativtexte): 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 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. Sie lesen Nutzer:innen sämtliche Inhalte und Elemente (Grafiken, Text etc.) vor. Das Ganze wird wahlweise über Lautsprecher oder Kopfhörer wiedergegeben.

Zudem können Nutzer:innen mit einem Screenreader Kontaktformulare ausfüllen oder Links erkennen. Diesen folgen sie dann entweder auf eine andere Seite oder überspringen sie zum jeweils nächsten Link. All das funktioniert allerdings nur dann problemlos, wenn Ihre Seite auch so programmiert wurde, dass der Screenreader die Seitenstruktur Ihrer Website erkennt. Links und Formulare müssen dafür als solche gekennzeichnet sein. 

Neben dem Screenreader sind aber vor allem Braille-Zeilen relevant für blinde Menschen. Sie bestehen aus einer Lochmasken-Schiene, durch die einzelne Stifte beim Auslesen des Textes hochgedrückt 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 kommen zum Beispiel Touchpads, Minitastaturen oder Joysticks zum Einsatz. Auch die Steuerung über einen Kopf- sowie Mundstab ist 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.

Die Spracherkennungssoftware wandelt gesprochene Worte in Text um, überträgt sie und gibt sie aus. Grundsätzlich wird zwischen einer sprecherabhängigen und sprecherunabhängigen Spracherkennung unterschieden. Bei der sprecherabhängigen Spracherkennung muss die Software, anders als bei der sprecherunabhängigen Erkennung, auf die Stimme und Sprechweise der sprechenden Person abgestimmt werden. Dies erfordert ein gezieltes Sprachtraining. 

Vergrößerungssoftware

Eine Vergrößerungssoftware lohnt sich besonders für Menschen mit einer temporären oder dauerhaften Sehschwäche und ermöglicht eine pixelweise Vergrößerung des Computerbildes. Dabei spielt die Software immer einen bestimmten vergrößerten Bildschirmausschnitt aus, der 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 spezielle 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), der 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 das möglich – empfehlenswert ist es allerdings nicht.

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

Accessible Rich Internet Application (ARIA)

Der WAI-ARIA ist ein Webstandard des W3C und ermöglicht Webentwickler:innen, Webinhalte und 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. Achten Sie bei der Verwendung darauf, 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:

AttributBedeutung
aria-labelBezeichnung für ein HTML-Element
aria-hiddendefiniert die Art des HTML-Elements (z. B. article, alert oder slider)
aria-liveIst für Statusmeldungen zuständig (sagt dem Screenreader, ob und wann er die:den Benutzer:in unterbrechen soll, um sie:ihn von aktuellen Veränderungen in Kenntnis zu setzen.)
aria-live="polite"Bedeutet, dass Aktualisierungen eine geringe Dringlichkeit haben. Die:der Nutzer:in erhält die Informationen dazu erst, wenn sie:er gewisse Aktivitäten (z. B. Tippen, Lesen) unterbricht.
aria-live=“assertive“Bedeutet, dass Aktualisierungen eine hohe Dringlichkeit haben. Die:der Nutzer:in wird unmittelbar informiert und in ihren:seinen Aktivitäten unterbrochen. Das geschieht vor allem bei Fehlermeldungen. Sind mehrere Live-Regionen auf einer Webseite vorhanden, entscheidet das aria-live-Attribut über die Reihenfolge der Benachrichtigungen. Der Wert „assertive“ hat dabei immer Vorrang.
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 Klick auf die Taste F12 und dann auf „weitere Tools“ im Menü geöffnet werden.

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

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.

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 Expert:innen 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.

Siteimprove

Siteimprove ist ein kommerzielles Online-Tool, das 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

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.  

Unser Fazit zu barrierefreien Websites

Da heutzutage immer mehr Informationen online zugänglich sind, wird auch die Barrierefreiheit von Websites zunehmend wichtiger. Damit ist das Thema auch für eine Vielzahl von Unternehmen relevant, die auf verschiedene Zielgruppen eingehen, die Bedienbarkeit erhöhen und das bestmögliche Nutzererlebnis bieten möchten.

Allerdings sind barrierefreie Websites 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 eine wesentliche Grundlage für die Zugänglichkeit eines Webauftritts.

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.

Häufige Fragen zu barrierefreien Websites

Eine Website gilt als barrierefrei, wenn sie von allen Besucher:innen 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. Alles in allem: Barrierefreiheit steht für hohe Benutzerfreundlichkeit.

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, das in den Chrome Developer Tools integriert ist.

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

Gute Beispiele für barrierefreie Websites, die 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.

Für ganzheitlichen Erfolg im Online Marketing

SEO Consulting

Wir helfen Ihnen dabei, Sichtbarkeit in Suchmaschinen zu erlangen und mehr qualifizierte Besucher:innen auf Ihre Website zu führen. Dafür legen wir uns ins Zeug – mit Leidenschaft, geballtem Know-how und über 19 Jahren Markterfahrung als SEO-Agentur. Bereits seit 2002 unterstützen wir Kund:innen im Bereich Suchmaschinen-Optimierung.

Mehr zum SEO Consulting

Content-Kreation

Ihr digitaler Erfolg entsteht durch kreative Inhalte, die Ihre Website-Besucher:innen informieren und begeistern. Als erfahrene Agentur für Content-Kreation entwickeln wir eine Strategie für Ihr Content Marketing, die auf Ihr Unternehmen und Ihre Zielgruppen zugeschnitten ist. Im Zentrum stehen die richtigen Inhalte an der richtigen Stelle Ihrer Website.

Mehr zur Content-Kreation

Webauftritt optimieren

Als zentraler, virtueller Berater entwickeln wir gemeinsam mit Ihnen Ihre performante, individuelle und professionelle Website. Unsere Website Services reichen dabei von der strategischen Konzeption über ein ästhetisches, funktionales UX/UI-Design und die individuelle Entwicklung bis hin zur laufenden technischen Website-Betreuung.

Mehr zu Website Services

Wir unterstützen Sie auf dem Weg zur barrierefreien Website!

Finden Sie mit unseren Expert:innen die passende Strategie für Ihren Website-Erfolg. 
Lassen Sie sich jetzt beraten und rufen Sie uns an!

Weitere spannende Beiträge zum Thema Website-Erstellung