Die Umsetzung digitaler Barrierefreiheit auf deiner Website: Praktische Tools & Tipps

Warum ist digitale Barrierefreiheit wichtig?

Viele Menschen in Deutschland leben mit einer Form von Behinderung – sei es körperlich, geistig, visuell, auditiv oder motorisch. Eine barrierefreie Website ermöglicht es diesen Menschen, sich selbstständig zu informieren, einzukaufen oder Formulare auszufüllen – ohne Hilfe von Dritten. Digitale Barrierefreiheit ist also ein entscheidender Schritt in Richtung Inklusion und Chancengleichheit im digitalen Raum.

Außerdem: Barrierefreie Websites sind ab 2025 Pflicht.

Tools zur Prüfung der Barrierefreiheit

Bevor wir in die einzelnen Prüfpunkte einsteigen, lohnt sich ein Blick auf hilfreiche Werkzeuge für die Anforderungsprüfung. Mit diesen Tools analysierst du deine Website auf Barrierefreiheit und nimmst gezielte Optimierungen vor:

• WAVE Web Accessibility Tool: Zeigt direkt auf der Website Barrieren wie fehlende Alt-Texte oder unzureichende Kontraste an.

• Silktide: Ganzheitliches Analyse-Tool, das Websites umfassend auf digitale Barrierefreiheit prüft und klare, visuell unterstütze Optimierungsvorschläge liefert

• Screenreader (z. B. NVDA): Mit ihnen testest du, ob Inhalte zugänglich vorgelesen werden können.

• Keyboard Testing (Tab-Test): Manuelles Testverfahren zur Prüfung der Tastaturbedienbarkeit.

• Eye-Able: umfassendes Tool zur Analyse und Bewertung deiner Website. Es liefert dir detaillierte Informationen zu bestehenden Barrieren und gibt dir konkrete Handlungsempfehlungen, um diese zu beheben.

WCAG-Prüfpunkte und ihre Umsetzung

Im Folgenden zeige ich dir, wie du ein paar ausgewählte Anforderungen der Konformitätsstufe AA konkret auf deiner Website prüfen und verbessern kannst. Ein Überblick der betrachteten Prüfpunkte und Tools:

Alternativ Texte

Alle Informationen in Nicht-Text-Form (z. B. Bilder und Icons, die nicht rein dekorativ sind) müssen mit Textalternativen versehen sein. Alt-Texte sollen maximal 80 Zeichen haben, da gängige Braille-Reader bei dieser Grenze umbrechen. Sie sollen nicht nur das Bild beschreiben, sondern auch den Kontext, in dem das Bild eingebettet ist. Wenn das Bild beispielsweise Ruhe und Gelassenheit ausdrücken soll, muss sich das im Alt-Text wiederspiegeln.

Hier siehst du ein Beispiel, wie ein Alt-Text für ein Bild, welches Ruhe und Gelassenheit widerspiegeln soll, aussehen kann.

Kontrolliere, ob alle Bilder, die nicht rein dekorativ sind, ein alt-Attribut haben. Bei dekorativen Bildern kannst du ein leeres Alt-Attribut verwenden, damit Screenreader die Bilder überspringen. Icons können mit einem aria-label oder versteckten Texten gekennzeichnet werden.

Übrigens: Wir bieten eine ergänzende Schulung an, die die barrierefreie Contentpflege genauer beleuchtet. Unsere Expertin Vanessa zeigt dir, wie du barrierefreie Alternativ-Texte für Bilder, Seitentitel, Linktexte und mehr erstellst. Somit verbesserst du nicht nur die Nutzerfreundlichkeit deiner Website für die User, sondern auch deine Performance in der Suchmaschine!

aria-label

Das aria-label gibt einem Element einen beschreibenden Namen oder Text, den Screenreader vorlesen können. Es wird oft bei Buttons, Links, Eingabefeldern oder Icons benutzt, die nur durch ein Symbol dargestellt werden, damit Nutzer*innen mit Sehbehinderung trotzdem verstehen, wofür das Element steht oder was es macht.

Hier siehst du, wie ein dekorativ eingefügtes Bild im HTML-Code aussehen kann:

Tool-Tipp: Hier kannst du die Tools WAVE und Silktide verwenden. Diese zeigen dir problematische oder fehlende Alt-Texte visuell an.

Videos

Videos, in denen gesprochen wird, brauchen entsprechende Untertitel. Wenn ein Video wichtige visuelle Informationen vermittelt, die aber nicht erklärt werden, muss eine Audiobeschreibung oder Textalternative zur Verfügung stehen. Prüfe hier, ob dein Video Szenen hat, in denen etwas gezeigt, aber nicht erklärt wird. Sobald eine Szene ohne passende Erklärung unverständlich ist, braucht dein Video ein Transkript oder eine Audiodeskription.

Ein Beispiel: In dem unten gezeigten Player gibt es eine separate Audiospur mit Audiodeskription. Der Player pausiert das Video dabei automatisch an ausgewählten Stellen und beschreibt, was in dem Video zu sehen ist.

Der Player an der Seite ist der Able Player. Dieser kann mittels CSS angepasst und im Design der Website dargestellt werden.

Tool-Tipp: Wenn dein Video über den YouTube-Player eingebunden ist, kannst du ein Transkript ganz einfach von YouTube erstellen lassen.

Kontraste

