toujou
+49 911 23980-870
30.05.2022 Jérôme Grad

Barrierefreie Website erstellen

So gelingt der Zugang für alle beim Webauftritt

Wussten Sie, dass circa 10 Prozent der Bevölkerung in Deutschland laut Statistischem Bundesamt als (schwer)behindert gilt? Jede zehnte Person benötigt damit beim Website-Navigieren Hilfsmittel wie eine Screenreader o.ä. Um diese Zielgruppe nicht auszuschließen, sollten Sie für einen uneingeschränkten Zugang zu allen Informationen sorgen – und Ihre Website barrierefrei gestalten. 

Was unter barrierefreie Website zu verstehen ist, wieso die Zielgruppe nicht nur Menschen mit Behinderung umfasst und wie Sie die verschiedenen Hürden für Ihren Internetauftritt ausräumen, erläutern wir in diesem Artikel. Zudem erfahren Sie, warum Sie damit nicht nur Ihren Usern, sondern auch Ihrem Unternehmen etwas Gutes tun. 

Starten wir direkt mit einem beispielhaften Vergleich, wie unterschiedlich eine Website wahrgenommen werden kann. 

Website-Template des regionalen Ladens, wie es die meisten sehen.

Website-Template des regionalen Ladens, wie es Menschen mit Rot-Grün-Schwäche sehen.

Website-Template des regionalen Ladens mit Sonneneinstrahlung.

Auf dieser Seite

Was ist unter einer barrierefreien Website zu verstehen?

Eine barrierefreie Website ermöglicht jedem und jeder einen uneingeschränkten Zugang. Alle Website-Besucher:innen sollten demnach zu jederzeit ohne (technische) Einschränkung oder zusätzliche Installation alle Inhalte ohne Probleme lesen und Interaktionen auf der Website starten können. 

Die Richtlinien, auch Web Content Accessibility Guidelines (WCAG), wurden von der Web Accessibility Initiative (WAI) erarbeitet. Sie gelten als weltweiter Standard für barrierefreie Websites. Die WAI ist wiederum eine Arbeitsgruppe des W3C (World Wide Web Consortium). Zudem ist seit 2014 ARIA (Accessible Rich Internet Applications) die vom W3C als Webstandard empfohlene WCAG-Version.

Warum sollte meine Website barrierefrei sein?

Laut Statistischem Bundesamt wurden 2019 insgesamt 10,4 Millionen Menschen mit Behinderung in Deutschland erfasst. Das sind 12,5 Prozent der Bevölkerung

7,9 Millionen, also beinahe jede zehnte in Deutschland lebende Person war schwer behindert. ZUm Navigieren durch das Internet benötigen diese Braille-Zeilen, Screenreader oder zwingend die Tastatur. Ihre Website sollte dafür ausgerichtet sein. 

Doch barrierefreie Websites sind nicht nur für Menschen mit schwerer Behinderung unerlässlich. Knapp ein Drittel der in Deutschland lebenden Bevölkerung ist betroffen. Neben den erfassten Menschen mit Behinderung sind beispielsweise Menschen mit Sehschwäche, mit motorischen Einschränkungen oder Konzentrationsschwächen sowie Nicht-Muttersprachler zu zählen.

Weiter gedacht: Nahezu alle User profitieren von barrierefreien Websites durch hohe Benutzerfreundlichkeit, leichte Bedienbarkeit und gute Lesbarkeit von Texten. 

Kurzum: Mit einer solchen Website tragen Sie Ihren Teil zu einem barrierefreien Internet bei – und ermöglichen allen Menschen den uneingeschränkten Zugang zu Informationen.

Anmerkung: Bei toujou stellen wir uns ebenfalls der Herausforderunge einer barrierefreie Website. Wir bitten zu entschuldigen, wenn dies nicht an jeder Stelle vollumfänglich gelingt und freuen uns über Rückmeldungen zur Optimierung.

