From 807910f0952bbbc2cef170b35c54e8e3de9e2442 Mon Sep 17 00:00:00 2001 From: Sonja Weckenmann <61732118+sweckenmann@users.noreply.github.com> Date: Thu, 19 Oct 2023 19:25:48 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Create=202.5.8=20Zielgr=C3=B6=C3=9Fe=20(Min?= =?UTF-8?q?imum).adoc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Entwurf Prüfschritt-Beschreibung --- ....8 Zielgr\303\266\303\237e (Minimum).adoc" | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 "Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" diff --git "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" new file mode 100644 index 00000000..3f62780d --- /dev/null +++ "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" @@ -0,0 +1,88 @@ += Prüfschritt 9.1.1.1a Alternativtexte für Bedienelemente +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 imaginäre Kreise (mit 24px Durchmesser), die auf den Mittelpunkt des jeweiligen +Begrenzungskastens („Bounding Box“) der unterdimensionierten Elemente gesetzt werden, sich gegenseitig nicht überlappen. Sie dürfen auch andere Ziele beliebiger Größe nicht überlappen. 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 Target Size (Link folgt) 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] From 671a77740024a5630256178415df2c564c34160d Mon Sep 17 00:00:00 2001 From: Sonja Weckenmann <61732118+sweckenmann@users.noreply.github.com> Date: Thu, 19 Oct 2023 19:29:24 +0200 Subject: [PATCH 2/4] =?UTF-8?q?Update=202.5.8=20Zielgr=C3=B6=C3=9Fe=20(Min?= =?UTF-8?q?imum).adoc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" index 3f62780d..5f49677e 100644 --- "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" +++ "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" @@ -1,4 +1,4 @@ -= Prüfschritt 9.1.1.1a Alternativtexte für Bedienelemente += Prüfschritt 2.5.8 Zielgröße (Minimum) include::include/author.adoc[] include::include/attributes.adoc[] From 58b79c9c1377a6a83bc321d0117d190d26c52d65 Mon Sep 17 00:00:00 2001 From: Sonja Weckenmann <61732118+sweckenmann@users.noreply.github.com> Date: Fri, 20 Oct 2023 19:54:48 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Update=202.5.8=20Zielgr=C3=B6=C3=9Fe=20(Min?= =?UTF-8?q?imum).adoc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Verlinkung des Bookmarklets "Target Size". --- .../de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" index 5f49677e..0cd05fc7 100644 --- "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" +++ "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" @@ -36,7 +36,7 @@ auch die CSS-Pixelhöhe und -breite (in einem Tooltip des spezifischen Elements) ** 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 Target Size (Link folgt) kann unterstützend hinzugezogen werden: +* 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. From b57eca9931fb506e5fd44f945191a917374f98d0 Mon Sep 17 00:00:00 2001 From: Sonja Weckenmann <61732118+sweckenmann@users.noreply.github.com> Date: Fri, 20 Oct 2023 22:28:17 +0200 Subject: [PATCH 4/4] =?UTF-8?q?Update=202.5.8=20Zielgr=C3=B6=C3=9Fe=20(Min?= =?UTF-8?q?imum).adoc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Abstandsausnahme umformuliert --- .../de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" index 0cd05fc7..fbf36505 100644 --- "a/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" +++ "b/Pr\303\274fschritte/de/2.5.8 Zielgr\303\266\303\237e (Minimum).adoc" @@ -6,9 +6,7 @@ include::include/attributes.adoc[] 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 imaginäre Kreise (mit 24px Durchmesser), die auf den Mittelpunkt des jeweiligen -Begrenzungskastens („Bounding Box“) der unterdimensionierten Elemente gesetzt werden, sich gegenseitig nicht überlappen. Sie dürfen auch andere Ziele beliebiger Größe nicht überlappen. Beispiel: Eine Reihe von Schaltflächen, -mit jeweils einer Größe von 20 x 20 CSS-Pixeln haben einen Abstand von 4 CSS-Pixeln. +* *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.