Die Checkliste für barrierefreie Landing Pages

Eine barrierefreie Landing Page kann jemand lesen, per Tab durchgehen und absenden, auch ohne Maus und ohne perfekte Augen. Diese Checkliste für barrierefreie Landing Pages startet mit den vier Prüfungen, die die meisten Fehler abfangen: Textkontrast von mindestens 4,5 zu 1, Bedienelemente von mindestens 24 mal 24 CSS-Pixeln, ein sichtbarer Fokus-Zustand auf jedem Element und ein echtes Label an jedem Formularfeld. Alle vier sind im Design billig zu lösen und im Nachhinein teuer.

Am Kontrast scheitern die meisten Landing Pages

WCAG setzt das Mindest-Kontrastverhältnis für normalen Text auf 4,5 zu 1 gegenüber dem Hintergrund, auf Stufe AA. Großer Text bekommt 3 zu 1. Groß heißt mindestens 18 Punkt oder 14 Punkt fett, in CSS also etwa 24px oder 18.5px fett. Die Werte werden nicht gerundet, 4,499 zu 1 fällt also durch. Hellgrauer Fließtext auf Weiß ist der übliche Übeltäter. Danach kommt weißer Text über einem Foto, wo der Kontrast oben im Bild hält und unten auseinanderfällt.

Buttons und Icons brauchen auch Kontrast

Text ist nur die Hälfte davon. WCAG verlangt 3 zu 1 für Bedienelemente und bedeutungstragende Grafiken gegenüber den Farben direkt daneben, ebenfalls auf Stufe AA. Das betrifft den Rahmen eines Eingabefelds, die Kontur eines Buttons, eine Checkbox, einen Bewertungsstern und jedes Icon, das für sich allein eine Bedeutung trägt. Ein blassgrauer Rahmen um ein Eingabefeld auf einer weißen Card ist der häufigste Patzer auf einer Landing Page. Und es ist genau das Element, das Leute sehen müssen, bevor sie konvertieren können.

Gib jeder Tap-Fläche 24 mal 24 Pixel

WCAG 2.2 hat auf Stufe AA eine Regel zur Zielgröße ergänzt. Interaktive Ziele sollten mindestens 24 mal 24 CSS-Pixel groß sein. Kleinere Ziele sind erlaubt, wenn sie weit genug auseinanderliegen, dass ein Kreis von 24 Pixeln um ihren Mittelpunkt kein anderes Ziel überlappt. Links mitten im Satz sind ausgenommen. In der Praxis trifft das Icon-Buttons, den Schließen-Button an einem Modal, Social-Icons im Footer und die eng gesetzten Links in der Rechtstext-Zeile ganz unten auf der Seite.

Die Tastaturprüfung dauert fünf Minuten

Leg die Maus weg und drück von ganz oben auf der Seite Tab. Jeder Link, jeder Button, jedes Eingabefeld und jedes Menü-Element sollte den Fokus in einer Reihenfolge bekommen, die zum sichtbaren Layout passt, und du solltest jederzeit sehen, wo du gerade bist. Eigene Komponenten fallen hier am häufigsten durch. Ein Slider aus divs sperrt dich ein. Ein Video-Modal hält den Fokus fest. Ein Sticky Header verdeckt das Element, zu dem du gerade getabbt bist. Wenn du deinen wichtigsten Button mit der Tastatur nicht erreichen und auslösen kannst, ist die Seite kaputt.

Gib jedem Formularfeld ein echtes Label

Ein Platzhalter verschwindet in dem Moment, in dem jemand tippt, und wer dann den Faden verliert, hat nichts mehr zum Abgleichen. Screenreader gehen mit Platzhaltertext unterschiedlich um. Setz ein sichtbares Label über jedes Feld. Behalt den Platzhalter für ein Beispielformat, wenn du eins willst, und verknüpf das Label sauber mit dem Eingabefeld, damit ein Tipp auf das Label den Fokus ins Feld setzt. Fehlermeldungen müssen in Worten sagen, was schiefgelaufen ist. Farbe allein darf ein Feld nicht als fehlerhaft markieren.

Die EU-Regeln, die 2025 gekommen sind

Der European Accessibility Act ist am 28. Juni 2025 in Kraft getreten. Er betrifft Dienstleistungen, die an Verbraucher in der EU verkauft werden, darunter E-Commerce, Banking und Ticketbuchungen im Verkehr. Er stützt sich auf EN 301 549, die auf WCAG Stufe AA aufbaut. Wenn du an europäische Verbraucher verkaufst, ist Barrierefreiheit von einer guten Praxis zu einer Pflicht geworden. Durchgesetzt wird das über die Mitgliedstaaten und nicht über eine einzelne Behörde, was das Risiko schwerer vorhersehbar macht und nicht kleiner.

Geh diese Checkliste für barrierefreie Landing Pages in zwanzig Minuten durch

Starte mit einem automatischen Checker und ignorier danach den Score, denn automatische Tools erwischen nur einen Teil von dem, was zählt. Tab dich durch die ganze Seite. Miss jede Text- und Buttonfarbe mit einem Kontrast-Checker. Zoom den Browser auf 200 % und prüf, dass sich nichts überlappt und nichts abgeschnitten wird. Schalt den Screenreader deines Betriebssystems ein und hör dir Hero und Formular an. Korrigier die Kontrastwerte in deinen Design Tokens statt Seite für Seite, sonst geht derselbe Fehler auf der nächsten Seite wieder live.