Vorteile einer barrierefreien Website

  • Sie zeigen soziale Verantwortung und stärken die Teilhabe von Mitarbeiter:innen mit Behinderung in Ihrem Unternehmen
  • Wirklich alle potenziellen User erhalten Zugang zu allen Informationen
  • Durch mehr User steigt der Marktanteil und damit auch der Umsatz 
  • Barrierefreiheit ist ein Rankingfaktor – so erhöhen Sie Ihre Sichtbarkeit bei Google & Co. 

Inwiefern beeinflusst Barrierefreiheit die Suchmaschinenoptimierung?

Suchmaschinen wie Google durchsuchen mittels Crawler die verschiedenen Webseiten. Dabei können sie nur die Informationen auswerten, die Website-Betreiber:innen zur Verfügung stellen. Dabei gilt: Je mehr Informationen Sie bereitstellen, desto mehr Chancen auf mehr Sichtbarkeit und damit Erfolg mit der Website haben Sie. 

Ein Beispiel: Crawler, auch Bots genannt, können den Text lesen und interpretieren. Hilfreich für die Struktur ist eine Kennzeichnung von Überschriften mittels H1 bis H6. Bilder kann Google aktuell noch nicht (ganz) interpretieren. Hier sollten Sie mittels Alt-Tag (zusätzlich ggfs. einen Title und eine Beschreibung) für jedes Bild Informationen bereitstellen. Nur so versteht die Suchmaschine, was auf dem Bild zu erkennen ist. Im Blogbeitrag zu Bilder-SEO erfahren Sie mehr zu diesem Thema.

Ist eine barrierefreie Website in Deutschland Pflicht?

§3 des Deutschen Behindertengleichstellungsgesetzes (BGG) legt fest, dass (Web-)Angebote barrierefrei zu gestalten sind. 

Das Gesetz ist allerdings nur für öffentlich zugängliche Web-Angebot des Bundes bindend. Private und kommerzielle Websites dient es lediglich als Empfehlung. Die Barrierefreie-Informationstechnik-Verordnung (BITV) ergänzt das Gesetz und der WCAG-Richtlinien.


Barrierefreie Websites – Hürden und Hilfsmittel

Um allen Usern den Zugang zu allen Informationen auf einer Website zu ermöglichen, müssen Sie diese entsprechend aufbereiten. Doch welche Barrieren gibt es überhaupt? Wo sollen Sie anfangen und welche Informationen können Hilfsmittel überhaupt auslesen?

Welche Barrieren gilt es zu beachten?

Mit Barrierefreiheit ist nicht nur das Abbauen von Einschränkungen für Menschen mit Behinderung gemeint, sondern das Reduzieren von Hürden für alle Menschen. Überwindende Barrieren auf einer Website können sein: 

  • Inhalte für persönliche Software-Assistenten (Screenreader, Braillezeilen, Lupe für Schriftvergrößerung) aufbereiten.
  • Alle Website-Elemente für alle Bildschirmgrößen mittels responsivem Design jederzeit zugänglich machen.
  • Inhalte in verständlicher Sprache erstellen.
  • Website-Zugang unabhängig vom Betriebssystem ermöglichen.
  • Browser-Aktualität (Chrome, Safari, Mozilla Firefox, Brave etc.) gewährleisten.
  • Farben mit ausreichend Kontrast ausstatten – vor allem zwischen Hintergrund-, Schrift- sowie Buttonfarben. Denken Sie an Menschen mit Sehschwäche, Rot-Grün-Schwäche und Blinde.
  • Website-Navigation mittels Tastaturen für Touchpads, Miniaturtastatur, Joysticks ermöglichen.

Der Screenreader – ein Beispiel für ein Hilfsmittel

Der Screenreader liest Usern die Website-Inhalte wie Texte, Grafiken und Formulare über einen Lautsprecher oder Kopfhörer vor. Allerdings kann der Screenreader nur das erkennen, was Sie auszeichnen – genauso wie der Google-Bot. 

