From c2c531cf0fd957a66c3824357ddc8b67d4cea11f Mon Sep 17 00:00:00 2001 From: fstorr Date: Sun, 14 Jul 2024 22:49:41 -0700 Subject: [PATCH 1/4] update Target Size Minimum to add scrollbar example --- .../img/target-custom-scrollbar-spacing.svg | 51 +++++++++++++++++++ understanding/22/target-size-minimum.html | 9 ++++ 2 files changed, 60 insertions(+) create mode 100644 understanding/22/img/target-custom-scrollbar-spacing.svg diff --git a/understanding/22/img/target-custom-scrollbar-spacing.svg b/understanding/22/img/target-custom-scrollbar-spacing.svg new file mode 100644 index 0000000000..4d0564f9ef --- /dev/null +++ b/understanding/22/img/target-custom-scrollbar-spacing.svg @@ -0,0 +1,51 @@ + + + Artboard + + + + + + + + + + + + + + + + + + + + + + FAIL + + + + + + + + + + + + + + + + + + + + + + PASS + + + + \ No newline at end of file diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 70048d3c36..82a09a48a9 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -134,6 +134,15 @@

Spacing

Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.

+ +
+

User agent control

+

This Success Criterion has an exception for the size of targets determined by a user agent and not modified by the author. An example of this kind of target is a browser's scrollbars. If a scrollbar has been modified by the author then there must be a passing amount of spacing between the scrollbar and the content of the page. The following example shows a passing and a failing design.

+
+ +
A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a "back to top" link that is next to the scrollbar. The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criteron because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)
+
+
From 1857fa4695eea98c55f349409acbc1b7bb0a1b36 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 30 Aug 2024 08:54:11 -0700 Subject: [PATCH 2/4] Update understanding/22/target-size-minimum.html --- understanding/22/target-size-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 82a09a48a9..1cd04fee09 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -140,7 +140,7 @@

User agent control

This Success Criterion has an exception for the size of targets determined by a user agent and not modified by the author. An example of this kind of target is a browser's scrollbars. If a scrollbar has been modified by the author then there must be a passing amount of spacing between the scrollbar and the content of the page. The following example shows a passing and a failing design.

-
A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a "back to top" link that is next to the scrollbar. The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criteron because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)
+
A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a "back to top" link that is next to the scrollbar. The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criterion because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)
From 9aa447b0c88463472d8eb00bdcc4b08f68868ca5 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 30 Aug 2024 08:55:48 -0700 Subject: [PATCH 3/4] Update understanding/22/target-size-minimum.html Co-authored-by: gundulaniemann <57541275+gundulaniemann@users.noreply.github.com> --- understanding/22/target-size-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 1cd04fee09..c3d11ffa80 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -137,7 +137,7 @@

Spacing

User agent control

-

This Success Criterion has an exception for the size of targets determined by a user agent and not modified by the author. An example of this kind of target is a browser's scrollbars. If a scrollbar has been modified by the author then there must be a passing amount of spacing between the scrollbar and the content of the page. The following example shows a passing and a failing design.

+

This Success Criterion has an exception for the size of targets determined by a user agent and not modified by the author. An example of this kind of target is a browser's scrollbars. If a scrollbar's dimensions have been modified by the author then there must be a passing amount of spacing between the scrollbar and the content of the page. The following example shows a passing and a failing design.

A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a "back to top" link that is next to the scrollbar. The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criterion because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)
From 42338fa7315f9c4f00ef6904bb77a85b0d019fbb Mon Sep 17 00:00:00 2001 From: Francis Storr Date: Fri, 18 Oct 2024 09:56:46 -0700 Subject: [PATCH 4/4] =?UTF-8?q?Can=E2=80=99t=20believe=20I=20forgot=20the?= =?UTF-8?q?=20alt=20text?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I’ll hand in my accessibility card on the way out. --- understanding/22/target-size-minimum.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index c3d11ffa80..aac1171a55 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -139,8 +139,8 @@

Spacing

User agent control

This Success Criterion has an exception for the size of targets determined by a user agent and not modified by the author. An example of this kind of target is a browser's scrollbars. If a scrollbar's dimensions have been modified by the author then there must be a passing amount of spacing between the scrollbar and the content of the page. The following example shows a passing and a failing design.

- -
A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a "back to top" link that is next to the scrollbar. The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criterion because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)
+ A page's scrollbar has been modified to give it custom track and thumb colors. The track is less than 24px wide and the thumb is narrower. The page has a back-to-top link that is next to the scrollbar. +
The passing example has enough space between the link and the scrollbar for a 24 CSS pixel diameter circle, placed over the scrollbar, to not overlap the link. The failing example has no space between the link and the scrollbar, which fails the criterion because the 24 CSS pixel diameter circle overlaps the link. (Image shown to scale - see the scalable original version)