Zu niedriger Kontrast ist einer der BFSG-Fehler im Webdesign, die wir häufig bei Kunden vorfinden. Wenn Text über einem Bild liegt, muss der Kontrast zwischen Text und Bild bei mindestens 4.5:1 liegen. Dies gilt auch für normalen Text. Dazu zählt jeder Text, der bspw. keine Überschrift ist. Überschriften, großer Text und auch Nicht-Text-Elemente brauchen ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund.

Tool-Tipp: Hier kannst du ebenfalls die Tools WAVE und Silktide verwenden, um die Kontraste zu überprüfen.

Tastaturbedienbarkeit

Deine gesamte Website muss per Tastatur bedienbar sein. Dies kannst du prüfen, indem du dich mit der Tabulator-Taste auf deiner Tastatur durch deine Website navigierst. Wichtig ist es hier, auf die Fokusreihenfolge zu achten. Der Fokus sollte von oben nach unten und von links nach rechts verlaufen. Wenn der Fokus auf einem Element liegt, sollte dieses gut sichtbar umrandet sein. Achte hier auch darauf, dass es keine Tastaturfallen gibt und dass sich Akkordeon-Elemente oder Dropdown-Menüs per Tastatur aufklappen lassen.

Hier siehst du, wie ein Fokusrahmen aussehen kann:

Wichtige Tastenkürzel (Windows) für korrekt umgesetzte Tastaturbedienbarkeit:

Checkliste für korrekt umgesetzte Tastaturbedienbarkeit:

Probiere, dich mit den oben genannten Tastenkürzeln über die eigene Website zu navigieren. Dadurch bekommst du ein Gefühl dafür, wie gut sie per Tastatur bedienbar ist. Nutze dann die folgende Checkliste, um die korrekte Umsetzung zu bestätigen:

✓  Alle interaktiven Elemente sind per „Tab/Shift+Tab“ erreichbar

✓ Aktionen sind per Tastatur mit „Enter“ oder „Leertaste“ auslösbar

✓  Elemente sind z. B. mit den Pfeiltasten veränderbar

✓  Der ausgewählte Fokus ist sichtbar und der Fokusrahmen ist mindestens 2 px breit

✓  Fokus-Reihenfolge ist sinnvoll und folgt der visuellen und inhaltlichen Struktur

✓  Keine Tastaturfallen, aus denen man bei Navigation rein mit der Tastatur nicht mehr herauskommt

✓  Keine Einzeltasten-Shortcuts (ohne „Ctrl/Alt/Shift)

Links

Der Zweck eines jeden Links muss allein durch den Linktext oder den Kontext erkennbar sein. Ersetze nicht-aussagekräftige Texte wie „Hier klicken“ oder „Mehr erfahren“ und verwende stattdessen aussagekräftige Linktexte wie „PDF zum Download“ oder „Mehr zur Anmeldung“. Achte darauf, dass es keine doppelten Linktexte mit unterschiedlicher Zielseite gibt.

Hier in dem Beispiel kannst du erkennen, dass der Link „Alle Referenzen ansehen“ lautet anstatt nur „Mehr erfahren“.

Zielgröße

Interaktive Elemente wie Buttons oder Links müssen groß genug sein, damit diese auch mit den Fingern bedient werden können. Die Elemente dürfen nicht zu nah beieinanderliegen und müssen mindestens 24x24 px groß sein. Für die Konformitätsstufe AAA liegt das Mindestmaß sogar bei 44x44 px.

Wie hier bei dem Beispiel zu sehen, kannst du über die Entwicklerkonsole (F12) herausfinden, ob Elemente die erforderliche Zielgröße aufweisen.

Fazit der ausgewählten Prüfpunkte

Wie du siehst, gibt es einige Stellschrauben, die die barrierefreie Nutzung deiner Website maßgeblich beeinflussen. Die hier gezeigten Prüfpunkte sind nur ein Teil dessen, was im Rahmen der digitalen Barrierefreiheit umgesetzt werden sollte. Für eine genaue und ausführliche Prüfung sowie weiteren Support stehen wir gerne zur Verfügung.

Barrierefreiheit beeinflusst die Nutzererfahrung

Eine barrierefreie Website ist kein Sonderprojekt, sondern fester Bestandteil moderner Webentwicklung. Sie sorgt dafür, dass Menschen mit und ohne Einschränkungen deine Inhalte verstehen und deine Angebote nutzen können.

Digitale Barrierefreiheit bedeutet auch: Bessere Struktur, klarere Inhalte, verständliche Navigation – und all das kann sich auch positiv auf die Performance deiner weiteren Suchmaschinenoptimierungs-Maßnahmen auswirken.

Die gute Nachricht: Viele Barrierefreiheitsmaßnahmen lassen sich bereits mit einfachen Mitteln umsetzen. Nutze die vorgestellten Tools, verinnerliche die Tipps zu den ausgewählten WCAG-Prüfpunkten, und verankere das Thema dauerhaft in deinem Entwicklungsprozess.

Immer noch ein großes Fragezeichen im Kopf oder keine internen Kapazitäten deine Website barrierefrei zu gestalten? Wir unterstützen gerne auf dem Weg zur digitalen Barrierefreiheit: Von der Prüfung deiner Website bis zur Umsetzung der anfallenden Maßnahmen. Melde dich gerne bei uns über anfragen@web-netz.de für ein unverbindliches Erstgespräch, in dem wir besprechen, wie wir den Weg gemeinsam gehen können.

Liebe Grüße

Paula Herbst

Bildquelle: istock.com/bilalulker