Beim Text ist dies relativ simpel. Sie tippen im Editor und veröffentlichen die Seite. Schon ist der Text ersichtlich – wobei Sie auch hier eine Struktur vorgeben können.

Grafiken und Formulare sind für alle Sehenden mit den Augen zu erfassen und erfüllen demnach auch ihren Zweck. Doch wer diese Bilder nicht sieht und auch keine Information darüber erhält, wird nicht wissen, dass an dieser Stelle ein gewisser Inhalt dargestellt wird – auch der Screenreader nicht. Folglich fehlt dem (blinden) User diese Information.

Screenreader kostenlos nutzen


Wie erstelle ich eine barrierefreie Website?

Es gibt einige Punkte, die Sie beachten sollten, um eine barrierefreie Website zu erstellen. Wir haben Sie in unserer grafischen Checkliste zusammengetragen und gehen im weiteren Textverlauf detaillierter auf die Punkte ein. 

Checkliste für eine barrierefreie Website

Klicken Sie direkt auf das spezifische Thema, zu dem Sie gerne mehr wissen möchten. 

Inhalt und Design trennen   Einfache Sprache Lesbarkeit  Links  

Alt-Tags bei Bildern Website mit Tastatur navigieren  Reiter-Struktur

Inhalt und Design trennen

Screenreader und andere Hilfsmittel genauso wie Bots arbeiten sich durch eine Seite von links nach rechts und von oben nach unten. Halten Sie auf Ihrer Website Design und Layout nicht sauber auseinander, kann es nach Website-Aktualisierungen bei Screenreadern zu Problemen kommen. 

Daher sollten Sie HTML und CSS für den Aufbau der Website jederzeit strikt trennen. HTML-Elemente sind entsprechend Ihrer Bedeutung einzusetzen. 

Beispiel

Überschriften lassen sich mittels HTML mit H1 bis H6 auszeichnen:

           <h2>Beispielüberschrift</h2>

Für Ihre Website-Besucher:innen sieht eine H2-Headline so aus: 

Beispielüberschrift

Mittels CSS könnten Sie die Überschrift auch in vergrößerter Schrift in einem CSS-fähigen Browser darstellen. Im Quellcode würde das dann so aussehen: 

         <span style="font-size: 1.5em;">Beispielüberschrift</span>

Für Ihre Websitebesucher sieht eine solche "Überschrift" so aus:

Beispielüberschrift

Der Screenreader wird die Überschrift nicht als solche erkennen, da die Struktur (z.B. H2) fehlt. Vielmehr interpretiert er das <span>-Element als normalen Text. Die Schriftgröße (font-size) wirkt nur als Anpassung und würde nur über die Darstellung auf der Website ersichtlich.

Einfache Sprache

Schreiben Sie in verständlicher Sprache. Das heißt: kurze und einfache Sätze anstelle von zeilenlangen Schachtelsätzen. Vermeiden Sie Fremdwörter und erläutern Sie Fachbegriffe soweit möglich. Nutzen Sie Aktiv statt Passiv und trennen Sie zusammengesetzte Wörter durch Bindestriche. Auch Redewendungen, die nicht erläutert werden, sind mit Bedacht einzusetzen. 

Tipp: Nutzen Sie das 4-Augen-Prinzip und lassen Sie jemanden Ihre Texte auf Verständnis prüfen, der außerhalb des Fachbereichs ist.

Formulare

Vermeiden Sie Fehlerquellen beim Ausfüllen von Formularen. Geben Sie klare Anweisungen, was im jeweiligen Feld einzutragen ist, beispielsweise beim Geburtsdatum. 
Prüfen Sie mittels Tabulatortaste die Tastatur-Navigation. Lassen sich alle Formularfelder ohne Maus ausfüllen und das Formular abschicken?

Lesbarkeit 

