Merge pull request #381 from BIK-BITV/2.5.8-Zielgröße-(Minimum)

2.5.8 Zielgröße (Minimum): WCAG 2.2 - Neue Prüfschritt-Beschreibung

Prüfschritte/de/2.5.8 Zielgröße (Minimum).adoc

@@ -0,0 +1,86 @@
+= Prüfschritt 2.5.8 Zielgröße (Minimum)
+include::include/author.adoc[]
+include::include/attributes.adoc[]
+
+== Was wird geprüft?
+
+Der interaktive Bereich von User-Interface-Elementen (Ziel) muss für die Nutzung mit Zeigegeräten (z. B. Maus oder Touch) eine Fläche von 24 x 24 CSS-Pixel 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 anderen Ziel oder dem 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 Seite 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 ist 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 Maus oder Touch) 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 betätigt wird.
+
+== Wie wird geprüft
+
+=== 1. Anwendbarkeit des Prüfschritts
+
+Der Prüfschritt ist anwendbar, wenn interaktive Elemente vorhanden sind.
+
+=== 2. Prüfung
+
+* Interaktive Elemente, die mit Zeigeräten (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, im Zweifelsfall die Inspektor-Funktion des Browsers verwenden:
+  ** Mit der rechten Maustaste auf das zu testende interaktive Element klicken, und im Kontextmenü die Option „Untersuchen“ wählen. Bei den meisten Browsern wird bei dieser Methode der Elementauswahl 
+auch die CSS-Pixelhöhe und -breite (in einem Tooltip des spezifischen Elements) angezeigt.
+  ** Im Panel "Berechnet" des Inspektors werden ebenfalls die Werte für Höhe und Breite des ausgewählten Elements sowie andere berechneten CSS-Eigenschaften angezeigt, um etwa den Abstand der Elemente 
+zu ermitteln (`margin`, `padding`).
+
+* Das Bookmarklet https://html5accessibility.com/stuff/2023/08/28/quick-and-very-dirty-target-size-checker/[Target Size] kann unterstützend hinzugezogen werden:
+  ** Es identifiziert interaktive Elemente, errechnet dessen Mittelpunkt und zeichnet einen halbtransparenten Kreis von 24×24 Pixeln um den Mittelpunkt des Elements.
+    *** Ein grüner Kreis mit dickem Rand bedeutet: das Element hat eine Höhe oder Breite von 24 px oder mehr.
+    *** En blauer Kreis bedeutet: Das Element hat eine Höhe und Breite von weniger als 24 px.
+  ** Wird festgestellt, dass ein interaktives Element ein anderes interaktives Element überlappt, wird nach Anwendung des Bookmarklets eine JavaScript-Warnung mit der Anzahl 
+der sich überlappenden Elemente angezeigt.
+
+*	Prüfen, ob es sich bei den unterdimensionierten Elementen 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
+
+=== 3. Hinweise
+
+* Eine Mindestgröße von 24 mal 24 CSS-Pixel bedeutet: Das Ziel ist so groß, dass ein 24 x 24 Pixel großes Quadrat in das Ziel gezeichnet werden kann (und nicht über den Bereich der Zielfläche hinausragt). 
+Dies ist insbesondere bei abgerundeten Flächen zu berücksichtigen.
+* 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 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 ein `padding` von 4 Pixeln. 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 ist unabhängig vom Zoom-Faktor der Seite; wenn Benutzer in die Seite hineinzoomen, ändert sich die CSS-Pixelgröße der Elemente nicht.
+* 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 und Checkboxen sind von dieser Anforderung jedoch betroffen.
+
+=== 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.
+
+== Quellen
+
+* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html[Understanding Target Size (Minimum), WCAG 2.2] 
+
+== Einordnung des Prüfschritts nach WCAG 2.2
+
+=== Guidelines
+
+* https://www.w3.org/TR/WCAG22/#input-modalities[2.5 Input Modalities]
+
+=== Success criterion
+
+* https://www.w3.org/TR/WCAG22/#target-size-minimum[2.5.5 Target Size (Minimum) (AA)]
+
+=== Techniques
+
+==== Sufficient Techniques
+
+* https://www.w3.org/WAI/WCAG22/Techniques/css/C42[C42: Using min-height and min-width to ensure sufficient target]