Überschriften, Kontraste, Formulare

Wer Websites auf Barrierefreiheit prüft, findet immer wieder dieselben drei Problemfelder: Überschriften, die nach Aussehen statt nach Bedeutung gewählt wurden, Texte mit zu wenig Kontrast und Formulare, deren Felder niemand zuordnen kann, der sie nicht sieht. Zusammen machen sie einen großen Teil der Fehler aus, die automatische Prüfwerkzeuge finden. Die gute Nachricht: Alle drei lassen sich mit überschaubarem Aufwand beheben, und wer die Regeln einmal verinnerlicht hat, macht die Fehler gar nicht erst.

1. Überschriften: die Landkarte der Seite

Sehende Menschen überfliegen eine Seite, indem sie Überschriften, Hervorhebungen und Abstände wahrnehmen. Screenreader-Nutzer tun etwas Ähnliches: Sie springen per Tastenkürzel von Überschrift zu Überschrift und verschaffen sich so einen Überblick. Das funktioniert aber nur, wenn die Überschriften im Quelltext richtig ausgezeichnet sind – als h1 bis h6 in einer logischen Reihenfolge.

Abb. 3.1Gliederung nach Bedeutung, nicht nach Aussehen

Drei Regeln genügen. Jede Seite hat genau eine h1, die das Thema der Seite benennt. Darunter folgen h2 für die Hauptabschnitte und h3 für Unterabschnitte, ohne Ebenen zu überspringen. Und wie eine Überschrift aussieht, regelt das CSS, nicht die Wahl der Ebene. Braucht eine h2 an einer Stelle eine kleinere Schrift, wird sie per Gestaltung verkleinert, nicht zur h5 gemacht. Umgekehrt ist fett gedruckter Text keine Überschrift, auch wenn er so aussieht.

2. Kontraste: lesbar für alle

Hellgrauer Text auf weißem Hintergrund wirkt elegant und ist in vielen Designs beliebt. Für Menschen mit Sehschwäche, für ältere Menschen und für alle, die ihr Handy in der Sonne benutzen, ist er schlicht schwer lesbar. Die WCAG legen deshalb Mindestkontraste fest, die sich exakt berechnen lassen.

Probieren Sie das erste Beispiel aus: Das helle Grau, das auf vielen Websites für Nebentexte verwendet wird, fällt bei normaler Schriftgröße durch. Auch weiße Schrift auf kräftigem Orange scheitert oft, obwohl sie auffällig wirkt. Die Lösung ist selten ein komplett neues Design, sondern meist eine etwas dunklere Variante der Markenfarbe für Text und eine etwas hellere für Flächen.

3. Formulare: jedes Feld braucht einen Namen

Formulare sind der Ort, an dem Barrieren am meisten kosten, denn hier entscheiden Menschen, ob sie Kontakt aufnehmen, bestellen oder sich anmelden. Die wichtigste Regel ist einfach: Jedes Eingabefeld braucht eine sichtbare, programmatisch zugeordnete Beschriftung. Ein Platzhaltertext im Feld reicht nicht, denn er verschwindet beim Tippen und wird von manchen Hilfsmitteln nicht vorgelesen.

Besonders wichtig sind gute Fehlermeldungen. „Ungültige Eingabe“ in roter Schrift hilft niemandem. „Bitte geben Sie eine E-Mail-Adresse im Format name@beispiel.de ein“ direkt am Feld dagegen schon – für alle Nutzer. Farbe allein darf dabei nie die einzige Information sein, denn Menschen mit Farbfehlsichtigkeit erkennen einen rot umrandeten Rahmen nicht zuverlässig.

4. Schnell selbst prüfen

