Was ein Barrierefreiheits-Widget kann und was nicht

Ein Barrierefreiheits-Widget ist ein kleines Skript, das einen Knopf auf deine Seite legt. Wer ihn anklickt, kann etwas umstellen: größere Schrift, stärkerer Kontrast, Text vorlesen lassen. Für einen Teil deiner Besucher ist das sofort spürbar. Es ist gleichzeitig die Stelle, an der im Markt am meisten durcheinandergerät, weil die Wirkung dieses Knopfes gern mit dem Zustand der ganzen Website verwechselt wird.

Wir haben nachgezählt, statt zu schätzen. In unserer Erhebung über 14.984 deutsche Firmenwebsites hatten 99,3 Prozent mindestens eine Barriere. Kein Widget der Welt repariert davon auch nur eine einzige, denn alle diese Befunde stecken im ausgelieferten HTML.

Die Zahl liest sich dramatischer, als sie gemeint ist. Gezählt wurde jede Seite, auf der mindestens ein maschinell prüfbarer Befund auftauchte, vom fehlenden Alternativtext über ein Eingabefeld ohne Beschriftung bis zum zu schwachen Kontrast. Ein einzelner Befund ist kein Drama, achtzig sind ein Projekt. Deine Seite ist mit ziemlicher Sicherheit dabei, und das sagt weniger über deine Sorgfalt aus als über die Bausteine, mit denen wir alle arbeiten.

Was der Knopf für Besucher tatsächlich leistet

Ein Widget arbeitet im Browser deines Besuchers und verändert dort die Darstellung. Das kann es gut, und zwar sofort, ohne dass an deiner Seite etwas geändert wird:

Schrift stufenweise vergrößern, Zeilenabstand und Wortabstand erhöhen, bis ein Absatz ruhig genug steht zum Lesen.
Kontrast anheben oder eine dunkle Darstellung schalten, für Besucher mit Blendempfindlichkeit und für alle, die am Handy in der Sonne stehen.
Text vorlesen, für Menschen mit Lese- oder Konzentrationsschwierigkeiten, die keinen Screenreader installiert haben und auch keinen wollen.
Lesehilfen einblenden, etwa eine Maske, die alles außer der aktuellen Zeile abdunkelt, oder einen deutlich größeren Mauszeiger.
Bewegung anhalten, also Karussells und automatisch startende Videos stoppen, was bei Migräne und bei Schwindelbeschwerden hilft.

Vieles davon kann ein Browser oder ein Betriebssystem auch. Der Unterschied liegt in der Hürde: Systemeinstellungen wirken überall und man muss sie erst finden, der Knopf wirkt auf dieser einen Seite und ist zwei Klicks entfernt. Wer nur bei dir mehr Kontrast braucht, nimmt den kürzeren Weg. Blinde Besucher gehören übrigens meistens nicht zu dieser Gruppe. Sie bringen ihre eigene Software mit, die seit Jahren eingerichtet ist, und die liest dein HTML, nicht dein Widget.

Zwei Beispiele, an denen jedes Skript scheitert

Ein Bild, dessen Bedeutung nirgends steht

So sieht es auf sehr vielen Seiten aus:

<img src="/bilder/preise-2026.png">

Und so sieht die Reparatur aus:

<img src="/bilder/preise-2026.png"
     alt="Preisliste 2026: Grundreinigung 89 Euro, Fensterreinigung 45 Euro pro Stunde">

Ein Screenreader liest vor, was im alt steht. Fehlt das Attribut, liest er im besten Fall den Dateinamen. Ein Widget kann diese Lücke nicht schließen, weil die Information nirgends auf der Seite existiert. Eine Bilderkennung kann raten und daraus „Tabelle mit Zahlen“ machen, aber sie weiß nicht, ob das Bild nur schmückt oder ob dort dein Preis steht, und ein blinder Besucher kann die Vermutung nicht von der Tatsache unterscheiden. Die einzige Person, die diesen Satz schreiben kann, sitzt vor deinem Redaktionssystem.

Ein Knopf, der technisch keiner ist

<div class="btn" onclick="formularAbsenden()">Absenden</div>

Das sieht aus wie ein Knopf und funktioniert mit der Maus. Mit der Tastatur funktioniert es nicht. Ein div landet nicht in der Tabulator-Reihenfolge, reagiert nicht auf die Eingabetaste und wird von Hilfstechnik als Text angesagt, nicht als Schaltfläche. Die Reparatur ist eine Zeile:

<button type="button" class="btn" onclick="formularAbsenden()">Absenden</button>

Steht der Knopf ohnehin in einem form-Element, kannst du dir das JavaScript ganz sparen und type="submit" nehmen. Dann verschickt der Browser das Formular selbst, auch per Eingabetaste. Theoretisch könnte ein Skript solche Stellen nachrüsten und role und tabindex im Nachhinein setzen. In der Praxis muss es dafür erraten, welches der zweihundert div-Elemente auf der Seite ein Knopf sein soll, es greift erst nach dem Laden ein, und wenn es einmal nicht geladen wird, ist die Seite wieder genau so unbedienbar wie vorher. Eine Reparatur, die von einem fremden Skript abhängt, ist keine Reparatur, sondern eine Umleitung.

