Die meisten Barrieren auf Websites sind keine exotischen Spezialfälle. Es sind immer wieder dieselben Fehler, und viele davon lassen sich mit wenig Aufwand beheben. Das zeigt der Bericht «WebAIM Million», für den die Organisation WebAIM jährlich die Startseiten der eine Million meistbesuchten Websites automatisch prüft.
Die Ausgabe 2026 ist ernüchternd: Auf 95,9 % der Startseiten fand das Prüfwerkzeug Fehler gegen die WCAG, die Richtlinien für barrierefreie Webinhalte. Im Schnitt waren es 56,1 Fehler pro Seite, und die Lage hat sich gegenüber 2025 verschlechtert. Rund 96 % aller gefundenen Fehler fallen in nur sechs Kategorien.
Die Zahlen stammen nicht speziell von Schweizer KMU, sondern von viel besuchten Websites weltweit. Trotzdem zeigen sie, welche Fehler am weitesten verbreitet sind, und genau diese lohnt es sich auch auf deiner Website zuerst zu prüfen. Wichtig: Automatische Tests finden nur einen Teil der Probleme. Deshalb gehören zu den sechs Kategorien hier noch zwei Punkte, die du von Hand prüfen musst.
1. Zu schwacher Kontrast
Wie häufig: auf 83,9 % der geprüften Startseiten, der häufigste Fehler überhaupt.
Das Problem: Hellgraue Schrift auf Weiss, weisser Text auf einem hellen Button oder Text über einem unruhigen Foto. Was im Design schick aussieht, ist für viele Menschen schwer lesbar, etwa bei Sehschwäche, im Alter oder einfach draussen im Sonnenlicht.
So behebst du es:
- Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, grosse Schrift mindestens 3:1. Prüf deine Farben mit einem kostenlosen Werkzeug wie dem «Colour Contrast Analyser».
- Auch Bedienelemente brauchen mindestens 3:1 zu ihrer Umgebung, etwa die Rahmen von Eingabefeldern, wichtige Icons und die Fokus-Markierung.
- Prüf zuerst die Farben, die überall vorkommen: Fliesstext, Links, Buttons, Footer. Eine Änderung im Stylesheet behebt den Fehler dann auf der ganzen Website.
2. Fehlende Alternativtexte
Wie häufig: auf 53,1 % der Startseiten.
Das Problem: Ein Screenreader kann ein Bild nicht beschreiben, wenn kein Alternativtext hinterlegt ist. Besonders heikel sind Bilder in Links und Buttons: Dann weiss niemand, wohin der Link führt.
So behebst du es:
- Inhaltsbilder bekommen einen kurzen Text, der sagt, was das Bild an dieser Stelle zeigt.
- Bilder in Links und Buttons beschreiben das Ziel oder die Funktion, etwa «Zur Startseite» oder «Suchen».
- Rein dekorative Bilder bekommen ein leeres Alt-Attribut, damit Screenreader sie überspringen.
Das kann deine Redaktion meist selbst im Redaktionssystem erledigen, ohne Hilfe der Agentur.
3. Formularfelder ohne Beschriftung
Wie häufig: auf 51 % der Startseiten.
Das Problem: Ein Eingabefeld zeigt nur einen grauen Platzhalter wie «E-Mail», der beim Tippen verschwindet. Oder die Beschriftung steht zwar sichtbar daneben, ist aber im Code nicht mit dem Feld verknüpft. Ein Screenreader sagt dann oft nur «Eingabefeld», und wer Hilfe beim Ausfüllen braucht, steht vor einem Rätsel.
So behebst du es:
- Jedes Feld bekommt eine sichtbare, dauerhafte Beschriftung, die im Code mit dem Feld verbunden ist.
- Pflichtfelder sind als solche erkennbar, nicht nur durch Farbe.
- Fehlermeldungen sagen in Worten, was fehlt oder falsch ist, nicht bloss mit einem roten Rahmen.
- Vergiss das Suchfeld und das Newsletter-Formular im Footer nicht. Gerade die werden oft übersehen.
4. Leere und nichtssagende Links
Wie häufig: leere Links auf 46,3 % der Startseiten.
Das Problem: Ein «leerer» Link hat keinen Text, den ein Screenreader vorlesen kann. Typisch sind Social-Media-Icons, verlinkte Logos ohne Alternativtext oder Pfeile in Slidern. Dazu kommen Links mit Text, der allein nichts sagt: «hier», «mehr», «weiterlesen». Wer sich alle Links einer Seite als Liste vorlesen lässt, hört dann zehnmal «mehr».
So behebst du es:
- Icon-Links bekommen einen Namen, den der Screenreader vorliest, zum Beispiel «Unser Profil auf LinkedIn».
- Formuliere Linktexte so, dass sie für sich allein verständlich sind: «Mehr über unser Angebot für Vereine» statt «mehr».
5. Leere Buttons
Wie häufig: auf 30,6 % der Startseiten.
Das Problem: Buttons, die nur aus einem Symbol bestehen: das Hamburger-Menü auf dem Handy, die Lupe für die Suche, das X zum Schliessen eines Pop-ups. Ohne Textalternative erfährt man per Screenreader nur, dass da ein Button ist, aber nicht, was er tut.
So behebst du es: Jeder Button braucht einen zugänglichen Namen, etwa «Menü öffnen», «Suchen» oder «Schliessen». Das ist eine Aufgabe für die Entwicklung, meist aber schnell erledigt, weil dieselben Buttons auf allen Seiten vorkommen.
6. Fehlende Sprachangabe
Wie häufig: auf 13,5 % der Startseiten.
Das Problem: Im Code der Seite fehlt die Angabe, in welcher Sprache sie geschrieben ist. Ein Screenreader liest dann womöglich einen deutschen Text mit englischer Aussprache vor, was kaum verständlich ist.
So behebst du es: Die Sprache wird einmal im Seitenkopf festgelegt, für Deutsch zum Beispiel mit lang="de". Bei mehrsprachigen Websites braucht jede Sprachversion ihre eigene Angabe. Das ist eine Zeile im Template und in wenigen Minuten erledigt.
7. Keine Bedienung per Tastatur, kein sichtbarer Fokus
Dieser Punkt fehlt in den Statistiken, weil ihn ein automatischer Test kaum erkennt. Er gehört aber zu den wichtigsten.
Das Problem: Wer keine Maus nutzen kann, bewegt sich mit der Tab-Taste durch die Seite. Oft lassen sich Menüs, Pop-ups oder Cookie-Banner so nicht bedienen. Oder man sieht nicht, wo man gerade ist, weil die Fokus-Markierung im Design entfernt wurde.
So prüfst du es: Klick in die Seite und drück wiederholt die Tab-Taste. Kommst du überall hin? Siehst du jederzeit, welches Element ausgewählt ist? Lässt sich das Menü mit Enter öffnen und das Pop-up wieder schliessen?
So behebst du es: Die Fokus-Markierung muss gut sichtbar sein, und alle Funktionen müssen mit der Tastatur erreichbar sein. Das ist Arbeit für die Entwicklung und lohnt sich, weil sie auf allen Seiten wirkt.
8. Unklare Überschriften-Struktur
Das Problem: Viele Screenreader-Nutzerinnen und -Nutzer springen von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen. Das klappt nicht, wenn Überschriften nur fett gedruckter Text sind, wenn Ebenen übersprungen werden oder wenn eine Seite keine Hauptüberschrift hat.
So behebst du es:
- Jede Seite hat eine klare Hauptüberschrift (H1).
- Darunter folgen H2 für die Hauptabschnitte und H3 für Unterpunkte, ohne Ebenen zu überspringen.
- Wähle die Ebene nach der Gliederung, nicht nach der gewünschten Schriftgrösse.
Womit du anfängst
Du musst nicht alles auf einmal lösen. Eine sinnvolle Reihenfolge:
- Was deine Redaktion selbst kann: Alternativtexte ergänzen, nichtssagende Linktexte umformulieren, Überschriften richtig setzen.
- Was im Template steckt: Kontraste, Sprachangabe, Fokus-Markierung, Icon-Buttons und Formulare. Diese Fehler behebt die Entwicklung einmal, und sie verschwinden auf allen Seiten.
- Was du regelmässig prüfst: Neue Inhalte, neue Bilder, neue Formulare. Barrierefreiheit ist kein einmaliges Projekt, sondern Teil der Pflege.
Deine Checkliste
- Alle Texte haben genug Kontrast (4,5:1, grosse Schrift 3:1).
- Jedes Inhaltsbild hat einen passenden Alternativtext, dekorative Bilder ein leeres Alt-Attribut.
- Jedes Formularfeld hat eine sichtbare, verknüpfte Beschriftung.
- Jeder Link und jeder Button sagt, wohin er führt oder was er tut.
- Die Sprache der Seite ist im Code angegeben.
- Alles ist per Tastatur bedienbar, und der Fokus ist immer sichtbar.
- Die Überschriften ergeben eine logische Gliederung.
Wo steht deine Website?
Möchtest du wissen, welche dieser Barrieren auf deiner Website vorkommen? In unserem kostenlosen Barrierefreiheits-Check prüfen wir deine Startseite und eine wichtige Unterseite gegen die zentralen WCAG-Kriterien, von Hand und mit Prüfwerkzeugen, und nennen dir die fünf wichtigsten Baustellen: Kostenlosen Barrierefreiheits-Check anfragen.