Barrierefreie Website: 6 Tipps für ein besseres User-Erlebnis

Bis 2025 müssen Unternehmens-Websites barrierefrei sein. Das heißt: Alle Besucher:innen müssen alle Angebote einer Website uneingeschränkt nutzen können. Aktuell herrscht noch viel Nachholbedarf: Laut einer Studie der gemeinnützigen Organisation WebAIM haben 97 Prozent aller Startseiten messbare Hindernisse. Menschen mit einer Sehbehinderung können zum Beispiel die Texte auf einer Website nicht lesen, wenn die Schrift viel zu klein gewählt wurde. Eingebundene Videos wiederum bringen gehörlosen Menschen gar keinen Mehrwert, wenn es keine Alternativen für die Tonspuren gibt.

Wer Inklusion fördern will, muss derartige Hürden aus dem Weg räumen. Der große Vorteil: Barrierefreiheit nützt nicht nur Menschen mit einer Behinderung. Wirklich jede:r einzelne Nutzer:in kann von einer barrierefreien Website profitieren. Du solltest hier nicht nur an lebenslange Behinderungen denken, sondern auch an vorübergehende Beeinträchtigungen, wie zum Beispiel eine verlorene Lesebrille oder eine gebrochene Mouse-Hand. Jeder Mensch sieht sich irgendwann einmal mit einer Barriere konfrontiert, die den optimalen Zugang zu einer Website erschwert. Die meisten Einschränkungen lassen sich allerdings mit einfachen Mitteln auflösen.

Je barrierefreier die Website ist, desto größer ist außerdem die Chance, in den Google-Suchergebnissen weit oben zu landen. Mehr als 200 Faktoren fließen in den Algorithmus ein, der bei der Erstellung der Suchergebnislisten zur Anwendung kommt. Einige dieser Faktoren sind allgemein bekannt; andere werden wie Geheimnisse gehütet, um eine gezielte Manipulation zu verhindern. Klar ist: Für Google stehen die Nutzer:innen an erster Stelle. Eine barrierefreie Website ist deshalb allein aus SEO-Sicht ein Wettbewerbsvorteil. Mit den folgenden Tipps kannst du die Barrierefreiheit deiner Website einfach verbessern.

Mehr Barrierefreiheit bei kognitiven Einschränkungen

Hier kann eine barrierefreie Website unter anderem folgende Hürden überwinden:

• Lernstörungen wie zum Beispiel Dyslexie (Lesestörung)
• Konzentrationsschwierigkeiten durch vorübergehende Medikamenteneinnahme
• Ablenkung durch Lärm

Klare Struktur und gut zugängliche Informationen

Klare Strukturen und gut zugängliche Informationen helfen deinen Besucher:innen, sich zurechtzufinden. Das beginnt schon beim Namen der Website: Je aussagekräftiger er ist, desto einfacher können Nutzer:innen feststellen, ob sie an der richtigen Stelle gelandet sind. Hilfreich können zum Beispiel Endungen, die auf dem Namen einer Stadt oder Region enden, sein. Neben .berlin sind das in Deutschland bisher .hamburg, .koeln, .bayern, .nrw, .ruhr und .saarland.

Die Website selbst sollte so gestaltet sein, dass sich Besucher:innen problemlos auf ihr zurechtfinden. Dazu gehört ein übersichtliches Menü, das mit möglichst wenigen Menüpunkten auskommt. Die Inhalte sind klar strukturiert und in Überschriften, Zwischenüberschriften, Absätze und Aufzählungen unterteilt. Bilder ergänzen deine Texte: Sie lockern besonders längere Textblöcke auf und bewahren das Auge vor Ermüdung.

Leichte oder einfache Sprache

Um sicherzustellen, dass alle Besucher:innen die Inhalte deiner Website verstehen, solltest du auf lesbare und verdauliche Texte setzen. Eine vereinfachte Lesestufe macht hier einen großen Unterschied. Oft ist es aber gar nicht so einfach, den Schwierigkeitsgrad der eigenen Texte einzuschätzen. Wenn du einen Eindruck davon bekommen möchtest, wie sich Texte für geübte Leser:innen von einfachen Texten unterscheiden, schau dir diese Ballade in drei Schwierigkeitsstufen an.

Die Leichte Sprache bietet Orientierung, wenn es darum geht, selbst einfache Texte zu verfassen. Texte in Leichter Sprache enthalten unter anderem keine Fachwörter, Fremdwörter oder komplizierte Satzkonstruktionen. Weil es viele Regeln gibt, kann die Umsetzung der Leichten Sprache eine Herausforderung sein. Hilfestellung bietet das Netzwerk Leichte Sprache. Es hat ein Regelwerk herausgegeben, dass neben den Anforderungen auch viele Tipps zur Umsetzung enthält.

Für die Einfache Sprache gibt es keine festen Regeln – und sie darf auch etwas komplexer sein als die Leichte Sprache. Um die Verständlichkeit von Texten zu erhöhen, sollen allerdings auch hier  komplizierte Wörter oder endlose Schachtelsätze vermieden werden. Tipps zur Einfachen Sprache findest du auf der Website der Bundeszentrale für politische Bildung.

Hürden abbauen bei visuellen Barrieren

