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..aac1171a55 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'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)
+
+