Warum das Versprechen „konform per Skript“ nicht aufgeht

Was zählt, ist der Zustand, in dem deine Seite ohne fremde Hilfe beim Besucher ankommt. Ein Skript, das erst nach dem Laden eingreift, hängt an drei zusätzlichen Bedingungen: Es muss geladen werden, es muss fehlerfrei durchlaufen, und es muss richtig raten. Fällt eine davon aus, steht der Besucher wieder vor dem ursprünglichen HTML. Dazu kommt ein zweiter Punkt, der selten mitgeliefert wird. Ein großer Teil der Prüffragen lässt sich maschinell gar nicht entscheiden. Ob ein Alternativtext das Richtige beschreibt, ob „hier klicken“ als Linktext trägt, ob die Reihenfolge der Überschriften der Logik des Inhalts folgt, das beurteilt ein Mensch oder niemand.

Wer Konformität als Ergebnis einer Skript-Einbindung anbietet, steht damit in einer schwierigen Lage. Er gibt ein Urteil über Inhalte ab, die er nicht kennt, und über Entscheidungen, die er nicht getroffen hat. Wir geben dieses Versprechen nicht, auch nicht in vorsichtiger Formulierung. Was wir liefern, sind die Bedienhilfen für deine Besucher und eine Liste der Stellen, an denen es im Code hakt.

Der Test mit der Tabulatortaste

Dafür brauchst du nichts zu installieren und keine zwei Minuten. Am Rechner, nicht am Handy:

Öffne deine Startseite und klicke einmal ganz oben in eine leere Fläche, damit du nicht schon in einem Link stehst.
Drücke die Tabulatortaste, etwa fünfzehnmal hintereinander, und schau nach jedem Druck kurz hin.
Achte darauf, ob du jederzeit siehst, wo du gerade bist. Ein Rahmen, eine Umrandung, irgendeine sichtbare Markierung muss wandern.
Halte an, sobald die Markierung verschwindet oder irgendwohin springt, wo du sie nicht erwartest. Merk dir das Element davor.
Versuche zum Schluss, dein Hauptmenü allein mit Tabulatortaste und Eingabetaste zu öffnen und einen Unterpunkt zu erreichen.

Wenn du an einer Stelle nicht mehr weißt, wo du bist, wissen es Tastaturnutzer auch nicht. Wenn sich das Menü so nicht öffnen lässt, ist dieser Teil deiner Seite für sie schlicht nicht vorhanden. Beide Befunde stehen in deinem HTML oder in deinem CSS, oft in einer einzigen Zeile, die den Fokusrahmen abschaltet. Kein Bedienknopf im Vordergrund holt ihn zurück.

Die Reihenfolge, die sich bewährt hat

Fang mit dem an, was dein Server ausliefert. Die Liste ist kürzer, als sie klingt:

Jedes Bild, das eine Information trägt, bekommt einen Alternativtext, der genau diese Information wiedergibt.
Jedes Eingabefeld bekommt eine Beschriftung, die über ein label mit dem Feld verbunden ist.
Anklickbare Container werden zu echten button- oder a-Elementen.
Der Fokusrahmen bleibt sichtbar, ein outline: none ohne eigenen Ersatz fliegt raus.
Die Farbwerte im CSS tragen auch dann noch, wenn hellgraue Schrift auf weißem Grund steht.

Das sind die Handgriffe, die in unserer Erhebung immer wieder aufgetaucht sind, und die meisten davon kosten dich eine halbe Stunde pro Seitentyp statt ein ganzes Projekt.

Danach kommt das Widget dazu, für alles, was sich im Code nicht abschließend lösen lässt. Ein Text bleibt ein Text, auch wenn er sauber ausgezeichnet ist. Manche Besucher brauchen ihn trotzdem größer, ruhiger gesetzt oder vorgelesen, und dafür ist ein Knopf direkt auf der Seite der kürzeste Weg. In dieser Reihenfolge ergänzen sich die beiden. In der umgekehrten verdeckt der Knopf, was darunter liegt.

Wie wir es bei Accessify halten

Unser Widget ist kostenlos einzubinden und bringt genau die Bedienhilfen mit, die weiter oben stehen, nicht mehr und nicht weniger. Daneben läuft der Prüfteil und meldet dir, welche Bilder ohne Alternativtext ausgeliefert werden, welche Felder keine Beschriftung haben und wo der Kontrast zu schwach ist, jeweils mit der Stelle im Quelltext.

Wenn so eine Liste vor dir liegt, sortiere sie nicht nach Schwere, sondern nach Vorlage. Ein abgeschalteter Fokusrahmen im Stylesheet trifft jede Unterseite gleichzeitig, und eine Korrektur am Layout deines Redaktionssystems räumt oft mehrere hundert Befunde auf einen Schlag ab. Die Einzelfälle, also das eine Bild auf der einen Aktionsseite, kannst du danach in Ruhe abarbeiten. Wer umgekehrt anfängt, ist nach zwei Wochen müde und hat den größten Hebel noch nicht angefasst.