Jedes Jahr prüft die amerikanische Non-Profit-Organisation WebAIM die Startseiten der eine Million meistbesuchten Websites automatisch auf Barrierefreiheit. Die Ergebnisse sind erstaunlich beständig: Immer wieder tauchen dieselben sechs Probleme auf, und zusammen machen sie den weitaus größten Teil dessen aus, was die Prüfung findet. Keines davon ist schwer zu beheben, und einige entstehen gar nicht im Code, sondern im Redaktionssystem, bei den Menschen, die die Seiten schreiben. Hier finden Sie jedes Problem in einfachen Worten erklärt: was es ist, wen es trifft, wie Sie es selbst erkennen und was Sie ändern können.
Was eine Million Startseiten zeigen
Im WebAIM Million 2026, der Auswertung vom Februar 2026, hatten 95,9 % der Startseiten mindestens einen automatisch erkennbaren Verstoß gegen die WCAG, die internationalen Richtlinien für barrierefreie Websites. In der Ausgabe 2025 waren es noch 94,8 %. Im Schnitt fand die Prüfung 56,1 Fehler pro Startseite, gegenüber 51 im Vorjahr.
Laut WebAIM fallen rund 96 % aller gefundenen Fehler in nur sechs Kategorien. So hoch war 2026 der Anteil der Startseiten, auf denen jedes dieser Probleme vorkam:
- Text mit zu geringem Kontrast: 83,9 %
- Bilder ohne Alternativtext: 53,1 %
- Formularfelder ohne Beschriftung: 51 %
- Leere Links: 46,3 %
- Leere Schaltflächen: 30,6 %
- Fehlende Angabe der Seitensprache: 13,5 %
Text, der schwer zu lesen ist
Worum es geht. Text, der sich nicht genug vom Hintergrund abhebt. Hellgrau auf Weiß, Weiß auf Blassgelb, dünne Schrift über einem Foto. Der Unterschied zwischen Text- und Hintergrundfarbe wird als _Kontrastverhältnis_ gemessen, einer Zahl von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Die Richtlinien verlangen mindestens 4,5:1 für normalen Text und 3:1 für großen Text, also etwa ab 24 px oder ab rund 19 px in Fettschrift.
Wen es trifft. Menschen mit Sehbehinderung oder Farbsehschwäche und viele ältere Besucherinnen und Besucher, denn mit dem Alter braucht das Auge mehr Kontrast. Aber auch alle, die auf einer sonnigen Terrasse auf dem Handy Ihre Öffnungszeiten nachsehen: Blassgrauer Text verschwindet dort einfach.
So erkennen Sie es selbst. Stellen Sie die Bildschirmhelligkeit auf die niedrigste Stufe oder sehen Sie sich Ihre Website bei Tageslicht auf dem Handy an. Wenn Sie sich vorbeugen oder die Augen zusammenkneifen müssen, ist der Kontrast zu gering. Achten Sie besonders auf die Fußzeile, Bildunterschriften und Text über Bildern.
So beheben Sie es. Machen Sie den Text dunkler oder den Hintergrund heller. Auf weißem Hintergrund erreicht das mittlere Grau #999999 nur etwa 2,8:1, das etwas dunklere #767676 dagegen knapp 4,5:1.
/* Vorher: zu hell auf Weiß */
.note {
color: #999999;
}
/* Nachher: ausreichend für normalen Text */
.note {
color: #595959;
}In den meisten Website-Baukästen ändern Sie Textfarben in den Theme- oder Stileinstellungen, ganz ohne Code.
Bilder ohne Beschreibung
Worum es geht. Der _Alternativtext_ (kurz Alt-Text) ist eine kurze schriftliche Beschreibung, die zu einem Bild gehört. Besucher sehen ihn normalerweise nicht, aber Software liest ihn vor. Fehlt er, hat diese Software nichts über das Bild zu sagen.
Wen es trifft. Blinde Menschen nutzen oft einen _Screenreader_, eine Software, die den Bildschirminhalt vorliest. Bei einem Bild ohne Alt-Text liest er manchmal den Dateinamen vor, etwa „IMG Unterstrich 4032 Punkt jpg“, oder überspringt das Bild ganz. War es ein Banner mit dem Hinweis „Montags geschlossen“, geht diese Information verloren.
So erkennen Sie es selbst. Öffnen Sie die Bildeinstellungen in Ihrem Redaktionssystem (CMS) und suchen Sie ein Feld wie „Alternativtext“, „Alt-Text“ oder „Bildbeschreibung“. Ist es bei einem Bild mit Aussage leer, liegt hier das Problem.
So beheben Sie es. Beschreiben Sie, wozu das Bild dient, nicht nur, was es zeigt. Fassen Sie sich kurz, meist reicht ein Satz.
- Schlecht: „Bild“, „foto1.jpg“ oder „Bäckerei, Brot, Köln, beste Bäckerei, frisches Brot“
- Gut: „Bäcker holt frische Sauerteigbrote aus dem Holzofen“
- Für ein Logo, das zur Startseite führt: „Bäckerei Janssen, Startseite“
Rein dekorative Bilder wie eine Hintergrundstruktur oder eine Trennlinie bekommen einen _leeren_ Alt-Text, damit Screenreader sie überspringen. Viele CMS bieten dafür eine Option „dekoratives Bild“.
Formularfelder ohne Beschriftung
Worum es geht. Jedes Feld in einem Formular braucht einen sichtbaren Namen, etwa „E-Mail-Adresse“, der im Seitencode mit dem Feld verknüpft ist. Eine beliebte Abkürzung ist, den Hinweis als grauen Platzhaltertext ins Feld selbst zu schreiben. Der verschwindet aber, sobald man zu tippen beginnt, und ist oft nicht richtig verknüpft.
Wen es trifft. Wer mit Screenreader in ein Kontaktformular mit drei leeren Feldern kommt, hört womöglich dreimal „Eingabefeld, leer“ und weiß nicht, welches Feld für den Namen, die E-Mail-Adresse oder die Nachricht gedacht ist. Wer den Computer per Sprache steuert, kann nicht „Klicke E-Mail“ sagen, wenn das Feld keinen Namen hat.
So erkennen Sie es selbst. Klicken Sie auf die Beschriftung neben einem Feld. Springt der Cursor ins Feld, sind beide verknüpft. Passiert nichts oder gibt es außerhalb des Felds gar keine Beschriftung, besteht Handlungsbedarf.
So beheben Sie es. Geben Sie jedem Feld eine sichtbare Beschriftung und verknüpfen Sie sie mit dem Feld. Im Code sieht das so aus:
<!-- Vorher: nur ein Platzhaltertext --> <input type="email" placeholder="E-Mail" /> <!-- Nachher: eine mit dem Feld verknüpfte Beschriftung --> <label for="email">E-Mail-Adresse</label> <input type="email" id="email" />
Das for an der Beschriftung und die id am Feld haben denselben Wert, und genau das verbindet die beiden. Die meisten Formular-Baukästen erledigen das automatisch, solange Sie die Beschriftung ausfüllen und nicht ausblenden.
Links und Schaltflächen, die nichts sagen
In beiden Fällen hat etwas, das man anklicken kann, keinen Text, den Software vorlesen kann.
Leere Links
Worum es geht. Ein Link, der nur ein Symbol oder ein Bild ohne Alt-Text enthält und deshalb keinen Namen hat. Social-Media-Symbole und verlinkte Logos sind die klassischen Beispiele.
Wen es trifft. Screenreader-Nutzer können sich eine Liste aller Links einer Seite anzeigen lassen, um sich zu orientieren. Leere Links erscheinen dort nur als „Link“ oder als lange Webadresse, die Zeichen für Zeichen vorgelesen wird. Wer Ihre Instagram-Seite sucht, muss raten.
So erkennen Sie es selbst. Suchen Sie Links, die nur aus einem Symbol oder Bild bestehen: Social-Media-Symbole, ein Logo, ein kleiner Pfeil. Prüfen Sie dann im CMS, ob jeder davon einen Text oder Alt-Text hat, der das Ziel nennt.
So beheben Sie es. Geben Sie dem Symbol oder Bild eine Textalternative, die das Ziel benennt: „Instagram“, „Facebook“, „Bäckerei Janssen, Startseite“.
Leere Schaltflächen
Worum es geht. Dasselbe bei Schaltflächen: eine Schaltfläche, die nur ein Symbol zeigt, etwa eine Lupe für die Suche, drei Striche für das Menü, ein Kreuz zum Schließen eines Pop-ups oder Pfeile an einer Bildergalerie.
Wen es trifft. Wer auf dem Handy mit Screenreader auf die Menü-Schaltfläche stößt, hört nur „Schaltfläche“. Öffnet sie das Menü, startet sie eine Suche oder schließt sie etwas? Wer das nicht weiß, kommt womöglich nie über Ihre Startseite hinaus.
So erkennen Sie es selbst. Jede Schaltfläche, die nur ein Symbol zeigt, braucht einen Namen.
So beheben Sie es. Fügen Sie einen kurzen Text hinzu, den Screenreader vorlesen, der aber am Aussehen nichts ändert:
<button> <svg>...</svg> <span class="visually-hidden">Suchen</span> </button>
Die Klasse visually-hidden ist ein verbreitetes Hilfsmittel, das Text auf dem Bildschirm ausblendet, ihn für Screenreader aber verfügbar hält. Viele Themes bringen sie bereits mit. In einem Website-Baukasten suchen Sie in den Einstellungen der Schaltfläche nach einem Feld wie „Beschriftung“ oder „barrierefreier Name“.
Eine Seite, die ihre Sprache nicht angibt
Worum es geht. Jede Seite sollte in ihrem Code angeben, in welcher Sprache sie geschrieben ist. Das ist eine einzige Einstellung, meist in den Website- oder Theme-Einstellungen.
Wen es trifft. Ein Screenreader wählt anhand dieser Angabe Stimme und Aussprache. Ist eine deutschsprachige Seite als Englisch markiert oder gar nicht, wird der Text mit englischer Aussprache vorgelesen und ist kaum zu verstehen. Bei mehrsprachigen Websites ist das besonders wichtig: Jede Sprachversion muss ihre eigene Sprache angeben.
So erkennen Sie es selbst. Öffnen Sie Ihre Seite, lassen Sie sich den Seitenquelltext anzeigen (Strg+U in den meisten Browsern unter Windows, Cmd+Option+U auf dem Mac) und sehen Sie sich eine der ersten Zeilen an. Dort sollte etwa Folgendes stehen:
<html lang="de"></html>
de steht hier für Deutsch. Englisch ist en, Französisch fr und Niederländisch nl. Fehlt der Teil lang oder steht dort die falsche Sprache, ändern Sie die Website-Sprache in Ihrem CMS oder bitten Sie Ihre Entwicklerin oder Ihren Entwickler um eine Korrektur.
Schreibtipps für Redakteurinnen und Redakteure
Mehrere dieser Probleme entstehen täglich im CMS, bei Menschen, die nie Code anfassen. Ein paar Gewohnheiten verhindern die meisten davon.
- Schreiben Sie Linktexte, die für sich allein verständlich sind. „Mehr lesen“ und „hier klicken“ sagen nichts, wenn sie in einer Linkliste vorgelesen werden. Schreiben Sie stattdessen „Mehr über unsere Öffnungszeiten“ oder „Preisliste 2026 herunterladen (PDF, 2 MB)“.
- Füllen Sie den Alt-Text bei jedem aussagekräftigen Bild aus und beschreiben Sie seinen Zweck. Fragen Sie sich, was jemandem fehlen würde, wenn das Bild nicht lädt. Das ist Ihr Alt-Text.
- Kennzeichnen Sie dekorative Bilder als dekorativ, statt eine Beschreibung zu erfinden.
- Verwenden Sie Überschriften in der richtigen Reihenfolge. Eine Seite hat eine Hauptüberschrift, dann Überschriften der Ebene 2 für Abschnitte und der Ebene 3 für Unterabschnitte, ohne Ebenen zu überspringen. Wählen Sie Überschriften nach ihrer Bedeutung, nicht nach ihrer Größe; die Größe regeln Sie in der Gestaltung. Screenreader-Nutzer springen von Überschrift zu Überschrift, um eine Seite zu überfliegen.
- Verlassen Sie sich nicht allein auf Farbe. „Pflichtfelder sind rot markiert“ hilft niemandem, der Rot nicht erkennt. Ergänzen Sie ein Wort oder ein Zeichen.
Was eine automatische Prüfung nicht beurteilen kann
Automatische Prüfungen finden diese sechs Probleme sehr zuverlässig, weil sie sich messen lassen: Eine Farbkombination erreicht 4,5:1 oder eben nicht.
Eine Prüfung kann Ihnen aber nur sagen, _ob_ ein Bild einen Alt-Text hat, nicht ob dieser Text etwas taugt. „Foto“ besteht die Prüfung und hilft niemandem. Ebenso sieht eine Prüfung, dass ein Link Text enthält, aber nicht, dass „hier klicken“ nichtssagend ist. Und sie kann nicht beurteilen, ob sich Ihre Seite gut allein mit der Tastatur bedienen lässt oder ob Ihre Sprache verständlich ist. Automatische Prüfungen finden einen guten Teil der häufigen Probleme, aber nicht alle.
Schauen Sie deshalb auch selbst hin, nachdem Sie behoben haben, was die Prüfung meldet. Lesen Sie Ihre Alt-Texte und Linktexte laut vor. Bewegen Sie sich nur mit der Tab-Taste durch die Seite. Zoomen Sie Ihren Browser auf 200 % und prüfen Sie, ob noch alles passt und funktioniert.
Sehen Sie nach, wo Ihre Website steht
Welche dieser sechs Probleme auf Ihrer eigenen Website vorkommen, finden Sie am schnellsten heraus, wenn Sie eine Seite kostenlos prüfen. Der Bericht erklärt in einfachen Worten, was nicht stimmt, wen es betrifft, wo es auf der Seite liegt und wie Sie es beheben, und die ibin-Anleitungen begleiten Sie Schritt für Schritt bei der Reparatur. Ist Ihre Startseite in Ordnung, melden Sie sich mit Ihrer E-Mail-Adresse an und prüfen Sie kostenlos bis zu 200 Seiten derselben Website.
Sehen Sie, wie Ihre Website abschneidet
Prüfen Sie kostenlos eine Seite, ohne Konto. Sie erhalten eine klare Liste, was zuerst zu beheben ist, mit Bildern, wo jedes Problem liegt.
