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. 

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

Vorlesen-Funktion für barrierefreie Websites

Des Öfteren werden für barrierefreie Website weitere Zusatz-Funktionen eingefordert. Prominentes Beispiel hierfür ist die Vorlese-Funktion für eine Website. Doch diese Zusatzimplementierung darf als überholt angesehen werden. Denn alle gängigen Systeme wie iOS, Android, Mac oder Windows sowie die unterstützten Browser besitzen eine integrierte Vorlesefunktion, die sich aktivieren lässt.

Technisch gesehen steht diese Option zudem einer durch die Website bereitgestellten Vorlese-Funktion in nichts nach. Die Sprachausgabe – und damit das Verständnis – ist mindestens deckungsgleich. Gleichwohl müsste eine Vorlese-Funktion  (z.B. Readspeaker) auf der Website mittels Javascript eingebunden werden, was sich wiederum auf die Performance auswirken kann.

Ein weiteres Indiz dafür, dass die Funktion nicht obligatorisch ist: Sie wird von der WAI in den Web Content Accessibility Guidelines nicht erwähnt. Ebenso wenig relevant für eine barrierefreie Website sind im Übrigen folgende Funktionen:

• Styleswitcher (schwarz-weiß auf weiß-schwarz)
• Text-Versionen einer Website (Verzicht auf Bilder etc.)

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. 

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: 

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:

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 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:

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.

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.

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.

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.

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.