Für alle drei Themen gibt es einfache Prüfwege. Die Überschriftenstruktur zeigen Browser-Erweiterungen wie die kostenlosen Barrierefreiheits-Werkzeuge der großen Browser an, oder Sie lassen sich von einem Screenreader die Liste der Überschriften ausgeben. Kontraste prüfen Sie mit dem Rechner oben oder mit den Entwicklerwerkzeugen des Browsers, die den Kontrast eines Textes beim Anklicken direkt anzeigen. Formulare testen Sie, indem Sie sie ausschließlich mit der Tastatur ausfüllen und absichtlich Fehler machen. Einen automatischen Überblick über alle drei Bereiche liefert unser Barrierefreiheits-Check.

5. Weitere Grundregeln, die oft vergessen werden

Neben Überschriften, Kontrasten und Formularen gibt es einige weitere Grundregeln, die in vielen Prüfberichten auftauchen. Jede Seite braucht einen aussagekräftigen Seitentitel, der im Browser-Tab erscheint und vom Screenreader als Erstes vorgelesen wird. „Startseite“ reicht nicht, „Kaffee aus eigener Röstung – Firmenname“ schon. Die Sprache der Seite muss im Quelltext angegeben sein, damit der Screenreader die richtige Aussprache wählt. Ohne diese Angabe liest eine englische Stimme deutschen Text vor, was kaum verständlich ist.

Linktexte müssen auch ohne Umgebung verständlich sein. Screenreader-Nutzer lassen sich häufig eine Liste aller Links einer Seite anzeigen. Steht darin zehnmal „mehr erfahren“ oder „hier klicken“, ist die Liste wertlos. Besser sind Linktexte, die das Ziel benennen, etwa „Mehr über unsere Röstverfahren“. Auch Farbe allein darf nie die einzige Information tragen: Links im Fließtext sollten zusätzlich unterstrichen sein, Pflichtfelder zusätzlich im Text gekennzeichnet, Diagramme zusätzlich beschriftet. Etwa jeder zwölfte Mann hat eine Farbsehschwäche und kann Rot und Grün nicht sicher unterscheiden.

Schließlich muss sich Text vergrößern lassen, ohne dass Inhalte abgeschnitten werden oder überlappen. Die WCAG verlangen, dass eine Seite auf 200 Prozent vergrößert noch nutzbar ist und dass sie bei einer Breite von 320 Pixeln ohne horizontales Scrollen funktioniert. Wer responsiv gestaltet, erfüllt das meist ohnehin. Probleme entstehen vor allem bei festen Höhen für Textboxen und bei Texten in Bildern. Ein kurzer Test mit dem Zoom des Browsers zeigt sofort, ob die Seite mitwächst.

Alle diese Regeln haben etwas gemeinsam: Sie kosten beim Neubau einer Seite fast nichts, beim nachträglichen Reparieren dagegen viel. Deshalb gehören sie in jede Designvorlage und jedes Briefing an eine Agentur. Wer sie früh festlegt, spart sich später aufwendige Korrekturschleifen.

Wie viel diese Grundregeln ausmachen, zeigt ein typischer Befund aus der Praxis. Bei einer Unternehmenswebsite mit hellgrauen Fließtexten, rein farblich markierten Links und einem Kontaktformular mit Platzhaltern statt Beschriftungen meldete der automatische Test über hundert Fehler. Die Ursache lag aber in nur drei Stellen des Designs: einer Textfarbe, einer Linkformatierung und einer Formularvorlage. Nachdem diese drei Stellen im Theme angepasst waren, verschwand der größte Teil der Fehler auf allen Seiten gleichzeitig. Das ist typisch: Viele Barrieren stecken nicht in einzelnen Inhalten, sondern in Vorlagen, und dort lassen sie sich mit wenig Aufwand für die ganze Website beheben. Ein Blick auf wiederkehrende Fehlermuster lohnt sich deshalb, bevor man Seite für Seite korrigiert.

Stand: September 2026. Kursmaterial der Klarwerk Akademie – vermittelt Grundlagen und ersetzt keine Rechtsberatung oder vollständige Prüfung nach WCAG und EN 301 549.