Mindestgröße des Zielbereichs (24px) in den WCAG: So funktioniert Erfolgskriterium 2.5.8

Was WCAG 2.5.8 zur Mindestgröße des Zielbereichs sagt

Das W3C formuliert das Ziel klar: Bedienelemente sollen leichter zu aktivieren sein. Es geht darum, dass sich ein Ziel einfach aktivieren lässt, ohne versehentlich ein benachbartes Ziel auszulösen. Menschen mit eingeschränkter Geschicklichkeit oder Schwierigkeiten in der Feinmotorik können kleine Ziele nur schwer genau treffen, wenn andere Ziele zu nah liegen.

Das W3C nennt ausdrücklich Handtremor, Spastik und Tetraplegie als berücksichtigte Behinderungen. Manche Menschen nutzen zudem statt Maus oder Trackpad spezielle Eingabegeräte, die in der Regel weniger präzise sind als gängige Zeigegeräte. Die Erfüllung der Anforderung macht außerdem Touchscreen-Oberflächen leichter bedienbar.

Wichtig ist eine Nuance: Das Kriterium definiert eine Mindestgröße und, wenn diese nicht erreicht wird, einen Mindestabstand. Sehr kleine Ziele können das Kriterium also erfüllen, sofern kein benachbartes Ziel zu nah liegt. Das W3C empfiehlt dennoch als Best Practice, unabhängig vom Abstand zumindest die Mindestgröße einzuhalten, und für wichtige Links und Bedienelemente das strengere Kriterium 2.5.5 „Zielgröße (erweitert)“ in Betracht zu ziehen.

Davon profitieren unter anderem:

• Menschen mit Mobilgeräten, deren Touchscreen die wichtigste Interaktionsform ist
• Menschen mit motorischen Einschränkungen wie Handtremor, ob sie Maus, Stift oder Touch verwenden
• Menschen, die Erschütterungen ausgesetzt sind, etwa in öffentlichen Verkehrsmitteln
• Menschen, die ein Gerät mit einer Hand bedienen
• Menschen mit großen Fingern oder Menschen, die das Gerät nur mit einem Teil des Fingers oder mit dem Knöchel bedienen

So messen Sie einen Zielbereich von 24 × 24 CSS-Pixeln

Damit ein Ziel „mindestens 24 × 24 CSS-Pixel“ groß ist, muss sich ein gefülltes Quadrat von 24 × 24 CSS-Pixeln, ausgerichtet an der horizontalen und vertikalen Achse, vollständig innerhalb des Ziels zeichnen lassen. Das Ziel selbst darf schräg sein; das Quadrat muss achsenparallel zur Webseite ausgerichtet bleiben. Vorsicht bei abgerundeten Ecken: Bei einem kleinen Button lassen sie unter Umständen keinen Platz für das Quadrat, und das Ziel gilt dann als zu klein.

Das CSS-Pixel ist die kanonische Maßeinheit in CSS. Es ist dichteunabhängig und unterscheidet sich von den physischen Pixeln des Bildschirms. Entscheidend: Die Anforderung hängt nicht vom Zoomfaktor ab. Wenn Nutzer zoomen, ändert sich die Größe der Elemente in CSS-Pixeln nicht. Sie können also nicht argumentieren, ein Ziel werde beim Zoomen groß genug.

Einige Messregeln aus der Dokumentation des W3C sollten Sie vor jedem Audit kennen:

• Überlappen sich zwei Ziele, sollte die Überlappungsfläche nicht zur Zielgröße gezählt werden, es sei denn, beide lösen dieselbe Aktion aus oder öffnen dieselbe Seite.
• Ein Ziel, in dem ein Wert über die Position gewählt wird (Schieberegler, Farbwähler mit Farbverlauf, editierbarer Bereich, in dem man den Cursor setzt), gilt als ein einziges Ziel.
• Ziele, die von Inhalten verdeckt werden, die nach einer Interaktion oder per Skript erscheinen (Vorschlagsliste einer Combobox, modaler Dialog, Cookie-Banner, Umfrage-Dialog), sind nicht betroffen, solange sie verdeckt sind.
• Ziele in diesen neu darübergelegten Inhalten müssen das Kriterium dagegen erfüllen.