Um die Schrift zu erkennen – auch bei Sonneneinstrahlung auf einem mobilen Gerät –, sollten Sie einen starken Kontrast zwischen der Hintergrundfarbe und Schriftfarbe wählen.

Führen Sie einen Kontrast-Check durch oder stellen Sie den Kontrast an Ihrem Bildschirm auf das Maximum.

Achten Sie bei der Auswahl der Schrift auf eine lesbare Typographie. Hier gilt: Setzen Sie lieber auf eine bewährte Schriftart als etwas Ausgefallenes. Kontrollieren Sie Abstände zwischen den einzelnen Buchstaben.

Auch wichtig: eine korrekte Rechtschreibung und eigene Rechtschreibregeln im Sinne der Stringenz auf der Website. Sie hilft beim Verständnis.

Links

Interaktive Elemente wie Linkbutton oder Call-to-action sollten sich farblich abheben, um Signalwirkung zu entfalten. Achten Sie auf ausreichenden Abstand zwischen zwei oder mehreren Linkbuttons für die Nutzung auf dem Tablet oder Smartphone. 

Tipp: In der Google Search Console erhalten Sie eine Warnung, wenn dem Bot eine indexierte Seite mit zu wenig Abstand auffällt.

Heben Sie Links im Text mit einem Unterstrich hervor, um sehschwachen Menschen zu helfen. 

Für Blinde sollten Sie die Links für den Screenreader aufbereiten. Nutzen Sie hierbei keine Füllwörter wie »hier klicken«, »online« oder »jetzt informieren«. Schaffen Sie eine aussagekräftige, selbsterklärende Beschreibung. So entscheidet der User direkt, ob er den Link klicken oder weiter springen möchte. 

Beispiel für gelungene Link-Auszeichnung im Quellcode:

   <a href=”Link 1”>Schritt 1 zum Erstellen einer Website</a>

Alt-Tags bei Bildern

Alternative Texte informieren Screenreader und sehbehinderte Menschen über den Bildinhalt im HTML. Demnach sollten Sie Bilder mit dem Alt-Tag ausstatten. Ob dies der Fall ist, können Sie im Quellcode ganz einfach prüfen. 

Beispiel für ein Bild mit Alt-Tag:

  <img src="img/braunertisch.png" alt="Brauner, runder Holztisch in einem Raum mit weißen Wänden.">

Positiver Nebeneffekt: Der Alt-Text, wie der Alt-Tag auch genannt wird, erscheint auch bei langsamer Internetverbindung, bis das Bild tatsächlich geladen hat. So wissen User, dass an der Stelle ein Bild lädt und der Aufbau der Seite nicht asymmetrisch ist. Wie Sie einen guten Alt-Tag für ein Bild schreiben, haben wir in unserem Blogartikel Bilder-SEO erläutert.

Website mit Tastatur navigieren

Ermöglichen Sie das Navigieren auf der Website ohne Maus. Testen Sie, wie weit Sie selbst kommen und wo Sie auf Hürden stoßen. Nutzen Sie lediglich die Tabulatortaste, um Menüpunkte, Unterseiten, Links und Formularfelder anzuwählen. 

Reiter-Struktur/Navigation

Die Reiter-Struktur auf Ihrer Website bietet Platz für die Positionierung die wichtigsten Themen. Fokussieren Sie sich dabei auf verständliche Wörter/Begriffe. Nutzen Sie zur Übersichtlichkeit maximal 5 Reiter und verwenden Sie maximal 3 Navigations-Ebenen.

Frames-Einbindung

Ein Frame ist eine innerhalb der Webseite eingebettete, andere HTML-Seite. Der gezeigt Inhalt bezieht sich demnach auf eine andere Seite. Ältere Screenreader erkennen diese Frames nicht bzw. können den Inhalt nicht wiedergeben.

Neuere Versionen beheben das Problem zwar, allerdings sollten Sie die Frame-Einbindung auf der Startseite dennoch vermeiden. Mitunter können die Crawler die fehlenden Inhalte nicht lesen und stufen die Startseite als gehaltlos ab.

