Praktische Tools und Tipps zur Umsetzung digitaler Barrierefreiheit auf deiner Website

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.

Ausserdem: Barrierefreie Websites sind ab 2025 Pflicht.

Tools zur Prüfung der Barrierefreiheit

Bevor web-netz in die einzelnen Prüfpunkte einsteigt, 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 zeigt dir web-netz, 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:

Barrierefreier Anspruch	Tool(s) zur Prüfung
Alternativ Texte bei Bildern	WAVE, Silktide
Videos mit Untertiteln und Audiobeschreibung versehen	YouTube-Transkriptersteller
Passende Kontraste	WAVE, Silktide
Tastaturbedienbarkeit	Tabulator-Taste
Aussagekräftige Links / Ankertexte	WAVE, Silktide
Zielgrösse von Elementen	Entwicklertools

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: web-netz bietet eine ergänzende Schulung an, die die barrierefreie Contentpflege genauer beleuchtet. Vanessa, Expertin bei web-netz, 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 web-netz häufig bei Kunden vorfindet. 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, grosser Text und auch Nicht-Text-Elemente brauchen ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund.

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

Befehl	Wirkung
Tab/Tab+Umschalt	Bewegt den Fokus vorwärts bzw. rückwärts
Leertaste	Aktiviert/Deaktiviert Checkboxen
Pfeiltasten	Verändern den Wert von Slidern
Return	Löst Buttons aus
Pos1/Ende	Bewegt der Fokus an den Beginn bzw. das Ende der Seite
Pfeil rauf/runter	Wählt Radio-Buttons aus
Alt+Pfeil	Öffnet Select-Boxen, mit Pfeil rauf/runter werden Optionen ausgewählt, mit Return wird die Select-Box gegessen

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össe

Interaktive Elemente wie Buttons oder Links müssen gross 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össe aufweisen.

Fazit der ausgewählten Prüfpunkte

Wie du siehst, gibt es einige Stellschrauben, die die barrierefreie Nutzung deiner Website massgeblich 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-Massnahmen auswirken.

Die gute Nachricht: Viele Barrierefreiheitsmassnahmen 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 grosses Fragezeichen im Kopf oder keine internen Kapazitäten deine Website barrierefrei zu gestalten? web-netz unterstützt gerne auf dem Weg zur digitalen Barrierefreiheit: Von der Prüfung deiner Website bis zur Umsetzung der anfallenden Massnahmen. Melde dich gerne bei ihnen über anfragen@web-netz.de für ein unverbindliches Erstgespräch, um zu besprechen, wie ein gemeinsamer Weg gegangen werden kann.

---