Was wird geprüft?
Der interaktive Bereich von User-Interface-Elementen (Ziel) muss für die Nutzung mit Zeiger-Eingaben (z. B. Maus oder Touch) eine Fläche von 24 x 24 CSS-Pixeln umfassen (Zielgröße). Es gelten folgende Ausnahmen:
Abstand: Ziele, die kleiner als 24 x 24 CSS-Pixel sind, haben genug Abstand von anderen Zielen. Dies gilt als gegeben, wenn ein imaginärer Kreis mit einem Durchmesser von 24 CSS-Pixeln auf dem Begrenzungskasten ("Bounding Box") des jeweiligen Ziels zentriert wird und der Kreis nicht ein anderes Ziel oder den Kreis eines anderen unterdimensionierten Ziels überschneidet. Beispiel: Eine Reihe von Schaltflächen, mit jeweils einer Größe von 20 x 20 CSS-Pixeln haben einen Abstand von 4 CSS-Pixeln.
Gleichwertige Alternative: Man kann mit einem anderen Bedienelement, welches die Anforderung erfüllt und sich auf derselben Ansicht befindet, die Funktion ausführen.
Inline: Das Ziel befindet sich in einem Satz oder die Größe des Ziels wird durch die Zeilenhöhe von umgebendem, nicht interaktiven Text eingeschränkt (z. B. ein Text-Link innerhalb eines Absatzes).
Benutzeragenten: Die Größe des Ziels wird vom Benutzeragenten bestimmt und wird von der Autorin oder dem Autor nicht verändert.
Essenziell: Eine bestimmte Darstellung des Ziels ist unerlässlich oder gesetzlich vorgeschrieben.
Warum wird das geprüft
Interaktive Elemente sollen leicht über die Zeiger-Eingabe (etwa Touch oder Maus) aktiviert werden können, ohne dass Nutzende versehentlich ein benachbartes Element aktivieren. Für Nutzende, die Schwierigkeiten mit der Feinmotorik haben oder zittern, ist es für schwierig, kleine Ziele genau zu treffen. Eine ausreichende Größe oder ein ausreichender Abstand zwischen den Zielen verringert die Wahrscheinlichkeit, dass versehentlich das falsche Bedienelement aktiviert wird.
Wie wird geprüft
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn auf der Ansicht interaktive Elemente vorhanden sind.
2. Prüfung
Interaktive Elemente (Ziele), die mit Zeiger-Eingaben (z. B. Maus oder Touch) aktiviert werden und nicht unter die Ausnahmen fallen, ermitteln.
Für jedes Ziel prüfen, ob die Größe ausreicht oder ansonsten ein ausreichender Abstand zu benachbarten Zielen vorhanden ist.
Um die CSS-Pixelgröße eines interaktiven Elements zu bestimmen, kann im Zweifelsfall ein Screenshot auf den Desktop übertragen und dort analysiert werden. Siehe hierzu Abschnitt 3.2 Berechnung der Zielgröße auf Screenshots unten.
Für Android-Apps kann zur Hilfestellung dir App Accessibility Scanner genutzt werden, welche möglicherwie zu kleine Ziel durch Umrahmung hervorhebt, die Erfüllung der Anforderung über ausreichenden Abstand zu anderen Zielen aber offenbar nicht berücksichtigt.
Prüfen, ob es sich bei unterdimensionierten Zielen um Ausnahmen im Sinne des Prüfschritts handelt, denn diese werden nicht bewertet:
Native Bedienelemente, deren Größe vom Benutzeragenten bestimmt sind, etwa native Checkboxen
Ziele, deren Größe von umgebendem Text bestimmt sind (z. B. Textlinks in einem Absatz)
Eine bestimmte Darstellung des Ziels ist unerlässlich oder gesetzlich vorgeschrieben
Es gibt auf der Ansicht ein anderes Bedienelement für die gleiche Funktion, welches die Anforderung erfüllt
3. Hinweise
3.1 Allgemeine Hinweise
Eine Mindestgröße von 24 mal 24 CSS-Pixel bedeutet: Das Ziel ist so groß, dass ein Kreis mit einem Durchmesser von 24px über dem Ziel gezeichnet werden kann und dieser Kreis nicht mit einem ebensolchen Kreis über benachbarten Elementen überlappt (siehe Abschnitt 3.2 Berechnung der Zielgröße auf Screenshots).
Die Abstandsausnahme kann auch Geltung finden, wenn ein Element etwa nur in der Höhe unterdimensioniert ist. Beispiel: Schaltflächen haben eine Breite von 44 CSS-Pixeln, sind aber nur 16 CSS-Pixel hoch. Es gibt jedoch keine interaktiven Elemente unmittelbar über oder unter den Schaltflächen.
Die Zielfläche für Zeigegeräte ist nicht notwendigerweise die gleiche wie die sichtbare Klickfläche. Ein grafischer Schalter mit einem sichtbaren Symbol ist beispielsweise 16 x 16 Pixel groß und hat auf jeder Seite einen Bereich von 4 Pixeln, der ebenfalls auf die Zeigereingabe reagiert. Dies summiert sich zu einer Zielfläche von 24 x 24 Pixeln.
Linklisten, die wie in Navigationsstrukturen angeordnet sind, zählen nicht als Inline-Links. Autoren können die relative Position dieser Links vorhersehen und einen ausreichenden Zielabstand umsetzen.
Die Anforderung gilt unabhängig vom Zoom-Faktor der Seite, z.B. bei Nutzung der Zoom-Funktion des Betriebssystems.
Erfolgskriterium 2.5.8 ist nicht auf Elemente, die vom Browser dargestellt werden, anzuwenden. Das bedeutet, native Bedienelemente wie Radio Inputs und Checkboxen sind ausgenommen, benutzerdefinierte Radio Inputs oder Checkboxen sind von dieser Anforderung jedoch betroffen.
3.2 Berechnung der Zielgröße auf Screenshots
Viewport-Größe (bzw. physische Auflösung und Device Pixel Ratio) des eingesetzten Geräts beispielsweise über die Dokumentation der Spezifikation ermitteln. Beispiel: Ein iPhone 16 pro hat eine physische Auflösung von 1206 x 2622 und eine Device Pixel Ratio von 3.0. Der physische Breiten-Wert von 1206px wird also übersetzt in eine Viewport-Breite von 1206 / 3 = 402 CSS Pixel.
Screenshot machen, auf den Desktop übertragen und in einem Grafik-Programm laden.
Den Screenshot ohne Änderung der Proportion auf die errechnete CSS Viewport-Breite verkleinern (für das genannte Beispiel 402 CSS Pixel) - die Höhe wird entsprechend ebenfalls geringer.
Mit einem Auswahlkreis mit 24px Durchmesser das Ziel umschließen. Ist das Ziel größer als der Kreis, ist das Ziel groß genug. Ist es kleiner, den Kreis mittig auf dem Ziel platzieren.
Sind andere Ziele so benachbart, dass ein Kreis auf diesen Zielen den Kreis auf dem untersuchten Ziel möglicherweise überlagert, diesen Kreis transparent füllen und dies für benachbarte Ziele wiederholen.
Wenn sich die Kreise über benachbarten Zielen überlappen, ist die Anforderung nicht erfüllt.
4. Bewertung
Teilweise erfüllt oder schlechter
Die Zielgröße eines interaktiven Elements umfasst nicht 24 x 24 CSS-Pixel und kann nicht im Sinne der Ausnahmen (zum Beispiel ausreichender Abstand) bewertet werden.