Zielgrößen und Zeigereingaben: 24×24 Pixel und was daran hängt

Bedienelemente brauchen eine Zielfläche von mindestens 24×24 Pixeln, außer sie liegen weit genug auseinander oder stehen im Fließtext. Alles, was mit einer Geste oder einer Ziehbewegung geht, braucht zusätzlich einen einfachen Weg mit einem Zeiger.

Was dazu geprüft wird

6 Prüfpunkte aus dem WCAG 2.2, Leitlinie 2.5 — die Liste stammt aus dem Messkern, nicht aus diesem Text.

2.5.1 Zeigergesten · Stufe A
2.5.2 Zeiger-Abbruch · Stufe A
2.5.3 Beschriftung im Namen · Stufe A
2.5.4 Bewegungsaktivierung · Stufe A
2.5.7 Ziehbewegungen · Stufe AA
2.5.8 Zielgröße (Minimum, 24×24px) · Stufe AA

Jeder dieser Punkte steht mit Erklärung in der vollständigen Prüfpunktliste.

Worauf es in der Praxis ankommt

Die Zielgröße ist eine Neuerung aus WCAG 2.2 und trifft vor allem Symbolleisten, Schließen-Kreuze und Zeilen-Aktionen in Tabellen. Ein 16-Pixel-Symbol erfüllt sie nur, wenn genug Abstand ringsum bleibt — die Fläche zählt, nicht das Bild.

Ziehbewegungen betreffen Schieberegler, sortierbare Listen und Kartenausschnitte. Wer eine Hand nicht ruhig führen kann, braucht dafür eine Alternative: Schaltflächen, Eingabefelder, Tastaturbedienung.

„Beschriftung im Namen" ist unscheinbar, aber folgenreich für Spracheingabe: Wenn eine Schaltfläche sichtbar „Absenden" heißt, im Code aber „Formular übermitteln", findet der Sprachbefehl sie nicht.

Häufige Fragen

Gilt 24×24 Pixel für jedes Element?

Nein. Ausgenommen sind Links im Fließtext, Elemente mit ausreichendem Abstand zueinander, vom Browser vorgegebene Darstellungen und Fälle, in denen die Größe für die Bedeutung wesentlich ist.

Was zählt als Zielfläche?

Die klickbare Fläche, nicht das Symbol. Ein kleines Zeichen in einer größeren Schaltfläche ist unproblematisch, solange die Schaltfläche selbst groß genug ist.

Warum findet die Spracheingabe unsere Schaltfläche nicht?

Weil der zugängliche Name von der sichtbaren Beschriftung abweicht. Der sichtbare Text muss im zugänglichen Namen enthalten sein — sonst spricht der Nutzer einen Namen aus, den das System nicht kennt.

Weitere Themen aus Barrierefreiheit

Website prüfen lassen Erst das Prüfverfahren verstehen →