Barrierefreie Website: sechs Beispiele, vorher und nachher

"Barrierefrei" klingt nach einer Eigenschaft der ganzen Website. In der Praxis ist es eine Reihe kleiner Entscheidungen im Frontend. Hier sind sechs davon, jeweils so, wie wir sie auf echten Seiten finden, und so, wie sie aussehen, wenn sie stimmen.

1. Grauer Text auf Weiß

So finden wir es. Hilfstexte, Preisangaben unter Produkten und Formular-Hinweise in hellem Grau. Es sieht ruhig aus, und im Designentwurf auf einem hellen Monitor liest es sich gut.

So ist es richtig. Text und Hintergrund erreichen ein Kontrastverhältnis von 4,5:1. Für großen Text, ab 24 px oder ab 18,66 px fett, genügt 3:1. Prüfen Sie ein Farbpaar im WCAG Kontrast Checker, bevor es im Designsystem landet.

Kriterium. 1.4.3 Kontrast (Minimum), Stufe AA.

2. Der Fokus ist unsichtbar

So finden wir es. Im CSS steht outline: none, weil der Rahmen beim Klicken störte. Mit der Maus fällt das nie auf. Wer mit der Tastatur navigiert, sieht ab da nicht mehr, wo er ist.

So ist es richtig. Ein eigener, sichtbarer Fokusstil statt gar keinem: ein deutlicher Rahmen oder Ring, der sich vom Hintergrund abhebt, auf jedem Link, jedem Button und jedem Feld.

Kriterium. 2.4.7 Fokus sichtbar, Stufe AA.

3. Das Formularfeld ohne Label

So finden wir es. Ein Suchfeld oder ein Newsletter-Feld, das nur einen Platzhalter hat. Der Platzhalter verschwindet beim Tippen, und Screenreader lesen ihn nicht verlässlich als Beschriftung.

So ist es richtig. Ein label, das mit for auf die id des Feldes zeigt. Wenn im Layout kein sichtbares Label sein soll, bleibt das Label trotzdem im Markup und wird visuell versteckt, nicht entfernt.

Kriterium. 3.3.2 Beschriftungen oder Anweisungen, Stufe A, zusammen mit 4.1.2 Name, Rolle, Wert.

4. Das Cookie-Banner, aus dem der Fokus nicht herauskommt

So finden wir es. Das Banner hält den Fokus fest, solange es offen ist. Das ist richtig. Falsch ist, dass seine Schaltflächen nur auf die Maus reagieren: Wer Tab drückt, landet wieder auf "Akzeptieren", Enter bewirkt nichts, und die Seite bleibt unerreichbar.

So ist es richtig. Jede Schaltfläche im Banner funktioniert mit der Tastatur, und nach dem Schließen geht der Fokus an die Stelle zurück, an der er war. Schließen mit der Escape-Taste ist zusätzlich gute Praxis.

Kriterium. 2.1.1 Tastatur und 2.1.2 Keine Tastaturfalle, beide Stufe A. Warum ein automatischer Scan das nicht findet, steht in warum ein automatischer Scan keine Tastaturfalle findet.

5. Das Bild mit dem falschen Alternativtext

So finden wir es. alt="Bild", alt="foto_2024_final.jpg" oder ein Alternativtext, der beschreibt, was auf dem Foto zu sehen ist, obwohl das Bild ein Button ist.

So ist es richtig. Der Alternativtext sagt, was das Bild an dieser Stelle leistet. Bei einem Button-Bild also die Aktion, nicht das Motiv. Rein dekorative Bilder bekommen ein leeres alt="", damit der Screenreader sie überspringt.

Kriterium. 1.1.1 Nicht-Text-Inhalt, Stufe A.

6. Überschriften, die nur groß aussehen

So finden wir es. Ein div mit 32 px Schrift als Seitentitel, darunter echte h3-Elemente. Optisch stimmt die Hierarchie, im Dokument fehlt sie. Wer per Überschriftenliste navigiert, findet die Seite nicht.

So ist es richtig. Eine h1 pro Seite, darunter h2 und h3 in der Reihenfolge, die der Inhalt vorgibt. Die Größe macht das CSS, die Struktur macht das Markup.

Kriterium. 1.3.1 Info und Beziehungen, Stufe A.

Was diese sechs gemeinsam haben

Keiner dieser Fälle ist ein Spezialfall für eine kleine Gruppe. Der unsichtbare Fokus trifft jeden, der gerade keine Maus benutzt. Der graue Text trifft jeden, der im Zug bei Sonne liest. Die fehlende Überschriftenstruktur trifft jeden, der sich anhand der Überschriften durch eine Seite bewegt.

Und keiner davon ist teuer, solange er im Entwurf gefunden wird. Teuer wird er, wenn er in einem Designsystem sitzt und auf allen Seiten gleichzeitig ausgerollt ist.

Verwandter Artikel: Welcher Barrierefreiheit-Standard für Ihre Website gilt

Dieser Artikel ist informativ und stellt keine Rechtsberatung dar.