Barrierefreiheit inklusive mit toujou

Mögliche redaktionelle Maßnahmen 

Weitere Maßnahmen zur Barrierefreiheit, die die Usability erhöhen und mit toujou-Websites möglich sind: 

  • Klare themenbezogene Benennung von URLs
  • Webgerechte Darstellung aller Inhalte mittels responsive Design
  • Sitemap für umfangreiche Websites
  • Kontakt, Impressum und Datenschutz sind über den Footer auf jeder Seite erreichbar. 
  • Bildausschnitte für Desktop- und mobile Geräte anpassen.
  • Startseite ist via Logo auf jeder Seite navigierbar.

Darum kümmern wir uns bei toujou

Mit einer toujou-Website profitieren Sie von folgenden technischen Punkten zur Barrierefreiheit:

  • Kompatibilität für die gängigen Browser-Versionen 
  • Interaktive Schaltflächen per CSS (für einen schmalen Quellcode und bessere Performance)
  • Richtige Auszeichnung von Akronymen und Abkürzungen mittels HTML-Element
  • Richtige HTML-Codierung der Umlaute in der deutschen Sprache
  • Automatische Anpassung der Schriftgröße und des Designs an alle Endgeräte 
  • Keine Bild-Captchas zur Verifizierung bei Formularen, die echte Menschen mit Sehschwäche vor Probleme stellt.

Mit toujou zur barrierefreien Website

Sie suchen nach einem persönlichen Partner, der Sie auf technischer Ebene bei der barrierefreien Website unterstützt? toujou bietet responsives Design für alle Endgeräte, korrekte HTML-Auszeichnungen etc. 

Unsere Designvorlagen können zudem per CSS jederzeit individualisiert werden – ohne Barrierefreiheit zu missachten.

Wir begleiten Sie gerne vom Umzug und Übertragen alter Inhalte bis zum Livegang – und bleiben auch danach gerne Ihr Ansprechpartner. Fragen Sie unverbindlich an.


Barrierefreiheit auf Website testen

Es gibt einige Möglichkeiten, mit denen sich die Barrierefreiheit auf einer Website testen lassen.

Lighthouse Report Accessibility Check

Der Accessibility Check des Lighthouse Report bietet einen schnellen und kostenlosen Überblick der Barrierefreiheit einer Seite via Prozentsatz. 

Zudem zeigt der Report Probleme auf, die Sie angehen können. Da die Daten des Reports aus dem google-eigenen Chrome-Browser erstellt werden, bietet diese Option Datenanalyse aus erster Hand. 

So aktivieren Sie den Accessibility Check des Lighthouse Reports:

Lighthouse Report starten. Schritt 1. Per rechten Mausklick auf der Website im Chrome-Browser die Untersuchen-Option anklicken.

Öffnen Sie die Chrome Developer Tools. Klicken Sie dafür die rechte Maustaste und wählen Sie »Untersuchen«. 

Lighthouse Report starten. Schritt 2. Bei Elements-Auswahl auf Lighthouse klicken.

Klicken Sie auf Lighthouse. Falls es Ihnen nicht angezeigt wird, wählen Sie die >> an, sodass sich ein Dropdown-Menü öffnet. Klicken Sie anschließend auf Lighthouse.

Lighthouse Report starten. Schritt 3. Accessibiliy auswaehlen und andere Kategorien abwaehlen. Generate report Button druecken.
  • Stellen Sie die Parameter ein, die Sie analysiert haben möchten. In unserem Fall: Klicken Sie alle ab, sodass nur noch Accessibility miteinem Häkchen versehen ist. Starten Sie den Report durch das Drücken des »Generate report«-Buttons.
Lighthouse Report starten. Schritt 4. Anzeige der Accessibility, hier mit 91 von 100 Punkten.
  • Nach kurzer Zeit erhalten Sie den Prozentsatz für diese Seite sowie eine Auflistung von Optimierungsvorschlägen. 

