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.
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.
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:
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.
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:
Öffnen Sie die Chrome Developer Tools. Klicken Sie dafür die rechte Maustaste und wählen Sie »Untersuchen«.
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.
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 Sonneneinstrahlung.
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.
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.
Unsere neuesten Blogbeiträge
Lesen Sie mehr zu toujou und TYPO3, warum SEO gar nicht so schwer ist, goldene Regeln für die Kommunikation und immer wieder Tipps & Tricks für Ihre Website.