Im Bereich Sehen hilft eine barrierefreie Website unter anderem bei diesen Einschränkungen:

• Sehbehinderungen wie zum Beispiel Farbenblindheit
• Vergessene Lesebrille
• Blendendes Sonnenlicht

Große Schrift und hoher Kontrast

Für gut lesbare Texte brauchst du eine gut lesbare Schrift. Kunstvoll verschnörkelte Schriftarten verbieten sich natürlich – viel besser ist eine serifenlose Schrift, die nicht zu klein gewählt ist. Wie groß die Schrift konkret sein sollte, hängt von der Bildschirmgröße sowie dem Abstand zum Bildschirm ab. Ratgeber sprechen häufig von einer Schriftgröße von mindestens 16 Pixeln im Fließtext. Hilfreiche Empfehlungen rund um barrierefreie Schriften findest du hier.

Außerdem solltest du sicherstellen, dass die Schriftfarbe in einem guten Kontrast zum Hintergrund steht. Selbst bei einer kleinen Schrift wird die Lesbarkeit so deutlich erhöht. Darüber hinaus tragen hohe Farbkontraste dazu bei, dass Inhalte auch auf dem Smartphone-Bildschirm noch gut zu erkennen sind. Also: Besser keine grüne Schrift auf gelbem Hintergrund!

Alt-Texte bei Bildern

Der Bild-Alternativtext (oder kurz: Alt-Text) ist die vielleicht bekannteste Schnittstelle zwischen Barrierefreiheit und SEO. Weil Bildschirmleseprogramme nicht wirklich sehen können, benötigen sie den Alt-Text, um ihren Nutzer:innen visuelle Inhalte zugänglich zu machen. Gleichzeitig wird der Alt-Text verwendet, damit Suchmaschinen-Crawler Bildinhalte zuordnen können, und um in der Google-Bildersuche gut zu ranken.

In jedem Content-Management-System hast du die Möglichkeit, bei den Bildangaben auch den Alt-Text einzutragen. Eine Bildbeschreibung hinzuzufügen, ist also kaum mit Aufwand verbunden. Und es gibt noch einen Vorteil: Können die Bilder deiner Website einmal nicht geladen werden – zum Beispiel weil die Internetverbindung schwach ist – werden an ihrer Stelle die Alt-Texte ausgegeben. So gehen die Informationen nicht verloren.

Teilhabe durch auditive Barrierefreiheit

Eine barrierefreie Website ist hier unter anderem für folgende Einschränkungen von Vorteil:

• Taubheit
• Defekte Kopfhörer
• Umgebung, in der man nicht stören will – zum Beispiel im Büro

Videos mit Untertiteln

Videos auf der Website erhöhen die Verweildauer und sind deshalb gut für SEO. Allerdings bringen sie nur eingeschränkt Mehrwert, wenn auf spezielle Bedürfnisse keine Rücksicht genommen wird. Kann ein:e Nutzer:in den Ton aus verschiedenen Gründen nicht hören, solltest du Alternativen anbieten. Die gängigste Variante sind Untertitel, bei denen das Gesprochene einfach in Form von Schrift angezeigt wird. Videoplattformen wie YouTube können automatisch Untertitel erzeugen. Natürlich hast du aber auch die Möglichkeit, die Untertitel manuell hinzuzufügen.

Für noch mehr Benutzer:innenfreundlichkeit sollte die Untertitelfunktion so klar bedienbar sein wie Play und Pause. Das heißt: Sie sollte sich nicht in einem Untermenü des Videoplayers verstecken. Um deinen Besucher:innen die Suche nach der Untertitelfunktion zu ersparen, kannst du sie auch einfach standardmäßig aktivieren.

Ergänzende Beschreibungen

Hilfreich ist auch eine ergänzende Beschreibung des Videoinhalts. Die kannst du zum Beispiel in eine Infobox unter das Video packen. Im Gegensatz zu anderen Maßnahmen, wie zum Beispiel dem Einbinden von Videos in Gebärdensprache, kannst du diese textliche Ergänzung sehr einfach umsetzen. So können nicht nur eingeschränkte Nutzer:innen sondern auch Suchmaschinen die Inhalte deines Videos effizienter wahrnehmen.

Wie barrierefrei ist deine Website?

Alle Punkte berücksichtig? Bestimmt möchtest du anschließend gerne erfahren, wie barrierefrei deine Website jetzt eigentlich ist. Im Internet gibt es eine Reihe von Tools, mit denen du die Barrierefreiheit deiner Website testen kannst. Eines davon ist Lighthouse von Google. Die Browser-Erweiterung bewertet die Inklusivität deiner Website mit einer Punktzahl zwischen null und 100 und zeigt außerdem Möglichkeiten auf, wie du dein Ergebnis verbessern kannst.

Eine andere Variante ist, deine Website einmal von den Menschen ordentlich unter die Lupe nehmen zu lassen, die auf barrierefreie Möglichkeiten tatsächlich angewiesen sind. Ihre Erfahrungen sind sehr wertvoll, wenn es darum geht, Hindernisse zu entdecken, die sonst unbemerkt bleiben. So stellst du sicher, dass auch versteckte Hürden auf deiner Website abgebaut werden.