Dieser Check ist für viele Anwendungsfälle bereits ausreichend. Beträgt die Prozentzahl weniger als 80 Prozent und erscheint die Anzeige nicht mehr grün, sollten Sie diese Seite definitiv optimieren.

Web Disability Simulator

Ein weiteres hilfreiches Tool ist die Chrome-Extension Web Disability Simulator. Sie ermöglicht im Chrome-Browser die Simulation verschiedener Barrieren. Dazu gehören die Weitsichtigkeit, Rot-Grün-Blindheit, Legasthenie, Parkinson oder Konzentrationsstörungen. Auch die Sonneneinstrahlung, vor allem für mobile Endgeräte interessant, können Sie nachstellen. Für jeden Einzelfall sind zudem konkrete Optimierungsvorschläge inklusive.

Website-Template des stationären Handels ohne Filter des Web Disabilty Simulators. 

Website-Template des stationären Handels, wie es Menschen mit Rot-Grün-Schwäche sehen.

Website-Template des stationären Handels mit dem Filter für Menschen mit Konzentrationsschwächen.

Wie Sie den Web Disability Simulator nutzen

Um den Web Disability Simulator zu nutzen, klicken Sie auf den Chrome Web Store und laden die Extension herunter.

Screenshot wie Sie die Chrome Extension Web Disability Checker im Browser aufrufen
Extension wählen

Anschließend öffnen Sie diese, indem Sie in Ihrem Browser-Fenster das Symbol für Erweiterungen wählen und die Extension anklicken.

Screenshot wie Sie in der Chrome Extension Web Disability Checker die gewuenschte Simulation einstellen
Simulation starten

Im Fenster des Web Disability Simulator wählen Sie zwischen den verschiedenen Einstellungen, indem Sie auf das jeweilige Dropdown-Menü klicken.

Wave Report

Beim Wave Report werden die einzelnen Punkte direkt an der jeweiligen Stelle angezeigt. Eine Punkt- oder Prozentzahl wie beim Lighthouse Report gibt es nicht. Dafür erhalten Sie die einzelnen Punkte übersichtlich auf der Seite dargestellt. Auch hier erhalten Sie die Daten kostenfrei.

Screenshot von wave zur barrierefreien Website

W3C-Tool-Liste

Wer tiefer in die Thematik einsteigen will, dem sei die ausführliche Liste mit allen Testmöglichkeiten ans Herz gelegt. W3C stellt die W3-Tools bereit.

BITV-Test

Sehr ausführlich ist der Test zur Barrierefreien-Informationstechnik-Verordnung (BITV-Test). Das vom BIK-Projekt entwickelte Verfahren umfasst beim Prüfen der Barrierefreiheit circa 100 Schritte. Sind die Seiten BITV-konform, wird Ihre Website in der Liste der barrierefreien Websites aufgenommen. Der Test wird vom BIK durchgeführt und ist kostenpflichtig. 

Kostenlos ist hingegen eine Checkliste des BIK, die alle relevanten Punkte für eine barrierefreie Website enthält.

Kostenloser Screenreader und PDF-Checker

Um eine Website auf Barrierefreiheit zu prüfen, nutzen Sie doch einfach mal selbst einen Screenreader. NonVisual Desktop Access (NVDA) bietet einen kostenfreien Screenreader zum Download an.  

Wer nur PDFs überprüfen möchte, findet mit dem PDF Accessibility Checker ein kostenfreies Software-Tool der Schweizer Stiftung »Zugang für alle«.

Accessibility-Test mit Microsoft

Die Microsoft Office Programme ermöglichen einen Web Accessibility Test bereits im Dokument. Dies ist gerade beim Erstellen von Texten in Word hilfreich. Im Microsoft Support finden Sie für das genutzte Gerät eine Anleitung, wie Sie die Barrierefreiheit mit der Barrierefreiheitsprüfung verbessern.