Eine Frau mit langen blonden Haaren und Brille sitzt vor einem Laptop und bedient diesen mit einer ergonomischen Tastatur. Im Hintergrund unterhalten sich zwei Frauen.

Wie barrierefrei ist meine Website? Websites testen

Ist meine Website barrierefrei? Vor dem Hintergrund, die eigene Website barrierefrei gestalten zu wollen, fragen sich viele Unternehmen, wie sie den eigenen Webauftritt auf Barrierefreiheit testen können. Dazu helfen wir Ihnen die Barrierefreiheit Ihrer Website zu prüfen und bieten Checklisten, Tools und Tipps an.

Digitale Barrierefreiheit Checkliste

Sie möchten herausfinden, wie barrierefrei Ihr Web-Auftritt derzeit ist? Dann nutzen Sie unseren Schnelltest!

Bitte beachten Sie, dass diese Checkliste keine vollständige Qualitätskontrolle ersetzen kann und nicht gleichwertig mit einem gründlichen, systematischen Test ist. Ausführliche Tests werden nach dem internationalen „Web Content Accessibility Guidelines“-Standard (WCAG) oder der deutschen Barrierefreie-Informations-Technik-Verordnung (BITV) durchgeführt.

Barrierefreie Elemente einer Website - was ist das?

Barrierefreie Bilder, Texte oder Overlays - beim barrierefreien Aufbau einer Website sind einige Dinge zu beachten. Wenn Sie mit diesen Begriffen noch nichts anfangen können, haben wir Ihnen hier die wichtigsten Merkmale einer barrierefreien Website verständlich zusammengefasst.
Anschließend können Sie mit den Tools dieser Checkliste prüfen, ob Ihre Website die Kriterien der Barrierefreiheit erfüllt.

Ausreichender Kontrast zwischen Vorder- und Hintergrundfarbe

Bestimmte Farbkombinationen haben wenig Kontrast, etwa helles Grau auf Weiß oder Rot auf Schwarz. Das ist nicht barrierefrei, weil Texte und Grafiken mit wenig Kontrast für viele Menschen schwerer zu erkennen sind.

Auch Farbfehlsichtigkeiten – wie die verbreitete Rot-Grün-Schwäche – sollten berücksichtigt werden, indem Sie Farben nicht als einziges Unterscheidungsmerkmal einsetzen. Hohe Kontraste helfen auch bei mobiler Nutzung, Inhalte bleiben so etwa trotz direkter Sonneneinstrahlung im Freien erkennbar.

Schnelltest Kontraste

Mit dem Contrast-Checker können Sie einfach prüfen, ob die Kontraste auf Ihrer Website ausreichen.

Zum Contrast-Checker

Links und Schaltflächen sind über die Tastatur bedienbar

Einige Nutzer*innen haben Schwierigkeiten, kleine Links und Schaltflächen auszuwählen. Was mit einem Mauszeiger noch funktioniert, wird bei der Bedienung mit dem Finger auf einem Tablet oder mit dem Smartphone schnell zu einer Herausforderung.

Interaktive Elemente wie Links oder Schaltflächen sollten über die Tabulator-Taste ↹ erreichbar sein. Die angewählten Flächen sollten außerdem gut sichtbar visuell hervorgehoben werden, damit Nutzer*innen wissen, welcher Button oder Link mit Enter ausgelöst wird.

Schnelltest: Tastaturbedienbarkeit

Sind alle Links und Schaltflächen für die mobile Nutzung optimiert? Abgesehen von Textlinks im Fließtext müssen Schaltflächen für Links und Buttons mindestens 24 Pixel hoch und breit sein.

Screenreader-Kompatibilität einer Website

Blinde Menschen oder Menschen mit Sehbehinderung nutzen Vorleseanwendungen (Screenreader) zum Lesen eines Textes oder für die Beschreibung von Bildern oder Grafiken. Dazu ist es notwendig, dass die Überschriftenstrukturen von Websites korrekt ausgezeichnet sind (H1-H6). Auf diese Weise navigieren sich die Nutzer*innen von Screenreadern durch den Text.

Damit der Screenreader Bilder oder Grafiken auf einer Seite korrekt beschreiben kann, muss eine Bildbeschreibung (auch ALT-Text) für jedes Bild hinterlegt werden. Der Alternativtext dient als Ersatz für das Bild und muss daher die gleiche Information vermitteln wie das Bild.

Übrigens: Auch Suchmaschinen werten ALT-Texte aus und beziehen sie in das Ranking ein.

Schnelltest: Screenreader-Kompatibilität

Mit dem Tool WAVE können sie sich die Struktur ihrer Seite, sowie die hinterlegten Alternativtexte anschauen.

Screenreaderkompatibilität prüfen

Sind meine Alternativtexte aussagekräftig formuliert?

Uninformativer ALT-Text

Illustration eines Handys, in das am unteren Ende ein Aufladekabel eingesteckt ist. Daneben ist ein roter Kreis mit einem X abgebildet. — **Uninformativer Alternativtext:**

Handy lädt auf.

Informativer ALT-Text

Illustration eines Handys, in das am unteren Ende ein Aufladekabel eingesteckt ist. Daneben ist ein grüner Kreis mit einem Haken abgebildet. — **Informativer Alternativtext:**

In ein Smartphone ist am unteren Ende ein Kabel eingesteckt. Das Kabel führt zu einer Steckdose in der Wand.

Nutzung von verständlicher Sprache

Lange Schachtelsätze, Fremdwörter oder unklare Abkürzungen machen Website-Texte für Menschen, die Schwierigkeiten beim Lesen haben, unverständlich.
Außerdem nutzen alle Menschen gerne Websites, die sie schnell und einfach verstehen können. Formulieren Sie kurze Sätze mit einfachem Satzbau. Verzichten Sie auf Fremdwörter oder erklären Sie diese.

Schnelltest: Verständliche Sprache

Verwenden Sie ein Programm zur Analyse von Grammatik, Rechtschreibung und Stil wie LanguageTool.

Verständliche Sprache prüfen

Barrierefreie Bedienbarkeit von Formularen

Damit Ihre Besucher*innen mit Ihrer Website oder Applikation interagieren können, kommen Formulare zum Einsatz. Der Klassiker ist das Kontaktformular, doch auch Sterne-Bewertungen, Warenkörbe und Bezahlvorgänge enthalten Formularelemente. Nur wenn diese Formulare barrierefrei sind, können alle Kunden online mit Ihnen in Kontakt treten oder bei Ihnen einkaufen.

Schnelltest: Formulare

Klicken Sie in Ihrem Formular auf die jeweilige Beschriftung eines Eingabefeldes (zum Beispiel auf das Wort „Vorname“). Springt der Mauszeiger dabei in das Eingabefeld, ist das Feld mit der Beschriftung verknüpft. Dies ist eine wichtige Voraussetzung für barrierefreie Formulare.

Fehlende Barrierefreiheit? So gehen Sie jetzt vor

Sie haben Ihre Website auf Barrierefreiheit getestet und festgestellt, dass es an einigen Stellen Verbesserungsbedarf gibt? Hier haben wir Ihnen zusammengestellt, wie Sie nun vorgehen können, um Ihre Website barrierefrei zu gestalten.

Digitale Barrierefreiheit umsetzen