Prüfpunkt 2.5.5Stufe AAAZeiger, Gesten und Zielgrößen
Wie groß muss eine Schaltfläche für Finger und zittrige Hände sein?
Eine Schaltfläche von 20 Pixel Höhe trifft ein Finger auf dem Handy nur mit Glück, eine zittrige Hand mit der Maus ebenso wenig. Die Stufe AA (2.5.8, neu in WCAG 2.2) verlangt 24 × 24 Pixel oder ausreichenden Abstand. Das Kriterium 2.5.5 der Stufe AAA verlangt 44 × 44 CSS-Pixel für jedes Ziel, das mit einem Zeiger bedient wird. Ausgenommen sind Links im Fließtext, Elemente mit einer gleichwertigen größeren Alternative und Elemente, deren Größe der Browser vorgibt.
Was das Kriterium verlangt
Jedes Ziel, auf das getippt oder geklickt wird, ist mindestens 44 CSS-Pixel breit und hoch. Das entspricht etwa 9 Millimeter auf einem Handy, der Breite einer Fingerkuppe. Ausnahmen: Links in einem Satz oder Absatz; Ziele, für die es auf derselben Seite eine gleichwertige Alternative mit 44 Pixel gibt; Ziele, deren Größe nicht der Autor bestimmt (Browser-Steuerung); und Ziele, bei denen die konkrete Darstellung wesentlich ist, etwa Punkte auf einer Karte.
Für wen das zählt
Menschen mit Tremor, Arthritis, Spastik oder nach Schlaganfall treffen kleine Ziele nicht oder treffen daneben. Auf dem Handy betrifft das jeden, der mit dem Daumen tippt, im Bus, mit Handschuh, mit dickem Finger. Die 44 Pixel stammen aus den Gestaltungsrichtlinien der großen Betriebssysteme und haben sich als Grenze bewährt, ab der Fehlbedienungen deutlich abnehmen. Größere Ziele senken auch bei allen anderen die Fehlerquote.
So gehen wir damit um
Der Messkern misst heute jede Bedienfläche im Prüfbereich Responsive gegen die 24-Pixel-Grenze der Stufe AA und nennt Breite und Höhe je Fundstelle. Dieselbe Messung sagt, welche Flächen 44 Pixel erreichen. Das Kriterium ist automatisch entscheidbar bis auf die Frage, ob eine Alternative gleichwertig ist. Es gehört zur Kategorie AAA im Wissen; im Bericht stehen die Maße.
Beispiele
Schaltfläche mit 24 Pixel
.symbol-knopf { width: 24px; height: 24px; } /* Stufe AA */.symbol-knopf { min-width: 44px; min-height: 44px; } /* Stufe AAA */44 × 44 CSS-Pixel je Ziel, ohne Anrechnung von Abständen. Links im Fließtext sind ausgenommen.
So gehen Sie es an
- Geben Sie Knöpfen, Menüpunkten und Symbol-Links eine Mindesthöhe und -breite von 44 Pixel (min-height, min-width) oder entsprechenden Innenabstand.
- Vergrößern Sie die Klickfläche von Symbolen mit Innenabstand, nicht das Symbol selbst.
- Lassen Sie Links im Fließtext, wie sie sind; sie sind ausgenommen.
- Prüfen Sie Zeilen in Tabellen und Listen mit Symbol-Aktionen: dort sind kleine Ziele am häufigsten.
Weiter im Prüfbereich Barrierefreiheit
- Warum sollen Maus, Finger, Stift und Tastatur gleichzeitig funktionieren?WCAG 2.2 Kriterium 2.5.6 (Stufe AAA): Eine Website schließt keine Eingabeart aus und lässt den Wechsel zwischen Maus, Touch, Stift und Tastatur zu.
- Wie erklärt eine Website ungewöhnliche Wörter und Fachbegriffe?WCAG 2.2 Kriterium 3.1.3 (Stufe AAA): Für Fachwörter, Redewendungen und Jargon gibt es eine Erklärung, etwa ein Glossar oder eine Definition im Text.
- Wie werden Abkürzungen auf einer Website verständlich?WCAG 2.2 Kriterium 3.1.4 (Stufe AAA): Für jede Abkürzung gibt es die ausgeschriebene Form oder eine Erklärung, beim ersten Vorkommen oder über abbr.
- Wie verständlich muss ein Text sein und wann braucht er eine einfache Fassung?WCAG 2.2 Kriterium 3.1.5 (Stufe AAA): Texte über dem Leseniveau der Unterstufe bekommen eine einfache Fassung oder Zusammenfassung. Messung, Umsetzung.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Gilles Lambert, CC0
.jpg){kind=link}