Eine Website kann modern aussehen und trotzdem schwer zu benutzen sein. Das merkt man oft erst, wenn man sie nicht wie gewohnt mit Maus, großem Bildschirm und perfektem Sehvermögen bedient.
Genau deshalb lohnt sich ein einfacher Barrierefreiheits-Check. Nicht erst, wenn eine Behörde fragt. Nicht erst, wenn ein Kunde sich beschwert. Sondern vorher, ganz praktisch.
Denn viele Barrieren sind keine komplizierten Technikfehler. Oft sind es Dinge wie zu schwache Kontraste, unklare Buttons, schlechte Formulare oder ein Menü, das ohne Maus nicht funktioniert.
Hier findest du 20 Punkte, mit denen du deine Website Schritt für Schritt prüfen kannst.
1. Ist die Website mit der Tastatur bedienbar?
Das ist einer der wichtigsten Tests überhaupt.
Lege die Maus weg und nutze nur die Tastatur. Mit der Tab-Taste springst du von Element zu Element. Mit Enter aktivierst du Links und Buttons. Mit Escape solltest du Popups oder Menüs schließen können.
Prüfe dabei:
Kommst du durch das Menü?
Kannst du Buttons erreichen?
Kannst du Formulare ausfüllen?
Kannst du den Warenkorb oder eine Buchung bedienen?
Siehst du immer, welches Element gerade aktiv ist?
Wenn du selbst nicht mehr weißt, wo du dich befindest, ist das ein klares Warnsignal.
2. Ist der Fokus gut sichtbar?
Beim Tastaturtest ist der sichtbare Fokus entscheidend. Das ist die Markierung, die zeigt, welches Element gerade ausgewählt ist.
Viele Websites entfernen diese Markierung aus Designgründen. Das sieht vielleicht sauber aus, macht die Seite aber schwer bedienbar.
Der Fokus sollte deutlich erkennbar sein. Zum Beispiel durch einen Rahmen, eine farbliche Hervorhebung oder eine klare Unterstreichung.
Wichtig: Er darf nicht nur ganz schwach sichtbar sein. Nutzer müssen sofort erkennen, wo sie gerade sind.
3. Sind Kontraste ausreichend stark?
Hellgraue Schrift auf weißem Hintergrund sieht oft edel aus, ist aber schlecht lesbar. Gleiches gilt für dünne Schrift auf Bildern oder helle Buttons auf hellem Hintergrund.
Prüfe besonders:
Fließtext, Buttons, Links, Formularfelder, Menütexte, Hinweise, Fehlermeldungen und Texte auf Bildern.
Kontrast ist nicht nur für Menschen mit Sehbehinderung wichtig. Auch auf dem Smartphone, bei Sonnenlicht oder auf älteren Bildschirmen macht er einen großen Unterschied.
4. Ist die Schrift gut lesbar?
Eine Website sollte nicht anstrengend zu lesen sein.
Achte auf:
ausreichende Schriftgröße, gute Zeilenabstände, nicht zu lange Zeilen, klare Absätze und verständliche Zwischenüberschriften.
Viele Websites wirken auf dem Desktop noch okay, aber auf dem Smartphone wird der Text plötzlich winzig oder zu eng. Deshalb immer auf mehreren Bildschirmgrößen testen.
Gute Lesbarkeit ist keine Nebensache. Sie entscheidet oft darüber, ob Besucher bleiben oder abspringen.
5. Sind Überschriften logisch aufgebaut?
Überschriften sind mehr als große Schrift. Sie geben einer Seite Struktur.
Prüfe:
Gibt es eine klare Hauptüberschrift?
Sind die Unterüberschriften logisch geordnet?
Wird keine Überschrift nur wegen der Optik verwendet?
Kann man den Inhalt beim Überfliegen verstehen?
Eine gute Überschriftenstruktur hilft Nutzern, sich schnell zu orientieren. Sie hilft aber auch Screenreadern und Suchmaschinen.
6. Haben Bilder sinnvolle Alt-Texte?
Nicht jedes Bild braucht einen langen Alt-Text. Aber wenn ein Bild eine Information trägt, sollte diese Information auch ohne Bild verfügbar sein.
Ein Produktbild, eine Infografik, ein Teamfoto oder ein erklärendes Schaubild sollte sinnvoll beschrieben werden.
Schlecht wäre:
„Bild1.jpg“
Besser wäre:
„Screenshot eines Kontaktformulars mit Pflichtfeldern für Name, E-Mail und Nachricht.“
Bei rein dekorativen Bildern muss man nicht künstlich viel schreiben. Wichtig ist, dass echte Informationen nicht verloren gehen.
7. Sind Links verständlich benannt?
Links wie „hier klicken“ oder „mehr“ sind oft zu ungenau. Besonders problematisch wird es, wenn auf einer Seite zehnmal „Mehr erfahren“ steht.
Besser sind klare Linktexte:
„Leistungen zur Gebäudereinigung ansehen“
„PDF mit Preisliste herunterladen“
„Terminbuchung öffnen“
„Kontaktformular ausfüllen“
Ein guter Link sagt, was passiert, wenn man ihn anklickt. Das hilft allen Nutzern.
8. Sind Buttons eindeutig?
Buttons sollten klar sagen, welche Aktion sie auslösen.
Prüfe besonders Buttons wie:
„Absenden“
„Weiter“
„Jetzt starten“
„Buchen“
„Kaufen“
„Bestätigen“
Bei wichtigen Prozessen sollte der Button möglichst eindeutig sein. Zum Beispiel:
„Kostenpflichtig bestellen“
„Termin verbindlich buchen“
„Anfrage senden“
„Produkt in den Warenkorb legen“
Unklare Buttons erzeugen Unsicherheit. Und Unsicherheit führt oft zu Abbrüchen.
9. Funktionieren Formulare ohne Probleme?
Formulare sind auf vielen Websites der wichtigste Punkt: Kontakt, Anfrage, Newsletter, Login, Buchung, Checkout.
Prüfe:
Hat jedes Feld eine klare Beschriftung?
Sind Pflichtfelder verständlich markiert?
Sind Fehlermeldungen hilfreich?
Bleiben Eingaben erhalten, wenn ein Fehler passiert?
Kann man das Formular mit der Tastatur bedienen?
Funktionieren Checkboxen und Dropdowns sauber?
Eine Fehlermeldung wie „Fehler“ hilft niemandem. Besser ist eine konkrete Erklärung, was korrigiert werden muss.
10. Sind Fehlermeldungen verständlich?
Fehlermeldungen sollten nicht technisch klingen.
Nicht hilfreich:
„Input invalid“
„Validation failed“
„Fehler beim Absenden“
Besser:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte wählen Sie einen Termin aus.“
„Bitte akzeptieren Sie die Datenschutzbestimmungen.“
Gute Fehlermeldungen sagen, wo das Problem liegt und wie man es behebt. Genau das macht den Unterschied.
11. Ist die mobile Ansicht wirklich nutzbar?
Viele Menschen besuchen Websites über das Smartphone. Deshalb reicht ein Desktop-Test nicht aus.
Prüfe mobil:
Ist das Menü gut bedienbar?
Sind Buttons groß genug?
Sind Texte lesbar?
Sind Formulare bequem ausfüllbar?
Überlappen sich Elemente?
Ist der Checkout verständlich?
Stören Cookie-Banner oder Popups?
Eine Website kann am PC ordentlich aussehen und mobil trotzdem fast unbenutzbar sein.
12. Lassen sich Inhalte vergrößern?
Nutzer sollten Inhalte vergrößern können, ohne dass die Website auseinanderfällt.
Teste im Browser-Zoom, ob Texte, Buttons und Layouts noch funktionieren. Achte darauf, ob Inhalte abgeschnitten werden oder horizontales Scrollen entsteht.
Gerade bei älteren Nutzern oder Menschen mit Sehschwäche ist Zoom wichtig. Wenn eine Website dabei kaputtgeht, ist das ein echtes Problem.
13. Sind Popups und Cookie-Banner bedienbar?
Popups, Newsletter-Fenster und Cookie-Banner sind häufige Barrieren.
Prüfe:
Kann man sie mit der Tastatur erreichen?
Kann man sie schließen?
Ist der Schließen-Button sichtbar?
Wird der Fokus richtig geführt?
Blockieren sie wichtige Inhalte?
Sind Buttons klar benannt?
Ein Cookie-Banner, das man nur mit der Maus schließen kann, ist keine Kleinigkeit. Es kann die gesamte Website unzugänglich machen.
14. Starten Videos oder Animationen automatisch?
Automatisch startende Videos, Slider oder Animationen können stören. Manche Nutzer werden dadurch abgelenkt, andere können Inhalte kaum noch lesen.
Prüfe:
Starten Videos automatisch?
Gibt es Ton ohne Zustimmung?
Kann man Animationen stoppen?
Wechseln Slider zu schnell?
Lenken bewegte Elemente vom Inhalt ab?
Bewegung sollte einen Zweck haben. Wenn sie nur Dekoration ist und Nutzer stört, sollte man sie reduzieren.
15. Haben Videos Untertitel?
Wenn Videos wichtige Informationen enthalten, sollten sie auch ohne Ton verständlich sein.
Untertitel helfen nicht nur Menschen mit Hörbehinderung. Viele schauen Videos unterwegs, im Büro oder abends ohne Ton.
Prüfe:
Gibt es Untertitel?
Sind wichtige Aussagen auch im Text erklärt?
Ist der Videoplayer bedienbar?
Sind Bedienelemente gut erreichbar?
Bei längeren Videos kann zusätzlich eine kurze Zusammenfassung helfen.
16. Sind PDFs und Downloads zugänglich?
Viele Websites nutzen PDFs: Preislisten, Anträge, Speisekarten, Broschüren, Datenblätter, Formulare oder Infomaterial.
Prüfe:
Sind wichtige Informationen auch als normaler Website-Text vorhanden?
Sind PDFs nicht nur eingescannt?
Ist der Text im PDF markierbar?
Sind Überschriften und Tabellen verständlich?
Funktionieren Downloads auf dem Smartphone?
Wenn zentrale Informationen nur in einem schlecht lesbaren PDF stehen, ist das für viele Nutzer schwierig.
17. Ist der Warenkorb oder Buchungsprozess verständlich?
Wenn deine Website einen Shop, eine Terminbuchung, einen Kursverkauf oder eine Anmeldung hat, solltest du den kompletten Prozess testen.
Gehe den Ablauf Schritt für Schritt durch:
Produkt oder Termin auswählen, Daten eingeben, Zahlungsart wählen, bestätigen, Bestätigung erhalten.
Achte auf:
klare Preise, verständliche Pflichtfelder, logische Reihenfolge, eindeutige Buttons, gute Fehlermeldungen und eine klare Bestell- oder Buchungsbestätigung.
Bei digitalen Abschlüssen zählt nicht nur die Startseite. Der gesamte Weg muss funktionieren.
18. Sind externe Tools mitgeprüft?
Viele Websites nutzen externe Dienste: Buchungskalender, Zahlungsanbieter, Newsletter-Tools, Chat-Widgets, Kursplattformen, Bewertungs-Plugins oder Cookie-Tools.
Für Nutzer ist das trotzdem Teil deiner Website.
Prüfe deshalb auch:
Calendly oder andere Buchungstools, PayPal oder Stripe, Newsletter-Formulare, eingebettete Karten, Chatfenster, Kursbereiche und externe Checkouts.
Wenn der externe Checkout nicht bedienbar ist, scheitert der Nutzer trotzdem bei dir.
19. Ist die Sprache verständlich?
Barrierefreiheit ist nicht nur Technik. Auch Texte können Barrieren erzeugen.
Prüfe:
Sind Sätze unnötig kompliziert?
Werden Fachbegriffe erklärt?
Sind wichtige Informationen schnell auffindbar?
Sind Leistungen klar beschrieben?
Sind Preise, Bedingungen und nächste Schritte verständlich?
Gerade bei Formularen, Buchungen und Käufen sollte niemand raten müssen, was als Nächstes passiert.
Gute Sprache ist ein unterschätzter Teil von Barrierefreiheit.
20. Funktioniert die Website mit Screenreader-Grundtest?
Du musst nicht sofort Profi im Screenreader-Testen werden. Aber ein einfacher Grundtest kann viel zeigen.
Mit Screenreadern lassen sich Seiten vorlesen und per Tastatur erkunden. Dabei merkt man schnell, ob Buttons sinnvoll benannt sind, Formulare verständlich aufgebaut sind und die Reihenfolge der Inhalte logisch ist.
Typische Probleme sind:
Buttons ohne Namen, leere Links, falsche Reihenfolge, unklare Formularfelder, fehlende Überschriften und Popups, die nicht richtig angekündigt werden.
Für eine gründliche Prüfung braucht es Erfahrung. Aber ein erster Test zeigt oft schon, wo es hakt.
Was solltest du zuerst testen?
Wenn du nicht alles auf einmal schaffst, beginne mit den wichtigsten Nutzerwegen.
Bei einer Firmenwebsite:
Startseite, Leistungen, Kontaktformular, mobile Ansicht.
Bei einem Online-Shop:
Produktseite, Warenkorb, Checkout, Zahlung, Bestellbestätigung.
Bei einer Website mit Terminbuchung:
Terminseite, Kalender, Formular, Bestätigung, E-Mail.
Bei einem Mitgliederbereich:
Login, Passwort vergessen, Dashboard, Downloads, Abrechnung oder Kurszugang.
Teste zuerst dort, wo Nutzer wirklich handeln müssen. Genau dort sind Barrieren am schlimmsten.
Reicht ein automatisches Prüf-Tool?
Automatische Tools sind hilfreich, aber sie finden nicht alles.
Sie erkennen zum Beispiel manche Kontrastprobleme, fehlende Alt-Texte oder technische Fehler. Aber sie merken nicht zuverlässig, ob ein Button sinnvoll benannt ist, ob ein Formular wirklich verständlich ist oder ob ein Buchungsprozess logisch wirkt.
Deshalb gilt:
Tool-Test ja.
Manueller Test unbedingt auch.
Am besten kombinierst du beides: automatische Prüfung, Tastaturtest, mobiler Test und ein ehrlicher Blick auf Verständlichkeit.
Fazit: Barrierefreiheit prüft man am besten praktisch
Eine barrierefreie Website entsteht nicht durch ein einzelnes Plugin und auch nicht durch eine schöne Behauptung im Footer. Sie entsteht, wenn man die Website wirklich aus Nutzersicht testet.
Kann man sie lesen?
Kann man sie bedienen?
Kann man Formulare ausfüllen?
Kann man kaufen, buchen oder Kontakt aufnehmen?
Kommt man auch ohne Maus ans Ziel?
Versteht man, was passiert?
Wenn du diese 20 Punkte durchgehst, findest du die wichtigsten Schwachstellen ziemlich schnell. Manche lassen sich sofort beheben, andere brauchen etwas mehr Arbeit.
Mein praktischer Rat: Fang nicht mit Perfektion an. Fang mit den Stellen an, die für deine Besucher am wichtigsten sind. Eine Website, die klarer, verständlicher und leichter bedienbar wird, ist nicht nur barriereärmer. Sie wirkt auch professioneller und hilft am Ende allen Nutzern.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.