Die Abstandsausnahme: die 24-px-Kreis-Methode

Ein Ziel unter 24 × 24 CSS-Pixeln gilt als zu klein. Es kann dennoch über den Abstand bestehen: Man zentriert einen gedachten Kreis mit 24 CSS-Pixeln Durchmesser auf dem umgebenden Rechteck (Bounding Box) des Ziels, und dieser Kreis darf weder ein anderes Ziel noch den Kreis eines anderen zu kleinen Ziels schneiden. Bei einem rechteckigen Ziel entspricht die Bounding Box dem Ziel selbst. Bei beschnittenen oder abgerundeten Formen oder einem komplexen klickbaren SVG bestimmen Sie zuerst die Bounding Box und dann deren Mittelpunkt, der bei konkaven Formen sogar außerhalb des Ziels liegen kann.

Das W3C erklärt: Touchscreens und User Agents verfügen in der Regel über interne Heuristiken, die den dem Berührungspunkt nächstgelegenen Link oder das nächstgelegene Bedienelement ermitteln, sodass ausreichender Abstand ebenso wirksam sein kann wie ein größeres Ziel. Die Beispiele des W3C helfen bei der Kalibrierung:

• Eine Reihe von sechs Icon-Buttons mit 24 × 24 px: bestanden.
• Dieselben Buttons mit 20 × 20 px und 4 px Abstand: bestanden über die Abstandsausnahme.
• Dieselben 20 × 20 px großen Buttons ohne Abstand: nicht bestanden, weil sich die Kreise schneiden.
• Buttons mit nur 16 px Höhe ohne Ziele darüber oder darunter: bestanden; zwei gestapelte Reihen mit nur 1 px Abstand: nicht bestanden.
• Menüeinträge mit 24 px Höhe (Text und Innenabstand): bestanden; mit 18 px Höhe: nicht bestanden.
• Ein kleines Ziel mit 16 × 16 px, das an ein großes Ziel wie ein verlinktes Bild grenzt: nicht bestanden; ein Abstand von 4 px lässt es bestehen.

Die vier weiteren Ausnahmen: Äquivalent, Fließtext, User Agent, wesentlich

Neben dem Abstand sieht das Kriterium vier weitere Ausnahmen vor. Jede hat einen genauen Geltungsbereich; dokumentieren Sie sie im Audit, statt sie pauschal anzuwenden.

Für die Ausnahme „wesentlich“ empfiehlt das W3C den Autoren nachdrücklich, soweit praktikabel eine gleichwertige Funktion auf anderem Weg anzubieten.

• Äquivalent: Die Funktion lässt sich über ein anderes Bedienelement auf derselben Seite ausführen, das das Kriterium erfüllt.
• Fließtext (inline): Das Ziel steht in einem Satz, oder seine Größe wird durch die Zeilenhöhe von Text begrenzt, der kein Ziel ist. Die Begründung: Durch den Textumbruch je nach Größe des Viewports lässt sich nicht vorhersehen, wo Links relativ zueinander stehen können, und eine gut lesbare Zeilenhöhe ist wichtiger. Die Zeilenhöhe sollte senkrecht zur Textrichtung verstanden werden: Bei einer vertikal dargestellten Sprache ist sie also horizontal.
• User-Agent-Steuerelement: Die Größe wird vom User Agent (etwa dem Browser) bestimmt und vom Autor nicht verändert, etwa der Kalender eines input type="date" oder die Scrollbalken. Wenn Sie die Maße eines Scrollbalkens ändern, braucht es ausreichenden Abstand zwischen ihm und dem Seiteninhalt.
• Wesentlich: Eine bestimmte Darstellung ist für die vermittelte Information wesentlich oder gesetzlich vorgeschrieben. Beispiele des W3C: Pins auf einer digitalen Karte, eine zwangsläufig dichte interaktive Datenvisualisierung oder Online-Formulare, die nach einer Rechtsordnung Papierformulare nachbilden müssen, was die Zielgröße einschränken kann: Die gesetzliche Pflicht, kleine Ziele nachzubilden, kann dann als wesentlich gelten.

Korrektur mit CSS: die hinreichende Technik C42

Das W3C nennt für dieses Kriterium eine hinreichende Technik: C42, also min-height und min-width auf dem Container des Ziels, um ausreichenden Abstand sicherzustellen. Das folgende Beispiel wendet diese Eigenschaften auf eine Icon-Leiste an. Denken Sie daran, dass das Ziel der Bereich der Anzeige ist, der eine Zeigeraktion annimmt: Ist der Container selbst nicht klickbar, sollen seine Mindestmaße für Abstand um ein kleineres Ziel sorgen, vergrößern das Ziel aber nicht. Um die aktive Fläche tatsächlich zu vergrößern, setzen Sie min-width und min-height auf das klickbare Element selbst (Button oder Link).

Die Dokumentation weist zudem darauf hin, dass es hilfreich sein kann, eine Option anzubieten, mit der sich die aktive Zielfläche vergrößern lässt, ohne die sichtbare Größe zu verändern, oder einen Mechanismus zur Steuerung der Layoutdichte. Die Bedürfnisse sind unterschiedlich: Menschen mit Gesichtsfeldausfällen bevorzugen möglicherweise ein kompakteres Layout mit kleineren Bedienelementen, während Menschen mit anderen Formen von Sehbehinderung möglicherweise große Bedienelemente bevorzugen.

/* Technik C42: min-width / min-height auf dem Container
   des Ziels, um ausreichenden Abstand um einen
   kleineren Button sicherzustellen */
.toolbar li {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Variante: die aktive Fläche selbst vergrößern,
   indem das klickbare Element dimensioniert wird */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Checkliste für das Audit der Zielgröße

Um das Kriterium auf einer Seite zu prüfen, gehen Sie die folgenden Schritte durch und beginnen mit dichten Bereichen wie Werkzeugleisten, Paginierung, Menüs, Schließen-Buttons und Icons auf Bildern. Wenn Sie mit dem französischen Referenzrahmen RGAA arbeiten, lesen Sie unsere Seiten zum RGAA 5 und zum Unterschied zwischen RGAA und WCAG, führen Sie dann einen kostenlosen Test Ihrer Seiten durch und richten Sie eine kontinuierliche Überwachung ein, um Rückschritte zu erkennen.

• Erfassen Sie alle per Zeiger bedienbaren Ziele: Links, Buttons, Formularfelder, klickbare Icons.
• Prüfen Sie bei jedem Ziel, ob ein achsenparalleles Quadrat von 24 × 24 CSS-Pixeln vollständig hineinpasst.
• Zentrieren Sie bei jedem zu kleinen Ziel einen 24-px-Kreis auf seiner Bounding Box und prüfen Sie, ob er weder ein anderes Ziel noch einen anderen Kreis schneidet.
• Klammern Sie Links in Sätzen aus (Fließtext-Ausnahme) sowie Bedienelemente, deren Größe der User Agent (etwa der Browser) festlegt und die der Autor nicht verändert hat, etwa den Kalender eines Datumsfelds oder Scrollbalken (User-Agent-Ausnahme).
• Prüfen Sie, ob die Funktion eines kleinen Ziels auch über ein anderes konformes Bedienelement auf derselben Seite verfügbar ist.
• Testen Sie auch Inhalte, die über der Seite erscheinen: modale Dialoge, Cookie-Banner, Vorschlagslisten.

Häufige Fragen

Weiterlesen bei Conformly

• Umfassender Leitfaden zum RGAA 5
• Unterschiede zwischen RGAA und WCAG
• Kostenloser RGAA-Scanner online

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.

• W3C — Comprendre 2.5.8