From 1f3a63a43b5005f33d2e26c24d41529f4dc2cbb2 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 8 Sep 2022 11:41:40 +0200 Subject: [PATCH 01/58] Add target size enhanced rule --- _rules/target-size-enhanced-gi8qkf.md | 139 ++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100755 _rules/target-size-enhanced-gi8qkf.md diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md new file mode 100755 index 0000000000..6e334b7ac3 --- /dev/null +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -0,0 +1,139 @@ +--- +id: gi8qkf +name: +rule_type: atomic +description: | + +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Wilco Fiers +--- + +## Applicability + +This rule applies to any [inheriting semantic] `widget`, except if one or more of the following is true: + +- The widget cannot be [targeted by a pointer event][] +- The widget is part of [[inline text]] +- The widget has a label that has a width and height of at least 44 CSS pixels + +## Expectation 1 + +The target element has a width and height of at least 44 CSS pixels. + +## Assumptions + +- Not essential +- No alternative <--- ??? + +## Accessibility Support + +## Background + +### Bibliography + +- [Understanding Success Criterion](#) +- [Technique](#) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This ... + +```html + +Home +``` + +#### Passed Example 2 + +This `input` element, combined with its + +```html + +``` + +### Failed + +- Link has insufficient size +- Button has sufficient size, but is partially obscured +- Button has sufficient size, but is clipped +- This radio button with insufficient size has its size modified by the author + +#### Failed Example 1 + +This ... + +```html + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These links are part of a block of text, which determines its size. + +```html +

+ The size of the target for pointer inputs is at least 44 by 44 CSS pixels. +

+``` + +#### Inapplicable Example 2 + +These `input` elements and `button` are `disabled`. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 3 + +This checkbox does not have its size adjusted by the author + +```html +

+ + I agree with the terms and conditions. +

+``` + +#### Inapplicable Example 4 + +This checkbox cannot be [targeted by a click event][] because it is hidden. It is replaced with an on-screen clickable SVG. + +```html + +``` + +#### Inapplicable Example 5 + +This checkbox cannot be [targeted by a click event][] because it is obscured by the modal. + +```html + +``` From cfef38b11daf80538c90c17940a2200c18941262 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 10 Aug 2023 15:21:36 +0200 Subject: [PATCH 02/58] Rework a bit normative parts --- _rules/target-size-enhanced-gi8qkf.md | 33 +++++++++++++++++++++------ 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 6e334b7ac3..b6ad9c634c 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -3,37 +3,56 @@ id: gi8qkf name: rule_type: atomic description: | - + This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels. accessibility_requirements: wcag21:2.5.5: # Target size (enhanced) (AAA) forConformance: true failed: not satisfied passed: further testing needed inapplicable: further testing needed + wcag22:2.5.8: # Target Size (Minimum) + secondary: true input_aspects: - DOM Tree - CSS Styling acknowledgments: authors: + - Jean-Yves Moyen - Wilco Fiers --- ## Applicability -This rule applies to any [inheriting semantic] `widget`, except if one or more of the following is true: +This rule applies ta any [HTML element][namespaced element] for which all the following are true: + +> comment: focusing on element rather than widget feels more natural to talk about CSS boxes later. -- The widget cannot be [targeted by a pointer event][] -- The widget is part of [[inline text]] -- The widget has a label that has a width and height of at least 44 CSS pixels +- the element is an [inheriting semantic][] `widget`; and +- the element is [visible][]; and +- the element can be [targeted by a pointer event][]. + > comment: this may get tricky to properly define or test. Notably because we cannot access the list of events that can target an element, and empirical testing is not good due to stuff possibly happening in the back, or async, … + > Maybe it would be easier to restrict the list of widgets to those that are supposed to accept pointer events? E.g. `button` and `link` are normally stuff that can be clicked. OTOH, having them not clickable (and too small) is a failure of 1.3.1, not 2.5.5… + +## Expectation -## Expectation 1 +For each test target, at least one of the following is true: -The target element has a width and height of at least 44 CSS pixels. +- the target element has a [border box][] width and height of at least 44 CSS pixels; or + > comment: picking the border box as (i) it seems clicking in the padding or border areas does activate `onclick` functions (clicking in margin doesn't); and (ii) this mostly corresponds to the `getBoundingClientRect` JS function, and 2.5.8 refers a lot to "bounding boxes", so it sounds like a good match +- the target has a [programmatic label][]; or + > comment: this is a way to circumvent part of the "equivalent bit". Essentially, we say that if there is a programmatic label (which usually does the same as the widget), we don't try to look at it. We could also restrict this condition to "has a programmatic label of 44×44px" but that gets tricky when it is the combined sizes which is good enough. + > This could also be moved to Applicability if we don't try to look at the size of the label. +- the target is part of [inline text][]; or + > comment: I feel this is going to be difficult to define objectively, so it is better in Expectation for now. #1010 has some work in that direction that we can probably reuse: https://github.com/act-rules/act-rules.github.io/pull/1010/files#diff-32079a0602a5a909b242b4e0961e7c5ddd6b6f5c9906b216d5bf21cf2ba13a77R28-R29 +- the target is a [UI controlled component][]. + > comment: This is for the "User Agent Control" exception. The Understanding doc mentions days in a calendar widget. I somewhat intend to have this as a list of elements (or their descendants) which are known to correspond (e.g. ``) as it is fairly flexible and easy to define. This would, however let out cases where these components are re-sized by the author. But this is only false negative, so I guess it's OK. ## Assumptions - Not essential + > comment: this is always a bit tricky. I guess we can do as in #1916 and list cases that are considered essential (list can grow). Since this is in an Assumption, we do not need to be as strict as elsewhere. - No alternative <--- ??? + > comment: I think we can go in line of "there is no [instrument][] to achieve the same goal". That does leave quite a lot of fluffyness around the goal (which should normally be unambiguosly defined), but that is maybe OK for an Assumption? ## Accessibility Support From c48767df5d916fed80e1f542a4985161b4a1c35c Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 14 Sep 2023 11:36:55 +0200 Subject: [PATCH 03/58] Refine rule a bit --- _rules/target-size-enhanced-gi8qkf.md | 15 +++++---------- .../glossary/can-be-targeted-by-pointer-event.md | 11 +++++++++++ pages/glossary/clickable-area.md | 13 +++++++++++++ 3 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 pages/glossary/can-be-targeted-by-pointer-event.md create mode 100644 pages/glossary/clickable-area.md diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index b6ad9c634c..97b2e78315 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -25,23 +25,18 @@ acknowledgments: This rule applies ta any [HTML element][namespaced element] for which all the following are true: -> comment: focusing on element rather than widget feels more natural to talk about CSS boxes later. - - the element is an [inheriting semantic][] `widget`; and - the element is [visible][]; and -- the element can be [targeted by a pointer event][]. - > comment: this may get tricky to properly define or test. Notably because we cannot access the list of events that can target an element, and empirical testing is not good due to stuff possibly happening in the back, or async, … - > Maybe it would be easier to restrict the list of widgets to those that are supposed to accept pointer events? E.g. `button` and `link` are normally stuff that can be clicked. OTOH, having them not clickable (and too small) is a failure of 1.3.1, not 2.5.5… +- the element [can be targeted by a pointer event][]. +Exception: not for `area` (due to weird shapes). +Exception: not if a descendant is focusable (hard to define the clickable area). + ## Expectation For each test target, at least one of the following is true: -- the target element has a [border box][] width and height of at least 44 CSS pixels; or - > comment: picking the border box as (i) it seems clicking in the padding or border areas does activate `onclick` functions (clicking in margin doesn't); and (ii) this mostly corresponds to the `getBoundingClientRect` JS function, and 2.5.8 refers a lot to "bounding boxes", so it sounds like a good match -- the target has a [programmatic label][]; or - > comment: this is a way to circumvent part of the "equivalent bit". Essentially, we say that if there is a programmatic label (which usually does the same as the widget), we don't try to look at it. We could also restrict this condition to "has a programmatic label of 44×44px" but that gets tricky when it is the combined sizes which is good enough. - > This could also be moved to Applicability if we don't try to look at the size of the label. +- the target element has a [clickable area][] width and height of at least 44 CSS pixels; or - the target is part of [inline text][]; or > comment: I feel this is going to be difficult to define objectively, so it is better in Expectation for now. #1010 has some work in that direction that we can probably reuse: https://github.com/act-rules/act-rules.github.io/pull/1010/files#diff-32079a0602a5a909b242b4e0961e7c5ddd6b6f5c9906b216d5bf21cf2ba13a77R28-R29 - the target is a [UI controlled component][]. diff --git a/pages/glossary/can-be-targeted-by-pointer-event.md b/pages/glossary/can-be-targeted-by-pointer-event.md new file mode 100644 index 0000000000..1200b2633e --- /dev/null +++ b/pages/glossary/can-be-targeted-by-pointer-event.md @@ -0,0 +1,11 @@ +--- +title: Can be target by a pointer event +key: can-be-targeted-by-pointer-event +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +focusable + non-obscured \ No newline at end of file diff --git a/pages/glossary/clickable-area.md b/pages/glossary/clickable-area.md new file mode 100644 index 0000000000..819373bc4f --- /dev/null +++ b/pages/glossary/clickable-area.md @@ -0,0 +1,13 @@ +--- +title: Clickable area +key: clickable-area +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +recursively: getBoundingClientRect(s) (rounding corners, ...) + overflowing text - obscuring content (in the same scroll layer, but different stacking context (absolute/relative positioning)) + +also include explicit and implicit label. \ No newline at end of file From 218bd99fb8cb6a14efcddd2dc2b1930593ff8d09 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 15 Sep 2023 09:53:28 +0200 Subject: [PATCH 04/58] Polish draft a bit --- _rules/target-size-enhanced-gi8qkf.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 97b2e78315..549d02eb4f 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -39,8 +39,9 @@ For each test target, at least one of the following is true: - the target element has a [clickable area][] width and height of at least 44 CSS pixels; or - the target is part of [inline text][]; or > comment: I feel this is going to be difficult to define objectively, so it is better in Expectation for now. #1010 has some work in that direction that we can probably reuse: https://github.com/act-rules/act-rules.github.io/pull/1010/files#diff-32079a0602a5a909b242b4e0961e7c5ddd6b6f5c9906b216d5bf21cf2ba13a77R28-R29 + https://github.com/act-rules/act-rules.github.io/blob/4b64bba6cb77a8d4dc0649c83c55372f513d979f/pages/glossary/rendered-on-a-line.md - the target is a [UI controlled component][]. - > comment: This is for the "User Agent Control" exception. The Understanding doc mentions days in a calendar widget. I somewhat intend to have this as a list of elements (or their descendants) which are known to correspond (e.g. ``) as it is fairly flexible and easy to define. This would, however let out cases where these components are re-sized by the author. But this is only false negative, so I guess it's OK. + > comment: This is for the "User Agent Control" exception. The Understanding doc mentions days in a calendar widget. I somewhat intend to have this as a list of elements (or their descendants) which are known to correspond (e.g. ``) as it is fairly flexible and easy to define. This would, however let out cases where these components are re-sized by the author. But this is only false negatives, so I guess it's OK. ## Assumptions From 62d2c9d632f8e803b39c508a5467cd826f5c5ea3 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 28 Sep 2023 13:21:34 +0200 Subject: [PATCH 05/58] more work --- _rules/target-size-enhanced-gi8qkf.md | 16 ++++++++-------- pages/glossary/clickable-area.md | 5 ++++- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 549d02eb4f..166e3dd000 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -26,11 +26,14 @@ acknowledgments: This rule applies ta any [HTML element][namespaced element] for which all the following are true: - the element is an [inheriting semantic][] `widget`; and -- the element is [visible][]; and +> comment: role may be incorrectly set. - the element [can be targeted by a pointer event][]. Exception: not for `area` (due to weird shapes). Exception: not if a descendant is focusable (hard to define the clickable area). +Exception: the target is a [UI controlled component][]. +> comment: This is for the "User Agent Control" exception. The Understanding doc mentions days in a calendar widget. I somewhat intend to have this as a list of elements (or their descendants) which are known to correspond (e.g. ``) as it is fairly flexible and easy to define. This would, however let out cases where these components are re-sized by the author. But this is only false negatives, so I guess it's OK. + ## Expectation @@ -40,16 +43,13 @@ For each test target, at least one of the following is true: - the target is part of [inline text][]; or > comment: I feel this is going to be difficult to define objectively, so it is better in Expectation for now. #1010 has some work in that direction that we can probably reuse: https://github.com/act-rules/act-rules.github.io/pull/1010/files#diff-32079a0602a5a909b242b4e0961e7c5ddd6b6f5c9906b216d5bf21cf2ba13a77R28-R29 https://github.com/act-rules/act-rules.github.io/blob/4b64bba6cb77a8d4dc0649c83c55372f513d979f/pages/glossary/rendered-on-a-line.md -- the target is a [UI controlled component][]. - > comment: This is for the "User Agent Control" exception. The Understanding doc mentions days in a calendar widget. I somewhat intend to have this as a list of elements (or their descendants) which are known to correspond (e.g. ``) as it is fairly flexible and easy to define. This would, however let out cases where these components are re-sized by the author. But this is only false negatives, so I guess it's OK. +- The size is [essential target size][] + > comment: this is always a bit tricky. I guess we can do as in #1916 and list cases that are considered essential (list can grow). +- There is an [instrument][] to achieve an equivalent goal, with a 44*44px [clickable area][]. + > comment: I think we can go in line of "there is no [instrument][] to achieve the same goal". That does leave quite a lot of fluffyness around the goal (which should normally be unambiguosly defined), but that is maybe OK for an Assumption? ## Assumptions -- Not essential - > comment: this is always a bit tricky. I guess we can do as in #1916 and list cases that are considered essential (list can grow). Since this is in an Assumption, we do not need to be as strict as elsewhere. -- No alternative <--- ??? - > comment: I think we can go in line of "there is no [instrument][] to achieve the same goal". That does leave quite a lot of fluffyness around the goal (which should normally be unambiguosly defined), but that is maybe OK for an Assumption? - ## Accessibility Support ## Background diff --git a/pages/glossary/clickable-area.md b/pages/glossary/clickable-area.md index 819373bc4f..93b1acc503 100644 --- a/pages/glossary/clickable-area.md +++ b/pages/glossary/clickable-area.md @@ -10,4 +10,7 @@ input_aspects: recursively: getBoundingClientRect(s) (rounding corners, ...) + overflowing text - obscuring content (in the same scroll layer, but different stacking context (absolute/relative positioning)) -also include explicit and implicit label. \ No newline at end of file +also include explicit and implicit label. + +also need to consider parent clipping the element. +also may consider CSS clipping. \ No newline at end of file From 90c41076c56c39c88f0a6f2b843397579969ac13 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 5 Oct 2023 16:01:38 +0200 Subject: [PATCH 06/58] Attempt to write barebone defs --- .../can-be-targeted-by-pointer-event.md | 8 +++++- pages/glossary/clickable-area.md | 25 ++++++++++++++++--- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/pages/glossary/can-be-targeted-by-pointer-event.md b/pages/glossary/can-be-targeted-by-pointer-event.md index 1200b2633e..f26949b379 100644 --- a/pages/glossary/can-be-targeted-by-pointer-event.md +++ b/pages/glossary/can-be-targeted-by-pointer-event.md @@ -8,4 +8,10 @@ input_aspects: - DOM tree --- -focusable + non-obscured \ No newline at end of file +An element _can be targeted by pointer events_ when both the following conditions are true: + +- the element is [focusable][]; and +- the element is [visible][]. <- not covered, even by transparent stuff… + +[focusable]: #focusable 'Definition of Focusable' +[visible]: #visible ' Definition of Visible' diff --git a/pages/glossary/clickable-area.md b/pages/glossary/clickable-area.md index 93b1acc503..e35448f09a 100644 --- a/pages/glossary/clickable-area.md +++ b/pages/glossary/clickable-area.md @@ -8,9 +8,26 @@ input_aspects: - DOM tree --- -recursively: getBoundingClientRect(s) (rounding corners, ...) + overflowing text - obscuring content (in the same scroll layer, but different stacking context (absolute/relative positioning)) +The _directly clickable area_ of a text node is the smallest rectangle that contains all its visible pixels. -also include explicit and implicit label. +The _directly clickable area_ of an element is the result of calling `getBoundingClientRect` on it. -also need to consider parent clipping the element. -also may consider CSS clipping. \ No newline at end of file +The _clickable area_ of an element is the union of the directly clickable area of all its inclusive descendants, and the clickable area of its [implicit][implicit label] or [explicit label][]. + +> **Comment:** implicit label = ``, explicit label = `ACT rules +``` + +#### Passed Example + +This button has a [clickable area][] of exactly 44×44 pixels. ```html -Home + ``` #### Passed Example 2 -This `input` element, combined with its +This `input` element, combined with its [implicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×48px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. ```html - ``` +#### Inapplicable Example + +This button has been [shape-shifted][shape-shited element] by the `rotate` property. + +```html + + +``` + +#### Inapplicable Example + +This button has been [shape-shifted][shape-shited element] by the `border-radius` property. + +```html + + +``` + +#### Inapplicable Example + +This button has been [shape-shifted][shape-shited element] by the `clip-path` property. + +```html + + Failed Example + + + +
+ Hello +
+``` + +> **Comment:** This is also going to be annoying to test. The bounding box / `getBoundingClientRect` is at 80×50px. And `clip-path` could have virtually any shape, making detecting a 44×44px rectangle inside very tricky (even more if the rectangles are allowed to be rotated…) + [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' [clickable area]: #clickable-area 'Definition of Cliclkable Area' [essential target size]: #essential-target-size ' Definition of Essential Target Size' -[explicit label]: #explicit-label 'Definition of Explicit Label' +[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' [focusable]: #focusable 'Definition of Focusable' -[implicit label]: #implicit-label 'Definition of Implicit Label' +[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' [inheriting semantic]: #inheriting-semantic 'Definition of Inheriting Semantic Role' [inline text]: #inline-text 'Definition of Inline Text' [instrument]: #instrument 'Definition of Instrument' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' [programmatic label]: #programmatic-abel 'Definition of Programmatic Label' +[shape-shifted element]: #shape-shifted-element 'Definition of Shape-shifted Element' [targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' [user agent controlled component]: #ui-controlled-component 'Definition of UI Controlled Component' diff --git a/pages/glossary/can-be-targeted-by-pointer-event.md b/pages/glossary/can-be-targeted-by-pointer-event.md index 6db0f22c5c..7b3938d7dc 100644 --- a/pages/glossary/can-be-targeted-by-pointer-event.md +++ b/pages/glossary/can-be-targeted-by-pointer-event.md @@ -24,8 +24,8 @@ This definition tries to capture which HTML elements can actually react to point As a consequence, this definition has these two known limitations: -- Not all HTML elements that can actually be targeted by a pointer event match this definition. For example, an author may build custom buttons without giving them an appropriate role or making them [focusable][]; or content overflowing the [border box][] is clickable. Elements that can be targeted by pointer events but do not match this definition likely fail either [Success Criterion 4.1.2 Name, Role, Value][sc412] or [Success Criterion 2.1.1 Keyboard][sc211]. -- Not all HTML elements that match this definition can actually be targeted by a pointer event. For example, when the actual clickable area does not cover the full [border box][] and is entirely covered by other elements, or when the element has an event handler that does nothing. Elements that match this definition but cannot be targeted by pointer events likely fail [Success Criterion 2.5.6 Concurrent Input Mechanisms][sc256]. +- Not all HTML elements that can actually be targeted by a pointer event match this definition. For example, an author may build custom buttons without giving them an appropriate role or making them [focusable][]; or content overflowing the [border box][] is clickable. Elements that can actually be targeted by pointer events but do not match this definition likely fail either [Success Criterion 4.1.2 Name, Role, Value][sc412] or [Success Criterion 2.1.1 Keyboard][sc211]. +- Not all HTML elements that match this definition can actually be targeted by a pointer event. For example, when the actual clickable area does not cover the full [border box][] and is entirely covered by other elements, or when the element has an event handler that does nothing. Elements that match this definition but cannot actually be targeted by pointer events likely fail [Success Criterion 2.5.6 Concurrent Input Mechanisms][sc256]. [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' [clickable area]: #clickable-area 'Definition of Clickable Area' diff --git a/pages/glossary/shape-shifted-element.md b/pages/glossary/shape-shifted-element.md index e5e873f677..e3759eb1dd 100644 --- a/pages/glossary/shape-shifted-element.md +++ b/pages/glossary/shape-shifted-element.md @@ -8,7 +8,9 @@ input_aspects: - DOM tree --- -An element is _shape-shifted_ is the [computed value][] of it has an [inclusive ancestor][] in the [flat tree][] with any of its [shape-shifting properties][] different from the [initial value][] of that property. +An element is _shape-shifted_ if it has an [inclusive ancestor][] in the [flat tree][] with any of its [shape-shifting properties][] whose [computed value][] is different from the [initial value][] of that property. + +> comment: shape-shifting an ancestor can shape-shifting the element, e.g. with `transform` or clipping. OTOH, this might be very trigger happy in considering everything inside a modal shape shifted just because the modal has rounded corners… The Shape-Shifting Properties are the following CSS properties: diff --git a/pages/glossary/user-agent-controlled-component.md b/pages/glossary/user-agent-controlled-component.md new file mode 100644 index 0000000000..04df5a59db --- /dev/null +++ b/pages/glossary/user-agent-controlled-component.md @@ -0,0 +1,20 @@ +--- +title: User-Agent Controlled Component +key: user-agent-controlled-component +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +A _User-Agent Controlled Component_ is an [HTML element][namespace element] for which all the following are true: + +- the element has an [implicit role][] which is a [semantic `widget`][semantic role]; and +- none of the following CSS properties of the element have a [cascaded value][] with "Author" [origin][]: `height`, `width`, `font-size`, `line-height`. + +[cascaded value]: https://www.w3.org/TR/css-cascade-5/#cascade-value 'CSS definition of computed value' +[implicit role]: #implicit-role 'Definition of Implicit Role' +[origin]: https://drafts.csswg.org/css-cascade-5/#cascading-origins 'CSS definition of Cascading Origin' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[semantic role]: #semantic-role 'Definition of Semantic Role' From 421c5bf7881469edaac18575e72932fbcde1ab2b Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 21 Dec 2023 12:56:51 +0100 Subject: [PATCH 29/58] Typos --- _rules/target-size-enhanced-gi8qkf.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 7571516b51..80af1e0732 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -661,7 +661,7 @@ This input and its [programmatic label][] is a [User Agent Controlled component] #### Inapplicable Example -This button has been [shape-shifted][shape-shited element] by the `rotate` property. +This button has been [shape-shifted][shape-shifted element] by the `rotate` property. ```html + +``` + +#### Passed Example + +This button has been clipped, leaving a [clickable area][] containing a 45×45px [horizontal rectangle][]. + +```html + + Failed Example + + + +
+ Hello +
+``` + ### Failed #### Failed Example @@ -421,7 +454,7 @@ This link only has a [clickable area][] of approximately 66×18 pixels, as shown #### Failed Example -This custom button has a [clickable area][] of approximately 18×20px, as shown by its dashed red border. Since it is not a native `button` element, it is not a [User Agent Controlled][] element. +This custom button has a [clickable area][] of approximately 18×20px, as shown by its dashed red border. ```html @@ -433,6 +466,8 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown #### Failed Example +> TODO: make it not UA-controlled. + This input, together with its [implicit label][] and its padding has a [clickable area][] whose height is below 41px. ```html @@ -573,159 +608,123 @@ This button only has a [clickable area][] of approximately 20×45px, because it
``` -- Link has insufficient size -- This radio button with insufficient size has its size modified by the author - -### Inapplicable - -#### Inapplicable Example - -These `input` elements and `button` are `disabled`. - -```html -
-
-
- -
-``` - -#### Inapplicable Example - -This checkbox does not have its size adjusted by the author +#### Failed Example -```html -

- - I agree with the terms and conditions. -

-``` +> TODO: This radio button with insufficient size has its size modified by the author -#### Inapplicable Example +#### Failed Example -This checkbox cannot be [targeted by a pointer event][] because it is hidden. It is replaced with an on-screen clickable SVG. +The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. ```html - + + ``` -#### Inapplicable Example +#### Failed Example -This checkbox cannot be [targeted by a pointer event][] because it is obscured by the modal. +The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. ```html - + + ``` -#### Inapplicable Example +#### Failed Example -This button cannot be [targeted by a pointer event][] because it is entirely obscured by the `div` element with a dashed red border. +The [clickable area][] of this button only contains a 25×45px [horizontal rectangle][]. ```html - Inapplicable Example + Failed Example - - -
-``` - -#### Inapplicable Example - -This button has a [clickable area][] a bit below 29×22px (due to its rounded corners), but it is a [User Agent Controlled component][]. - -```html - +
+ Hello +
``` -#### Inapplicable Example - -This input and its [programmatic label][] is a [User Agent Controlled component][]. The height of its [clickable area][] is only 37px. - -```html - -``` +### Inapplicable #### Inapplicable Example -This button has been [shape-shifted][shape-shifted element] by the `rotate` property. +These `input` elements and `button` are `disabled` and therefore not [focusable][]. ```html - - +
+
+
+ +
``` #### Inapplicable Example -This button has been [shape-shifted][shape-shifted element] by the `border-radius` property. +This checkbox is an [User-Agent controlled component][]. ```html - - +

+ + I agree with the terms and conditions. +

``` #### Inapplicable Example -This button has been [shape-shifted][shape-shifted element] by the `clip-path` property. +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. ```html - Failed Example + Inapplicable Example -
- Hello -
-``` + -> **Comment:** This is also going to be annoying to test. The bounding box / `getBoundingClientRect` is at 80×50px. And `clip-path` could have virtually any shape, making detecting a 44×44px rectangle inside very tricky (even more if the rectangles are allowed to be rotated…) +
+``` +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' -[clickable area]: #clickable-area 'Definition of Cliclkable Area' +[clickable area]: #clickable-area 'Definition of Clickable Area' [essential target size]: #essential-target-size ' Definition of Essential Target Size' [explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' [focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' [implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' -[inheriting semantic]: #inheriting-semantic 'Definition of Inheriting Semantic Role' -[inline text]: #inline-text 'Definition of Inline Text' -[instrument]: #instrument 'Definition of Instrument' +[instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' -[programmatic label]: #programmatic-abel 'Definition of Programmatic Label' -[shape-shifted element]: #shape-shifted-element 'Definition of Shape-shifted Element' +[rendered on a line]: #rendered-on-a-line 'Definition of Rendered on a Line' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' [targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' -[user agent controlled component]: #ui-controlled-component 'Definition of UI Controlled Component' +[user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component' diff --git a/pages/glossary/can-be-targeted-by-pointer-event.md b/pages/glossary/can-be-targeted-by-pointer-event.md index 7b3938d7dc..4a5a8c0168 100644 --- a/pages/glossary/can-be-targeted-by-pointer-event.md +++ b/pages/glossary/can-be-targeted-by-pointer-event.md @@ -12,8 +12,8 @@ An element _can be targeted by pointer events_ when all the following conditions - the element is a [semantic `widget`][semantic role]; and - the element is [focusable][]; and -- the element's [border box][] intersects the viewport; and -- the element's [border box][] is not entirely covered by the [border boxes][] of elements with greater `z-index` and `pointer-events: auto` CSS properties. +- the element [computed value][] of the `pointer-events` CSS property is `auto`; and +- through scrolling, it is possible to have parts of the element's [border box][] which intersect the viewport and are not entirely covered by the [border boxes][] of elements with greater [computed][computed value] `z-index` and a [computed][computed value] `pointer-events` of `auto`. #### Background @@ -24,14 +24,13 @@ This definition tries to capture which HTML elements can actually react to point As a consequence, this definition has these two known limitations: -- Not all HTML elements that can actually be targeted by a pointer event match this definition. For example, an author may build custom buttons without giving them an appropriate role or making them [focusable][]; or content overflowing the [border box][] is clickable. Elements that can actually be targeted by pointer events but do not match this definition likely fail either [Success Criterion 4.1.2 Name, Role, Value][sc412] or [Success Criterion 2.1.1 Keyboard][sc211]. +- Not all HTML elements that can actually be targeted by a pointer event match this definition. For example, an author may build custom buttons without giving them an appropriate role or making them [focusable][]; or content overflowing the [border box][] of an element is clickable, but that element might not match the definition if the [border box][] is off-screen. Elements that can actually be targeted by pointer events but do not match this definition likely fail either [Success Criterion 4.1.2 Name, Role, Value][sc412] or [Success Criterion 2.1.1 Keyboard][sc211]. - Not all HTML elements that match this definition can actually be targeted by a pointer event. For example, when the actual clickable area does not cover the full [border box][] and is entirely covered by other elements, or when the element has an event handler that does nothing. Elements that match this definition but cannot actually be targeted by pointer events likely fail [Success Criterion 2.5.6 Concurrent Input Mechanisms][sc256]. [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' -[clickable area]: #clickable-area 'Definition of Clickable Area' +[computed value]: https://www.w3.org/TR/css-cascade-3/#computed 'CSS definition of Computed Value' [focusable]: #focusable 'Definition of Focusable' [sc211]: https://www.w3.org/TR/WCAG22/#keyboard 'Success Criterion 2.1.1 Keyboard' [sc256]: https://www.w3.org/TR/WCAG22/#concurrent-input-mechanisms 'Success Criterion 2.5.6 Concurrent Input Mechanisms' [sc412]: https://www.w3.org/TR/WCAG22/#name-role-value 'Success Criterion 4.1.2 Name, Role, Value' [semantic role]: #semantic-role 'Definition of Semantic Role' -[visible]: #visible ' Definition of Visible' diff --git a/pages/glossary/clickable-area.md b/pages/glossary/clickable-area.md index a96de1735b..97d8c649a3 100644 --- a/pages/glossary/clickable-area.md +++ b/pages/glossary/clickable-area.md @@ -10,7 +10,7 @@ input_aspects: The _directly clickable area_ of an element is the set of all viewport coordinates for which the element is the [topmost event target][] -The _clickable area_ of an element is the union of its _directly clickable area_ and that of its [implicit][implicit label] or [explicit label][]. +The _clickable area_ of an element is the union of its _directly clickable area_ and that of its [implicit][implicit label] or [explicit label][]. Clickable areas may contain several disconnected parts. [explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' [implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' diff --git a/pages/glossary/essential-target-size.md b/pages/glossary/essential-target-size.md new file mode 100644 index 0000000000..49eaa86504 --- /dev/null +++ b/pages/glossary/essential-target-size.md @@ -0,0 +1,13 @@ +--- +title: Essential Target Size +key: essential-target-size +unambiguous: true +objective: false +--- + +An element which [can be targeted by a pointer event][] has _essential target size_ if at least one of the following is true: + +- the element is a pin on a map, indicating a precise position, and larger size would create confusion regarding this position; or +- the element is part of a graphical representation of data (e.g., a graph), indicating a precise value, and larger size would create confusion regarding this value. + +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/pages/glossary/horizontal-rectangle.md b/pages/glossary/horizontal-rectangle.md new file mode 100644 index 0000000000..06255958db --- /dev/null +++ b/pages/glossary/horizontal-rectangle.md @@ -0,0 +1,13 @@ +--- +title: Horizontal rectangle +key: horizontal-rectangle +unambiguous: true +objective: true +input_aspects: +--- + +A set of coordinates R is an _horizontal rectangle_ if there exist a coordinate _(x, y)_ and numbers _w_ and _h_ such that all coordinates _(a, b)_ with _x ⩽ a ⩽ x+w_ and _y ⩽ b ⩽ y+h_ are part of R. + +R is then said to have corner _(x, y)_, width _w_, and height _h_. + +Note that the rectangle is "horizontal" in the sense that its sides align with the axis of the coordinate system. diff --git a/pages/glossary/rendered-on-a-line.md b/pages/glossary/rendered-on-a-line.md new file mode 100644 index 0000000000..1228f22d05 --- /dev/null +++ b/pages/glossary/rendered-on-a-line.md @@ -0,0 +1,27 @@ +--- +title: Rendered on a line +key: rendered-on-a-line +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +All nodes that generate an [inline box][] that are part of a [line box][] are considered _rendered on a line_. These are _line rendering nodes_. + +Any [flat tree][] [descendants][] of line rendering nodes are also considered part of a line if one of its [clientRects][] overlaps with the position of the [line box][], and if all the following is true for each [ancestor][] in the [flat tree][] up to the line rendering node: + +- the ancestor is an [inline box][]; and +- the ancestor is not [floating][]; and +- the ancestor does not have an [absolute][] or [fixed][] position. + +[absolute]: https://drafts.csswg.org/css-position-3/#valdef-position-absolute 'Definition of absolute' +[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'Definition of ancestor' +[clientrects]: https://drafts.csswg.org/cssom-view/#dom-element-getclientrects 'Definition of getClientRects' +[descendants]: https://dom.spec.whatwg.org/#concept-tree-descendant 'Definition of descendant' +[fixed]: https://drafts.csswg.org/css-position-3/#valdef-position-fixed 'Definition of fixed' +[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' +[floating]: https://www.w3.org/TR/CSS2/visuren.html#floats 'Definition of float' +[inline box]: https://drafts.csswg.org/css-display/#inline-box 'Definition of inline box' +[line box]: https://drafts.csswg.org/css2/visuren.html#line-box 'Definition of line box' diff --git a/pages/glossary/shape-shifted-element.md b/pages/glossary/shape-shifted-element.md deleted file mode 100644 index e3759eb1dd..0000000000 --- a/pages/glossary/shape-shifted-element.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Shape-Shifted Element -key: shape-shifted-element -unambiguous: true -objective: true -input_aspects: - - CSS styling - - DOM tree ---- - -An element is _shape-shifted_ if it has an [inclusive ancestor][] in the [flat tree][] with any of its [shape-shifting properties][] whose [computed value][] is different from the [initial value][] of that property. - -> comment: shape-shifting an ancestor can shape-shifting the element, e.g. with `transform` or clipping. OTOH, this might be very trigger happy in considering everything inside a modal shape shifted just because the modal has rounded corners… - -The Shape-Shifting Properties are the following CSS properties: - -- `border-radius` and the associated longhands; -- `transform`; -- `rotate`; -- `clip`; -- `clip-path`; - -#### Background - -Shape-shifted elements have an actual area on screen that can be very different from a rectangle aligned with the screen edges, and therefore hard to precisely compute. Rules looking at this area ignore shape-shifted elements for the sake of simplicity. - -Not all shape-shifting properties significantly change the shape of an element. For example, a rotation of 180°, a `transform` property defining only the `translate` function, or a `clip-path` along a rectangular shape would not really alter the shape. This definition ignores these for the sake of simplicity. - -Other CSS properties may alter the area covered by an element, for examples `height` or `width`. These properties, however, do not alter the _shape_ (rectangle aligned with the edges) and tend to keep the covered area and the CSS box model in harmony. Therefore, this definition doesn't include them. - -[inclusive ancestor]: https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor 'DOM Definition of Inclusive Ancestor' -[computed value]: https://www.w3.org/TR/css-cascade-5/#computed-value 'CSS definition of computed value' -[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS Definition of flat tree' -[initial value]: https://www.w3.org/TR/css-cascade-5/#initial-value 'CSS definition of initial value' -[shape-shifting properties]: #shape-shifted-element:properties diff --git a/pages/glossary/user-agent-controlled-component.md b/pages/glossary/user-agent-controlled-component.md index 04df5a59db..dcd9e9f968 100644 --- a/pages/glossary/user-agent-controlled-component.md +++ b/pages/glossary/user-agent-controlled-component.md @@ -11,10 +11,19 @@ input_aspects: A _User-Agent Controlled Component_ is an [HTML element][namespace element] for which all the following are true: - the element has an [implicit role][] which is a [semantic `widget`][semantic role]; and -- none of the following CSS properties of the element have a [cascaded value][] with "Author" [origin][]: `height`, `width`, `font-size`, `line-height`. +- the [computed values][] of the element's `height` and `width` CSS properties do not depend on content provided by the author; and +- the [computed values][] of the element's `height` and `width` CSS properties do not depend on any CSS property with a [cascaded value][] with "Author" [origin][]. + +#### Examples + +Typically, radio buttons or checkboxes are User-Agent controlled, until an author does change their dimensions. + +Links and buttons usually aren't, because their (text) content is provided by the author and the width depends on it. + +Days in a calendar widget build with an `` element are also User-Agent controlled since their content isn't provided by the author and their dimension do not depend on values provided by the author. [cascaded value]: https://www.w3.org/TR/css-cascade-5/#cascade-value 'CSS definition of computed value' +[computed values]: https://www.w3.org/TR/css-cascade-3/#computed 'CSS definition of Computed Value' [implicit role]: #implicit-role 'Definition of Implicit Role' [origin]: https://drafts.csswg.org/css-cascade-5/#cascading-origins 'CSS definition of Cascading Origin' -[namespaced element]: #namespaced-element 'Definition of Namespaced Element' [semantic role]: #semantic-role 'Definition of Semantic Role' From 301f1f434db8d228c5a224a045a5e19641ead130 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 29 Feb 2024 15:41:21 +0100 Subject: [PATCH 33/58] Clean up examples --- _rules/target-size-enhanced-gi8qkf.md | 110 ++++++++++-------- .../user-agent-controlled-component.md | 2 + 2 files changed, 61 insertions(+), 51 deletions(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 8521a34d58..153f8a8ea3 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -31,7 +31,7 @@ For each test target, at least one of the following is true: - though scrolling, the element can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels; or - the element has an empty [clickable area][], and its [clickable area][] cannot be made non-empty through scrolling; or -- the target is part of [rendered on a line][]; or +- the target is [rendered on a line][]; or - The size has [essential target size][] - There is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. @@ -45,7 +45,7 @@ Hit testing isn't properly defined, and this has been an [issue in the CSS speci ## Background -While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], apply targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have consistent implementation of the rule, it does not contains such test cases, notably all Failed test cases have a [border box][] which is too small. +While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], apply targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. ### Bibliography @@ -59,7 +59,7 @@ While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], app ### Passed -#### Passed Example +#### Passed Example 1 This `link` has a [clickable area][] of approximately 210×55 pixels. @@ -72,7 +72,7 @@ This `link` has a [clickable area][] of approximately 210×55 pixels. ACT rules ``` -#### Passed Example +#### Passed Example 2 This button has a [clickable area][] of exactly 44×44 pixels. @@ -87,53 +87,49 @@ This button has a [clickable area][] of exactly 44×44 pixels. ``` -#### Passed Example - -> TODO: the input is UA controlled, this needs to change. +#### Passed Example 3 This `input` element, combined with its [implicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×48px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. ```html - Passed Example + Passed Example 3 ``` -#### Passed Example - -> TODO: the input is UA controlled, this needs to change. +#### Passed Example 4 This `input` element, combined with its [explicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×45px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. ```html - Passed Example + Passed Example 4 - + ``` -#### Passed Example +#### Passed Example 5 This button has a clickable area of approximately 212×54px due to the overflowing text being clickable. The `div` element is only here to visually display the clickable area of the text. ```html - Passed Example + Passed Example 5 +
+ Pick a color (required) + + +
+``` -#### Failed Example +#### Failed Example 9 The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. @@ -628,7 +636,7 @@ The [clickable area][] of this button does not contain a 44×44px [horizontal re ``` -#### Failed Example +#### Failed Example 10 The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. @@ -643,7 +651,7 @@ The [clickable area][] of this button does not contain a 44×44px [horizontal re ``` -#### Failed Example +#### Failed Example 11 The [clickable area][] of this button only contains a 25×45px [horizontal rectangle][]. @@ -668,7 +676,7 @@ The [clickable area][] of this button only contains a 25×45px [horizontal recta ### Inapplicable -#### Inapplicable Example +#### Inapplicable Example 1 These `input` elements and `button` are `disabled` and therefore not [focusable][]. @@ -680,7 +688,7 @@ These `input` elements and `button` are `disabled` and therefore not [focusable] ``` -#### Inapplicable Example +#### Inapplicable Example 2 This checkbox is an [User-Agent controlled component][]. @@ -691,7 +699,7 @@ This checkbox is an [User-Agent controlled component][].

``` -#### Inapplicable Example +#### Inapplicable Example 3 This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. diff --git a/pages/glossary/user-agent-controlled-component.md b/pages/glossary/user-agent-controlled-component.md index dcd9e9f968..1cadad0a1e 100644 --- a/pages/glossary/user-agent-controlled-component.md +++ b/pages/glossary/user-agent-controlled-component.md @@ -22,6 +22,8 @@ Links and buttons usually aren't, because their (text) content is provided by th Days in a calendar widget build with an `` element are also User-Agent controlled since their content isn't provided by the author and their dimension do not depend on values provided by the author. +Directly setting the `height` or `width` CSS properties makes an element not User-Agent controlled. Changing the `max-height` or `min-width` properties can make it not User-Agent controlled, if the added constraint impacts the [computed][computed values] `height` or `width` properties (i.e., if the `height` would be larger than `max-height` and is restricted by it; or if the `width` would be smaller than `min-width` and is changed by it). + [cascaded value]: https://www.w3.org/TR/css-cascade-5/#cascade-value 'CSS definition of computed value' [computed values]: https://www.w3.org/TR/css-cascade-3/#computed 'CSS definition of Computed Value' [implicit role]: #implicit-role 'Definition of Implicit Role' From 8719b7a39d24ad2b4400803dd68cef2d87d2e887 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 1 Mar 2024 10:04:47 +0100 Subject: [PATCH 34/58] Move UA controlled exception from Applicability to Expectation --- _rules/target-size-enhanced-gi8qkf.md | 93 ++++++++++++++------------- 1 file changed, 47 insertions(+), 46 deletions(-) diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 153f8a8ea3..7766cc1893 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -23,7 +23,7 @@ acknowledgments: ## Applicability -This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][], unless the target is a [User Agent controlled component][]. +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. ## Expectation @@ -32,7 +32,8 @@ For each test target, at least one of the following is true: - though scrolling, the element can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels; or - the element has an empty [clickable area][], and its [clickable area][] cannot be made non-empty through scrolling; or - the target is [rendered on a line][]; or -- The size has [essential target size][] +- the target is a [User Agent controlled component][]; or +- The size has [essential target size][]; or - There is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. ## Assumptions @@ -193,6 +194,45 @@ These links are [rendered on a line][]. #### Passed Example 8 +This checkbox is an [User-Agent controlled component][]. + +```html +

+ + I agree with the terms and conditions. +

+``` + +#### Passed Example 9 + +The pin (red square) on this map has [essential size][] because it is important to pinpoint the exact location. + +```html + + +Location of ACT rules headquarters: +
+ +``` + +#### Passed Example 10 + The `#small` button has a [clickable area][] of only 35×35px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). ```html @@ -212,7 +252,7 @@ The `#small` button has a [clickable area][] of only 35×35px, but there is an [ ``` -#### Passed Example 9 +#### Passed Example 11 This button has a [clickable area][] containing a 44×44px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 44×44px rectangle delimited by prolonging the solid green lines. @@ -260,7 +300,7 @@ This button has a [clickable area][] containing a 44×44px rectangle. Even thoug
``` -#### Passed Example 10 +#### Passed Example 12 This button has a [clickable area][] of roughly 73×50px. The `div` element with a dashed red border does not obscure it because of its `pointer-events: none` CSS property that let the clicks go through. @@ -284,35 +324,7 @@ This button has a [clickable area][] of roughly 73×50px. The `div` element with
``` -#### Passed Example 11 - -The pin (red square) on this map has [essential size][] because it is important to pinpoint the exact location. - -```html - - -Location of ACT rules headquarters: -
- -``` - -#### Passed Example 12 +#### Passed Example 13 This button has a 50×50px [clickable area][]. The `div` with a dashed red border is not obscuring it because it can be scrolled out of the way. The solid green lines hint at a 44×44px area inside the button. @@ -374,7 +386,7 @@ This button has a 50×50px [clickable area][]. The `div` with a dashed red borde
``` -#### Passed Example 13 +#### Passed Example 14 The [clickable area][] of this button contains a 44×44px [horizontal rectangle][]. Note that the actual [border box][] has to be much larger to account for the rounded corners. @@ -389,7 +401,7 @@ The [clickable area][] of this button contains a 44×44px [horizontal rectangle] ``` -#### Passed Example 14 +#### Passed Example 15 This button has been clipped, leaving a [clickable area][] containing a 45×45px [horizontal rectangle][]. @@ -690,17 +702,6 @@ These `input` elements and `button` are `disabled` and therefore not [focusable] #### Inapplicable Example 2 -This checkbox is an [User-Agent controlled component][]. - -```html -

- - I agree with the terms and conditions. -

-``` - -#### Inapplicable Example 3 - This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. ```html From cb8149ce1868389659d3e0c6e8f7b2c360634ce5 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 1 Mar 2024 10:53:43 +0100 Subject: [PATCH 35/58] Typo in link --- pages/glossary/programmatic-label.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/glossary/programmatic-label.md b/pages/glossary/programmatic-label.md index 5f4a4489db..4f93566512 100755 --- a/pages/glossary/programmatic-label.md +++ b/pages/glossary/programmatic-label.md @@ -18,7 +18,7 @@ For more details, see [examples of programmatic label][]. The [labeled control][] L of an element T is its explicit label if L has a `for` attribute referencing T's `id` attribute. -The [labeled control][] L of an element T is its implicit label if L has a no `for` attribute and is an ancestor of T in the DOM tree. Note that explicit labels take precedence over implicit label, and that [labeled controls][labelled control] do not cross shadow boundaries nor content documents. +The [labeled control][] L of an element T is its implicit label if L has a no `for` attribute and is an ancestor of T in the DOM tree. Note that explicit labels take precedence over implicit label, and that [labeled controls][labeled control] do not cross shadow boundaries nor content documents. [labeled control]: https://html.spec.whatwg.org/multipage/forms.html#labeled-control 'Definition of labeled control' [examples of programmatic label]: https://act-rules.github.io/pages/examples/programmatic-label/ From 30e4c7f59bb96a55cffe3f8e33f243f1f88682e5 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 13:48:56 +0100 Subject: [PATCH 36/58] Start breaking down rule --- _rules/target-size-enhanced-gi8qkf.md | 2 +- _rules/target-size-size-enhanced-8iacb5.md | 635 +++++++++++++++++++++ 2 files changed, 636 insertions(+), 1 deletion(-) create mode 100644 _rules/target-size-size-enhanced-8iacb5.md diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 7766cc1893..85beb345f0 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -3,7 +3,7 @@ id: gi8qkf name: rule_type: atomic description: | - This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels. + This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels, are inline, are user agent controlled, or have essential size. accessibility_requirements: wcag21:2.5.5: # Target size (enhanced) (AAA) forConformance: true diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md new file mode 100644 index 0000000000..f0308cfb0a --- /dev/null +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -0,0 +1,635 @@ +--- +id: 8iacb5 +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider exceptions of the criterion. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + test_assets: Map Image by Freepik +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +For each test target the element can be brought into viewport though scrolling and have a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] is satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], apply targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) + +## Test Cases + +> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. + +> **Note:** Several examples illustrate overlapping and partially obscured content with fully transparent `div` (with a dashed red border), in order to still show the underlying target. This often results in very "artificial" examples where in real page the overlapping element would not be transparent and would actually hide the target. + +### Passed + +#### Passed Example 1 + +This `link` has a [clickable area][] of approximately 210×55 pixels. + +```html + +ACT rules +``` + +#### Passed Example 2 + +This button has a [clickable area][] of exactly 44×44 pixels. + +```html + + +``` + +#### Passed Example 3 + +This `input` element, combined with its [implicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×48px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 3 + + + + + +``` + +#### Passed Example 4 + +This `input` element, combined with its [explicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×45px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 4 + + + + + + +``` + +#### Passed Example 5 + +This button has a clickable area of approximately 212×54px due to the overflowing text being clickable. The `div` element is only here to visually display the clickable area of the text. + +```html + + Passed Example 5 + + + + + + + + + +``` + +#### Passed Example 6 + +This button, together with its padding and border, has a [clickable area][] of more than 44×44px. The solid green border shows the [clickable area][] while the dashed red one shows the inner text (without sizing nor padding). + +```html + + Passed Example 6 + + + + + +
Hi
+ + +``` + +#### Passed Example 7 + +This button has a [clickable area][] containing a 44×44px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 44×44px rectangle delimited by prolonging the solid green lines. + +```html + + Passed Example 9 + + + + + +
+
+
+``` + +#### Passed Example 8 + +This button has a [clickable area][] of roughly 73×50px. The `div` element with a dashed red border does not obscure it because of its `pointer-events: none` CSS property that let the clicks go through. + +```html + + Passed Example 10 + + + + + +
+``` + +#### Passed Example 9 + +This button has a 50×50px [clickable area][]. The `div` with a dashed red border is not obscuring it because it can be scrolled out of the way. The solid green lines hint at a 44×44px area inside the button. + +```html + + Passed Example 12 + + + + +
+
+
+
+ + +
+
+``` + +#### Passed Example 10 + +The [clickable area][] of this button contains a 44×44px [horizontal rectangle][]. Note that the actual [border box][] has to be much larger to account for the rounded corners. + +```html + + +``` + +#### Passed Example 11 + +This button has been clipped, leaving a [clickable area][] containing a 45×45px [horizontal rectangle][]. + +```html + + Failed Example + + + +
+ Hello +
+``` + +### Failed + +#### Failed Example 1 + +This `button` has a [clickable area][] of only 35×35 pixels. + +```html + + +``` + +#### Failed Example 2 + +This link only has a [clickable area][] of approximately 66×18 pixels, as shown by its border. + +```html + + Failed Example 2 + + + + + ACT rules + +``` + +#### Failed Example 3 + +This custom button has a [clickable area][] of approximately 18×20px, as shown by its dashed red border. + +```html + + Failed Example 3 + + +Hi +``` + +#### Failed Example 4 + +This input, together with its [implicit label][] and its padding has a [clickable area][] whose height is below 41px. + +```html + +``` + +#### Failed Example 5 + +The `#small` button has a [clickable area][] of only 35×35px. The `#large` button has a [clickable area][] of 44×44px, but it does not achieve the same objective. + +```html + + + +``` + +#### Failed Example 6 + +This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the non-obscured part. + +```html + + Failed Example 6 + + + + + +
+
+
+``` + +#### Failed Example 7 + +This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. Even though the `div` is scrollable, it is not scrollable fully out of the way and always obscures the button. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the never obscured part. + +```html + + Failed Example 7 + + + + +
+
+
+
+ + +
+
+``` + +#### Failed Example 8 + +The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. + +```html + + +``` + +#### Failed Example 9 + +The [clickable area][] of this button does not contain a 44×44px [horizontal rectangle][]. + +```html + + +``` + +#### Failed Example 10 + +The [clickable area][] of this button only contains a 25×45px [horizontal rectangle][]. + +```html + + Failed Example + + + +
+ Hello +
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' From affaf9d7beb6307e465cb088d0cf1a465190ad7a Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 14:00:58 +0100 Subject: [PATCH 37/58] Add atomic rule for equivalent control --- .../target-size-equivalent-enhanced-yvb1xu.md | 156 ++++++++++++++++++ _rules/target-size-size-enhanced-8iacb5.md | 3 +- 2 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 _rules/target-size-equivalent-enhanced-yvb1xu.md diff --git a/_rules/target-size-equivalent-enhanced-yvb1xu.md b/_rules/target-size-equivalent-enhanced-yvb1xu.md new file mode 100644 index 0000000000..29c166143a --- /dev/null +++ b/_rules/target-size-equivalent-enhanced-yvb1xu.md @@ -0,0 +1,156 @@ +--- +id: yvb1xu +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have an equivalent control with a size of at least 44×44 pixels. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +For each test target, at least one of the following, there is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] is satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], consider targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) + +## Test Cases + +> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. + +> **Note:** Several examples illustrate overlapping and partially obscured content with fully transparent `div` (with a dashed red border), in order to still show the underlying target. This often results in very "artificial" examples where in real page the overlapping element would not be transparent and would actually hide the target. + +### Passed + +#### Passed Example 1 + +The `#small` button has a [clickable area][] of only 35×35px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). + +```html + + + +``` + +### Failed + +#### Failed Example 1 + +The `#small` button has a [clickable area][] of only 35×35px. The `#large` button has a [clickable area][] of 44×44px, but it does not achieve the same objective. + +```html + + + +``` + +#### Failed Example 2 + +This `button` does not have any [instrument][] to achieve the same objective. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md index f0308cfb0a..c471d06fe2 100644 --- a/_rules/target-size-size-enhanced-8iacb5.md +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -15,7 +15,6 @@ input_aspects: acknowledgments: authors: - Jean-Yves Moyen - test_assets: Map Image by Freepik --- ## Applicability @@ -36,7 +35,7 @@ Hit testing isn't properly defined, and this has been an [issue in the CSS speci ## Background -While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], apply targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. +While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], apply to targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. ### Bibliography From e26564bb8f7600dca52f4c0c0a5ad43986c5fdfe Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 14:45:03 +0100 Subject: [PATCH 38/58] Split essential size rule --- .../target-size-equivalent-enhanced-yvb1xu.md | 4 - _rules/target-size-essential-dppn1b.md | 160 ++++++++++++++++++ test-assets/target-size/zoom.png | Bin 0 -> 21192 bytes 3 files changed, 160 insertions(+), 4 deletions(-) create mode 100644 _rules/target-size-essential-dppn1b.md create mode 100644 test-assets/target-size/zoom.png diff --git a/_rules/target-size-equivalent-enhanced-yvb1xu.md b/_rules/target-size-equivalent-enhanced-yvb1xu.md index 29c166143a..42485700d6 100644 --- a/_rules/target-size-equivalent-enhanced-yvb1xu.md +++ b/_rules/target-size-equivalent-enhanced-yvb1xu.md @@ -43,10 +43,6 @@ While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], con ## Test Cases -> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. - -> **Note:** Several examples illustrate overlapping and partially obscured content with fully transparent `div` (with a dashed red border), in order to still show the underlying target. This often results in very "artificial" examples where in real page the overlapping element would not be transparent and would actually hide the target. - ### Passed #### Passed Example 1 diff --git a/_rules/target-size-essential-dppn1b.md b/_rules/target-size-essential-dppn1b.md new file mode 100644 index 0000000000..9f2f8b396a --- /dev/null +++ b/_rules/target-size-essential-dppn1b.md @@ -0,0 +1,160 @@ +--- +id: dppn1b +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have essential size. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + test_assets: Map Image by Freepik; Zoom icon created by Freepik - Flaticon +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +Each test target has [essential target size][]. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] and [Success Criterion 2.5.8 Target Size (minimum)][sc258] are satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +The pin (red square) on this map has [essential size][] because it is important to pinpoint the exact location. + +```html + + +Location of ACT rules headquarters: +
+ +``` + +### Failed + +#### Failed Example 1 + +The "Zoom in" image button in the top-right corner of this map does not have [essential size][]. + +```html + + +Location of ACT rules headquarters: +
+ +``` + +#### Failed Example 2 + +This `button` does not have [essential size][]. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[essential target size]: #essential-target-size ' Definition of Essential Target Size' +[focusable]: #focusable 'Definition of Focusable' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/test-assets/target-size/zoom.png b/test-assets/target-size/zoom.png new file mode 100644 index 0000000000000000000000000000000000000000..83565779e049c4993e8b855be11d4692f136751a GIT binary patch literal 21192 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 AeE Date: Thu, 7 Mar 2024 14:52:12 +0100 Subject: [PATCH 39/58] Split UA controlr exception --- _rules/target-size-ua-control-vcup8d.md | 135 ++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 _rules/target-size-ua-control-vcup8d.md diff --git a/_rules/target-size-ua-control-vcup8d.md b/_rules/target-size-ua-control-vcup8d.md new file mode 100644 index 0000000000..480bcda583 --- /dev/null +++ b/_rules/target-size-ua-control-vcup8d.md @@ -0,0 +1,135 @@ +--- +id: vcup8d +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have a size controlled by the user agent. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +Each test target is a [User Agent controlled component][]. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] and [Success Criterion 2.5.8 Target Size (minimum)][sc258] are satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This checkbox is an [User Agent controlled component][]. + +```html +

+ + I agree with the terms and conditions. +

+``` + +### Failed + +#### Failed Example 1 + +These radio buttons have their size modified by the author and are therefore not [User Agent controlled components][user agent controlled component]. Their [clickable area][] is too small. + +```html + +
+ Pick a color (required) + + +
+``` + +#### Failed Example 2 + +This `button` is not a [User Agent controlled component][]. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[focusable]: #focusable 'Definition of Focusable' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component' From 654dfa0489052a78c5eeee62f36fe8de19d81565 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 14:57:09 +0100 Subject: [PATCH 40/58] Split inline exception --- _rules/target-size-essential-dppn1b.md | 1 + _rules/target-size-inline-ssehdh.md | 120 ++++++++++++++++++++++++ _rules/target-size-ua-control-vcup8d.md | 1 + 3 files changed, 122 insertions(+) create mode 100644 _rules/target-size-inline-ssehdh.md diff --git a/_rules/target-size-essential-dppn1b.md b/_rules/target-size-essential-dppn1b.md index 9f2f8b396a..1568866c8e 100644 --- a/_rules/target-size-essential-dppn1b.md +++ b/_rules/target-size-essential-dppn1b.md @@ -39,6 +39,7 @@ Hit testing isn't properly defined, and this has been an [issue in the CSS speci ### Bibliography - [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) +- [Understanding Success Criterion 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) ## Test Cases diff --git a/_rules/target-size-inline-ssehdh.md b/_rules/target-size-inline-ssehdh.md new file mode 100644 index 0000000000..32701cdd76 --- /dev/null +++ b/_rules/target-size-inline-ssehdh.md @@ -0,0 +1,120 @@ +--- +id: ssehdh +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events are inline. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + test_assets: Map Image by Freepik +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +Each test target is [rendered on a line][]. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] and [Success Criterion 2.5.8 Target Size (minimum)][sc258] are satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) +- [Understanding Success Criterion 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +These links are [rendered on a line][]. + +```html +

+ The size of the target for + pointer inputs is at least 44 by 44 + CSS pixels. +

+``` + +### Failed + +#### Failed Example 1 + +This `button` is not [rendered on a line][]. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[focusable]: #focusable 'Definition of Focusable' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[rendered on a line]: #rendered-on-a-line 'Definition of Rendered on a Line' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-ua-control-vcup8d.md b/_rules/target-size-ua-control-vcup8d.md index 480bcda583..8ecad64aeb 100644 --- a/_rules/target-size-ua-control-vcup8d.md +++ b/_rules/target-size-ua-control-vcup8d.md @@ -38,6 +38,7 @@ Hit testing isn't properly defined, and this has been an [issue in the CSS speci ### Bibliography - [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) +- [Understanding Success Criterion 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) ## Test Cases From 5cf280fa80abb80dc3c40d5893fd87ebaaca6272 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 15:06:36 +0100 Subject: [PATCH 41/58] Split empty area rule --- _rules/target-size-empty-kj4tr0.md | 159 +++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 _rules/target-size-empty-kj4tr0.md diff --git a/_rules/target-size-empty-kj4tr0.md b/_rules/target-size-empty-kj4tr0.md new file mode 100644 index 0000000000..a70562d59f --- /dev/null +++ b/_rules/target-size-empty-kj4tr0.md @@ -0,0 +1,159 @@ +--- +id: kj4tr0 +name: +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have an actual size reduced to 0. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of some elements. Some of the failed examples may satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen + test_assets: Map Image by Freepik +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +Each test target has an empty [clickable area][], and its [clickable area][] cannot be made non-empty through scrolling. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] and [Success Criterion 2.5.8 Target Size (minimum)][sc258] are satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) +- [Understanding Success Criterion 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This button has an empty [clickable area][] because it is moved off-screen. + +```html + + +``` + +### Failed + +#### Failed Example 1 + +This `button` has a non-empty [clickable area][]. + +```html + + +``` + +#### Failed Example 2 + +This `button` has a [clickable area][] that can be made non-empty through vertical scrolling. + +```html + + +``` + +#### Failed Example 3 + +This `button` has a [clickable area][] that can be made non-empty through horizontal scrolling. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[focusable]: #focusable 'Definition of Focusable' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' From a17a20c33004d0ec9ae81a12d4c90321d20a4ec7 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 7 Mar 2024 15:34:54 +0100 Subject: [PATCH 42/58] Polish composite rule --- _rules/target-size-empty-kj4tr0.md | 2 +- _rules/target-size-enhanced-gi8qkf.md | 58 +++++++++++-------- .../target-size-equivalent-enhanced-yvb1xu.md | 2 +- _rules/target-size-essential-dppn1b.md | 4 +- _rules/target-size-inline-ssehdh.md | 2 +- _rules/target-size-size-enhanced-8iacb5.md | 2 +- _rules/target-size-ua-control-vcup8d.md | 2 +- 7 files changed, 41 insertions(+), 31 deletions(-) diff --git a/_rules/target-size-empty-kj4tr0.md b/_rules/target-size-empty-kj4tr0.md index a70562d59f..60378d4c15 100644 --- a/_rules/target-size-empty-kj4tr0.md +++ b/_rules/target-size-empty-kj4tr0.md @@ -1,6 +1,6 @@ --- id: kj4tr0 -name: +name: Interactive component has no clickable area rule_type: atomic description: | This rule checks that elements that can receive pointer events have an actual size reduced to 0. diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 85beb345f0..72b51d082e 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -1,7 +1,7 @@ --- id: gi8qkf -name: -rule_type: atomic +name: Interactive component has enhanced size +rule_type: composite description: | This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels, are inline, are user agent controlled, or have essential size. accessibility_requirements: @@ -12,9 +12,13 @@ accessibility_requirements: inapplicable: further testing needed wcag22:2.5.8: # Target Size (Minimum) (AA) secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.' -input_aspects: - - DOM Tree - - CSS Styling +input_rules: + - 8iacb5 + - dppn1b + - kj4tr0 + - ssehdh + - vcup8d + - yvb1xu acknowledgments: authors: - Jean-Yves Moyen @@ -27,14 +31,14 @@ This rule applies to any [HTML element][namespaced element] which [can be target ## Expectation -For each test target, at least one of the following is true: +For each test target, the [outcome](#outcome) of at least one of the following rules is passed: -- though scrolling, the element can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels; or -- the element has an empty [clickable area][], and its [clickable area][] cannot be made non-empty through scrolling; or -- the target is [rendered on a line][]; or -- the target is a [User Agent controlled component][]; or -- The size has [essential target size][]; or -- There is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. +- [Interactive component has strict enhanced size][target size enhanced]; or +- [Interactive component has no clickable area][target size empty]; or +- [Interactive component is inline][target size inline]; or +- [Interactive component has size controlled by User Agent][target size user agent]; or +- [Interactive component has essential size][target size essential]; or +- [Interactive component has equivalent control with enhanced size][target size equivalent enhanced]. ## Assumptions @@ -62,7 +66,7 @@ While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], app #### Passed Example 1 -This `link` has a [clickable area][] of approximately 210×55 pixels. +This `link` has a [clickable area][] of approximately 210×55 pixels and thus passes [Interactive component has strict enhanced size][target size enhanced]. ```html
- Hello + Hi
``` diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md index 5f1249f56e..c29f397afd 100644 --- a/_rules/target-size-size-enhanced-8iacb5.md +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -575,13 +575,13 @@ The [clickable area][] of this button only contains a 25×45px [horizontal recta height: 50px; width: 40px; text-align: center; - clip-path: polygon(10px 0px, 10px 45px, 35px 45px, 10px 0px); + clip-path: polygon(10px 0px, 10px 45px, 35px 45px, 35px 0px); background-color: #0074d9; }
- Hello + Hi
``` diff --git a/_rules/target-size-size-minimum-yb5y5l.md b/_rules/target-size-size-minimum-yb5y5l.md new file mode 100644 index 0000000000..7a8e8c76dd --- /dev/null +++ b/_rules/target-size-size-minimum-yb5y5l.md @@ -0,0 +1,627 @@ +--- +id: yb5y5l +name: Interactive component has strict minimum size +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have a size of at least 24×24 pixels. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion requires has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider exceptions of the criterion. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +For each test target the element can be brought into viewport though scrolling and have a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.8 Target Size (minimum)][sc258] is satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.8 Target Size (minimum)][sc258], apply to targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. + +### Bibliography + +- [Understanding Success Criterion 2.5.8: Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + +## Test Cases + +> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. + +> **Note:** Several examples illustrate overlapping and partially obscured content with fully transparent `div` (with a dashed red border), in order to still show the underlying target. This often results in very "artificial" examples where in real page the overlapping element would not be transparent and would actually hide the target. + +### Passed + +#### Passed Example 1 + +This `link` has a [clickable area][] of approximately 91×24 pixels. + +```html + +ACT rules +``` + +#### Passed Example 2 + +This button has a [clickable area][] of exactly 24×24 pixels. + +```html + + +``` + +#### Passed Example 3 + +This `input` element, combined with its [implicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×48px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 3 + + + + + +``` + +#### Passed Example 4 + +This `input` element, combined with its [explicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 50×44px. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 4 + + + + + + +``` + +#### Passed Example 5 + +This button has a clickable area of approximately 93×24px due to the overflowing text being clickable. The `div` element is only here to visually display the clickable area of the text. + +```html + + Passed Example 5 + + + + + + + + + +``` + +#### Passed Example 6 + +This button, together with its padding and border, has a [clickable area][] of more than 24×24px. The solid green border shows the [clickable area][] while the dashed red one shows the inner text (without sizing nor padding). + +```html + + Passed Example 6 + + + + + +
Hi
+ + +``` + +#### Passed Example 7 + +This button has a [clickable area][] containing a 44×44px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 24×24px rectangle delimited by prolonging the solid green lines. + +```html + + Passed Example 9 + + + + + +
+
+
+``` + +#### Passed Example 8 + +This button has a [clickable area][] of roughly 73×30px. The `div` element with a dashed red border does not obscure it because of its `pointer-events: none` CSS property that let the clicks go through. + +```html + + Passed Example 10 + + + + + +
+``` + +#### Passed Example 9 + +This button has a 30×30px [clickable area][]. The `div` with a dashed red border is not obscuring it because it can be scrolled out of the way. The solid green lines hint at a 24×24px area inside the button. + +```html + + Passed Example 12 + + + + +
+
+
+
+ + +
+
+``` + +#### Passed Example 10 + +The [clickable area][] of this button contains a 24×24px [horizontal rectangle][]. Note that the actual [border box][] has to be larger to account for the rounded corners. + +```html + + +``` + +#### Passed Example 11 + +This button has been clipped, leaving a [clickable area][] containing a 25×25px [horizontal rectangle][]. + +```html + + Failed Example + + + +
+ Hi +
+``` + +### Failed + +#### Failed Example 1 + +This `button` has a [clickable area][] of only 20×20 pixels. + +```html + + +``` + +#### Failed Example 2 + +This link only has a [clickable area][] of approximately 66×18 pixels, as shown by its border. + +```html + + Failed Example 2 + + + + + ACT rules + +``` + +#### Failed Example 3 + +This custom button has a [clickable area][] of approximately 18×20px, as shown by its dashed red border. + +```html + + Failed Example 3 + + +Hi +``` + +#### Failed Example 4 + +The `#small` button has a [clickable area][] of only 18×18px. The `#large` button has a [clickable area][] of 30×30px, but it does not achieve the same objective. + +```html + + + +``` + +#### Failed Example 5 + +This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. The solid green lines hint at how a 24×24px area would fit inside the button, but not inside the non-obscured part. + +```html + + Failed Example 6 + + + + + +
+
+
+``` + +#### Failed Example 6 + +This button only has a [clickable area][] of approximately 20×40px, because it is obscured by the `div` with a dashed red border. Even though the `div` is scrollable, it is not scrollable fully out of the way and always obscures the button. The solid green lines hint at how a 24×24px area would fit inside the button, but not inside the never obscured part. + +```html + + Failed Example 7 + + + + +
+
+
+
+ + +
+
+``` + +#### Failed Example 7 + +The [clickable area][] of this button does not contain a 24×24px [horizontal rectangle][]. + +```html + + +``` + +#### Failed Example 8 + +The [clickable area][] of this button does not contain a 24×24px [horizontal rectangle][]. + +```html + + +``` + +#### Failed Example 9 + +The [clickable area][] of this button only contains a 20×45px [horizontal rectangle][]. + +```html + + Failed Example + + + +
+ Hi +
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' From 505773aa7b4d855a533215ae19b228456801def4 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 10:51:24 +0100 Subject: [PATCH 44/58] Fix typo in date --- _rules/target-size-empty-kj4tr0.md | 2 +- _rules/target-size-enhanced-gi8qkf.md | 2 +- .../target-size-equivalent-enhanced-yvb1xu.md | 4 +- .../target-size-equivalent-minimum-8lzn42.md | 161 ++++++++++++++++++ _rules/target-size-essential-dppn1b.md | 2 +- _rules/target-size-inline-ssehdh.md | 2 +- _rules/target-size-size-enhanced-8iacb5.md | 2 +- _rules/target-size-size-minimum-yb5y5l.md | 2 +- _rules/target-size-ua-control-vcup8d.md | 2 +- 9 files changed, 170 insertions(+), 9 deletions(-) create mode 100644 _rules/target-size-equivalent-minimum-8lzn42.md diff --git a/_rules/target-size-empty-kj4tr0.md b/_rules/target-size-empty-kj4tr0.md index 60378d4c15..49295748b8 100644 --- a/_rules/target-size-empty-kj4tr0.md +++ b/_rules/target-size-empty-kj4tr0.md @@ -32,7 +32,7 @@ Each test target has an empty [clickable area][], and its [clickable area][] can ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index b3ca622842..284e6d76b9 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -46,7 +46,7 @@ For each test target, the [outcome](#outcome) of at least one of the following r ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-equivalent-enhanced-yvb1xu.md b/_rules/target-size-equivalent-enhanced-yvb1xu.md index d2ad4ac338..32964c6099 100644 --- a/_rules/target-size-equivalent-enhanced-yvb1xu.md +++ b/_rules/target-size-equivalent-enhanced-yvb1xu.md @@ -23,7 +23,7 @@ This rule applies to any [HTML element][namespaced element] which [can be target ## Expectation -For each test target, at least one of the following, there is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. +For each test target, there is an [instrument][] to achieve an equivalent goal on the same page, and through scrolling this [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 44 CSS pixels. ## Assumptions @@ -31,7 +31,7 @@ For each test target, at least one of the following, there is an [instrument][] ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md new file mode 100644 index 0000000000..cb2b5be7ec --- /dev/null +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -0,0 +1,161 @@ +--- +id: 8lzn42 +name: Interactive component has equivalent control with minimum size +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have an equivalent control with a size of at least 24×24 pixels. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **more strict** than this rule. This is because this criterion has a larger size requirement. Some of the passed examples do not this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +For each test target, there is an [instrument][] to achieve an equivalent goal on the same page, and +at least one of the following is true for this [instrument][]: + +- through scrolling, the [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels; or +- the [instrument][] has enough [spacing][]; or +- the [instrument][] is [rendered on a line][]; or +- the [instrument][] is a [User Agent controlled component][]; or +- the [instrument][] has [essential target size][]. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.8 Target Size (minimum)][sc258] is satisfied. + +- This rule assumes that the "equivalent" exception in [Success Criterion 2.5.8 Target Size (minimum)][sc258] is about equivalent control either with enough size or meeting any of the listed exception. If [Success Criterion 2.5.8 Target Size (minimum)][sc258] requires the equivalent control to have sufficient size, it is possible to pass this rule while failing the criterion. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.8 Target Size (minimum)][sc258], consider targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. + +### Bibliography + +- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) + +## Test Cases + +### Passed + +#### Passed Example 1 + +The `#small` button has a [clickable area][] of only 35×35px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). + +```html + + + +``` + +### Failed + +#### Failed Example 1 + +The `#small` button has a [clickable area][] of only 35×35px. The `#large` button has a [clickable area][] of 44×44px, but it does not achieve the same objective. + +```html + + + +``` + +#### Failed Example 2 + +This `button` does not have any [instrument][] to achieve the same objective. + +```html + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-essential-dppn1b.md b/_rules/target-size-essential-dppn1b.md index 2dad74c73d..51365d5ddf 100644 --- a/_rules/target-size-essential-dppn1b.md +++ b/_rules/target-size-essential-dppn1b.md @@ -32,7 +32,7 @@ Each test target has [essential target size][]. ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-inline-ssehdh.md b/_rules/target-size-inline-ssehdh.md index 462b1453c6..be62cd55ae 100644 --- a/_rules/target-size-inline-ssehdh.md +++ b/_rules/target-size-inline-ssehdh.md @@ -32,7 +32,7 @@ Each test target is [rendered on a line][]. ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md index c29f397afd..59f6f69bf3 100644 --- a/_rules/target-size-size-enhanced-8iacb5.md +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -31,7 +31,7 @@ For each test target the element can be brought into viewport though scrolling a ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-size-minimum-yb5y5l.md b/_rules/target-size-size-minimum-yb5y5l.md index 7a8e8c76dd..9c33c93844 100644 --- a/_rules/target-size-size-minimum-yb5y5l.md +++ b/_rules/target-size-size-minimum-yb5y5l.md @@ -31,7 +31,7 @@ For each test target the element can be brought into viewport though scrolling a ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background diff --git a/_rules/target-size-ua-control-vcup8d.md b/_rules/target-size-ua-control-vcup8d.md index 5682e3fcfb..197edca3cf 100644 --- a/_rules/target-size-ua-control-vcup8d.md +++ b/_rules/target-size-ua-control-vcup8d.md @@ -31,7 +31,7 @@ Each test target is a [User Agent controlled component][]. ## Accessibility Support -Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2023, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. ## Background From 18d55ac57f2a3e071133e7275f39243e72bf1e04 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 13:28:42 +0100 Subject: [PATCH 45/58] Improve examples --- .../target-size-equivalent-enhanced-yvb1xu.md | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/_rules/target-size-equivalent-enhanced-yvb1xu.md b/_rules/target-size-equivalent-enhanced-yvb1xu.md index 32964c6099..11bb21e2ca 100644 --- a/_rules/target-size-equivalent-enhanced-yvb1xu.md +++ b/_rules/target-size-equivalent-enhanced-yvb1xu.md @@ -43,11 +43,31 @@ While the rule, and [Success Criterion 2.5.5 Target Size (enhanced)][sc255], con ## Test Cases +> **Note:** In order for a page to pass this rule, all targets need a large enough equivalent [instrument][], including the targets that are large enough themselves. + ### Passed #### Passed Example 1 -The `#small` button has a [clickable area][] of only 35×35px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). +Both buttons have an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the other button). + +```html + + + +``` + +### Failed + +#### Failed Example 1 + +None of these buttons has an [instrument][] to achieve the same objective. ```html - + ``` -### Failed +#### Failed Example 2 -#### Failed Example 1 +Both buttons have an [instrument][] to achieve the same function, but not with a large enough [clickable area][]. -The `#small` button has a [clickable area][] of only 35×35px. The `#large` button has a [clickable area][] of 44×44px, but it does not achieve the same objective. +```html + + + +``` + +#### Failed Example 3 + +The `#small` button has an [instrument][] to achieve the same objective with a 44×44px [clickable area][] (namely, the `#large` button). The `#large` button doesn't. Note that this case satisfies [Success Criterion 2.5.5 Target Size (enhanced)][sc255] because the `#large` button is already large enough and doesn't require an equivalent [instrument][]. ```html - + ``` -#### Failed Example 2 +#### Failed Example 4 This `button` does not have any [instrument][] to achieve the same objective. From 1f256df8ac104196a0a2248cc917ca889a590967 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 15:16:20 +0100 Subject: [PATCH 46/58] Write minimum spacing rule --- _rules/target-size-spacing-minimum-rvh4wa.md | 240 +++++++++++++++++++ pages/glossary/spacing.md | 18 ++ test-assets/target-size/highlight-circle.js | 35 +++ 3 files changed, 293 insertions(+) create mode 100644 _rules/target-size-spacing-minimum-rvh4wa.md create mode 100644 pages/glossary/spacing.md create mode 100644 test-assets/target-size/highlight-circle.js diff --git a/_rules/target-size-spacing-minimum-rvh4wa.md b/_rules/target-size-spacing-minimum-rvh4wa.md new file mode 100644 index 0000000000..0dba63d403 --- /dev/null +++ b/_rules/target-size-spacing-minimum-rvh4wa.md @@ -0,0 +1,240 @@ +--- +id: rvh4wa +name: Interactive component has minimum spacing +rule_type: atomic +description: | + This rule checks that elements that can receive pointer events have a spacing of at least 24 pixels. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider exceptions of the criterion. Some of the failed examples may satisfy this success criterion.' +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +Each test target has a [clickable area][] with [spacing][] of at least 24px to the [clickable area][] of every other test target. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.8 Target Size (minimum)][sc258] is satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.8 Target Size (minimum)][sc258], apply to targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases. + +### Bibliography + +- [Understanding Success Criterion 2.5.8: Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + +## Test Cases + +> **Note:** All example draw a [spacing][] circle of 24px diameter below the target to visually show it. These circles are solid green for good cases, and dashed red for bad cases. + +> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. + +### Passed + +#### Passed Example 1 + +Both buttons have a [clickable area][] with [spacing][] of at least 24px to the other button's [clickable area][]. + +```html + + Failed Example + + + + + + + +``` + +#### Passed Example 2 + +Since there is only one test target, it doesn't require to be spaced from anything else and automatically passes this rule. + +```html + + Failed Example + + + + + + +``` + +### Failed + +#### Failed Example 1 + +None of these button has [spacing][] of at least 24px to the other. Both of the 24px diameter circles (dashed red) intersect the other button's [clickable area][]. + +```html + + Failed Example + + + + + +
+ + +``` + +#### Failed Example 2 + +None of these button has [spacing][] of at least 24px to the other. The two 24px diameter circles (dashed red) intersect each other. + +```html + + Failed Example + + + + + +
+ + +``` + +#### Failed Example 3 + +The second button has [spacing][] of less than 24px to the first button. The 24px diameter circle (dashed red) intersects the other button's [clickable area][]. The first button does have enough [spacing][]. + +```html + + Failed Example + + + + + +
+ + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + +
+``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[spacing]: #area-spacing 'Definition of Spacing' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/pages/glossary/spacing.md b/pages/glossary/spacing.md new file mode 100644 index 0000000000..fda21f004d --- /dev/null +++ b/pages/glossary/spacing.md @@ -0,0 +1,18 @@ +--- +title: Area Spacing +key: area-spacing +unambiguous: true +objective: false +input_aspects: +--- + +The _spacing_ from a set of coordinates A to another set B, is the largest distance _d_ (in that coordinate system) such that all the following are true for the circle of diameter _d_ centered at the center of A: + +- the circle contains no point of B; and +- either B contains an [horizontal rectangle][] with width and height at least _d_, or the circle does not intersect a similar circle of diameter \_d_centered at the center of B. + +Where the _center_ of a set of coordinate is the intersection of the diagonals of the smallest [horizontal rectangle][] that contains the set. + +> **Note:** the vocabulary used here refer to 2-dimensional coordinate systems but naturally expand to higher dimensions. + +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' diff --git a/test-assets/target-size/highlight-circle.js b/test-assets/target-size/highlight-circle.js new file mode 100644 index 0000000000..559921ee22 --- /dev/null +++ b/test-assets/target-size/highlight-circle.js @@ -0,0 +1,35 @@ +/** + * Create a circle element with class "highlight" centered at the center of + * the bounding box, with diameter 24px. + * The node needs to be non-static to allow for z-index lower than + * the highlighted element, otherwise the .highlight element will prevent + * click events to reach the node. + * + * An optional set of classes can also be added to the highlighted element, + * these are mostly intended to be either ['good'] (default) or ['bad'] to set + * the color and style of the highlighting border. + */ +function highlightCircle(node, classes = ['good']) { + // Get the bounding client rect of the node + const range = document.createRange() + range.setStart(node, 0) + // Take the length of text nodes, if it exists, otherwise (element), take + // all child nodes + range.setEnd(node, node?.length ?? node.childNodes.length) + const rect = range.getBoundingClientRect() + + console.dir(rect) + + // Create a 24 px div centered at that rect + // See https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects#javascript + const div = document.createElement('div') + div.classList.add('highlight', ...classes) + div.style.top = `${rect.top + rect.height / 2 - 12}px` + div.style.left = `${rect.left + rect.width / 2 - 12}px` + div.style.width = `${22}px` + div.style.height = `${22}px` + div.style.borderRadius = '50%' + document.body.appendChild(div) + + return div +} From 1a029228b2d79cf84a18ae80b730fa5869bd6eac Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 15:17:24 +0100 Subject: [PATCH 47/58] Typos --- pages/glossary/spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/glossary/spacing.md b/pages/glossary/spacing.md index fda21f004d..f3e4a3f1ee 100644 --- a/pages/glossary/spacing.md +++ b/pages/glossary/spacing.md @@ -9,7 +9,7 @@ input_aspects: The _spacing_ from a set of coordinates A to another set B, is the largest distance _d_ (in that coordinate system) such that all the following are true for the circle of diameter _d_ centered at the center of A: - the circle contains no point of B; and -- either B contains an [horizontal rectangle][] with width and height at least _d_, or the circle does not intersect a similar circle of diameter \_d_centered at the center of B. +- either B contains an [horizontal rectangle][] with width and height at least _d_, or the circle does not intersect a similar circle of diameter _d_ centered at the center of B. Where the _center_ of a set of coordinate is the intersection of the diagonals of the smallest [horizontal rectangle][] that contains the set. From 196e3ab7a3bf8182be6c4e5e60e8e3ac042ff458 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 15:28:47 +0100 Subject: [PATCH 48/58] Typo --- _rules/target-size-equivalent-minimum-8lzn42.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index cb2b5be7ec..b9d6c939d4 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -6,7 +6,7 @@ description: | This rule checks that elements that can receive pointer events have an equivalent control with a size of at least 24×24 pixels. accessibility_requirements: wcag21:2.5.5: # Target size (enhanced) (AAA) - secondary: 'This success criterion is **more strict** than this rule. This is because this criterion has a larger size requirement. Some of the passed examples do not this success criterion.' + secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' wcag22:2.5.8: # Target Size (Minimum) (AA) secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.' input_aspects: From 60124e661661955b326924f710447ef3f44f4767 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 15:31:38 +0100 Subject: [PATCH 49/58] Improve text --- _rules/target-size-size-minimum-yb5y5l.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_rules/target-size-size-minimum-yb5y5l.md b/_rules/target-size-size-minimum-yb5y5l.md index 9c33c93844..248f4cfdac 100644 --- a/_rules/target-size-size-minimum-yb5y5l.md +++ b/_rules/target-size-size-minimum-yb5y5l.md @@ -6,7 +6,7 @@ description: | This rule checks that elements that can receive pointer events have a size of at least 24×24 pixels. accessibility_requirements: wcag21:2.5.5: # Target size (enhanced) (AAA) - secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion requires has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' + secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' wcag22:2.5.8: # Target Size (Minimum) (AA) secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider exceptions of the criterion. Some of the failed examples may satisfy this success criterion.' input_aspects: @@ -23,7 +23,7 @@ This rule applies to any [HTML element][namespaced element] which [can be target ## Expectation -For each test target the element can be brought into viewport though scrolling and have a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels. +Each test target can be brought into viewport though scrolling and have a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels. ## Assumptions From 24922e5ce234f55097a80be9e8bc577def9bb560 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 8 Mar 2024 15:56:29 +0100 Subject: [PATCH 50/58] Start writing equivalent condition for 2.5.8 --- .../target-size-equivalent-minimum-8lzn42.md | 98 ++++++++++++------- 1 file changed, 62 insertions(+), 36 deletions(-) diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index b9d6c939d4..8ccf00e80c 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -3,7 +3,7 @@ id: 8lzn42 name: Interactive component has equivalent control with minimum size rule_type: atomic description: | - This rule checks that elements that can receive pointer events have an equivalent control with a size of at least 24×24 pixels. + This rule checks that elements that can receive pointer events have an equivalent control which have a size of at least 24×24 pixels, are inline, are user agent controlled, or have essential size. accessibility_requirements: wcag21:2.5.5: # Target size (enhanced) (AAA) secondary: 'This success criterion is **related** to this rule. This is because the rule does not consider exceptions of the criterion; at the same time the success criterion has a larger size requirements. Some of the failed examples may satisfy this success criterion; some of the passed examples do not satisfy it.' @@ -26,11 +26,11 @@ This rule applies to any [HTML element][namespaced element] which [can be target For each test target, there is an [instrument][] to achieve an equivalent goal on the same page, and at least one of the following is true for this [instrument][]: -- through scrolling, the [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels; or -- the [instrument][] has enough [spacing][]; or -- the [instrument][] is [rendered on a line][]; or -- the [instrument][] is a [User Agent controlled component][]; or -- the [instrument][] has [essential target size][]. +- size: through scrolling, the [instrument][] can be brought into viewport with a [clickable area][] containing an [horizontal rectangle][] with width and height of at least 24 CSS pixels; or +- spacing: the [instrument][] has a [clickable area][] with [spacing][] of at least 24px to the [clickable area][] of every other test target; or +- inline: the [instrument][] is [rendered on a line][]; or +- user agent: the [instrument][] is a [User Agent controlled component][]; or +- essential: the [instrument][] has [essential target size][]. ## Assumptions @@ -48,50 +48,50 @@ While the rule, and [Success Criterion 2.5.8 Target Size (minimum)][sc258], cons ### Bibliography -- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) +- [Understanding Success Criterion 2.5.8: Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) ## Test Cases +> **Note:** Due to the [spacing](#8lzn42:spacing) condition, all targets illustrating a Failed condition must also be too close from another button. Therefore, most Failed test cases contain `.placeholder` buttons whose only role is to ensure th [spacing](#8lzn42:spacing) condition is not met for the true targets. These `.placeholder` buttons pass the rule (by having another `.placeholder` button with sufficient size to pass the rule) since they are irrelevant to what the Example illustrates. Passed test cases contain similar button to ensure that they only pass for one reason. + ### Passed #### Passed Example 1 -The `#small` button has a [clickable area][] of only 35×35px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). +Both buttons have an [instrument][] to achieve the same function with a 24×24px [clickable area][] (namely, the other button). ```html - - + + ``` ### Failed #### Failed Example 1 -The `#small` button has a [clickable area][] of only 35×35px. The `#large` button has a [clickable area][] of 44×44px, but it does not achieve the same objective. +None of these buttons has an [instrument][] to achieve the same objective. ```html @@ -100,31 +100,57 @@ The `#small` button has a [clickable area][] of only 35×35px. The `#large` butt #### Failed Example 2 -This `button` does not have any [instrument][] to achieve the same objective. +Both buttons have an [instrument][] to achieve the same function, but not with a large enough [clickable area][]. ```html - + + ``` -### Inapplicable +#### Failed Example 3 -#### Inapplicable Example 1 +The `#small` button has an [instrument][] to achieve the same objective with a 44×44px [clickable area][] (namely, the `#large` button). The `#large` button doesn't. -These `input` elements and `button` are `disabled` and therefore not [focusable][]. +```html + + + +``` + +#### Failed Example 4 + +This `button` does not have any [instrument][] to achieve the same objective. ```html -
-
-
- -
+ + ``` #### Inapplicable Example 2 From 22d102baa5dacac97659f82d1e63c4b147684bbd Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Sun, 17 Mar 2024 10:07:24 -0500 Subject: [PATCH 51/58] Rename style file --- _rules/target-size-empty-kj4tr0.md | 2 +- _rules/target-size-enhanced-gi8qkf.md | 28 ++--- .../target-size-equivalent-enhanced-yvb1xu.md | 2 +- .../target-size-equivalent-minimum-8lzn42.md | 108 ++++++++++++++++-- _rules/target-size-essential-dppn1b.md | 2 +- _rules/target-size-inline-ssehdh.md | 2 +- _rules/target-size-size-enhanced-8iacb5.md | 28 ++--- _rules/target-size-size-minimum-yb5y5l.md | 28 ++--- _rules/target-size-spacing-minimum-rvh4wa.md | 12 +- _rules/target-size-ua-control-vcup8d.md | 2 +- pages/glossary/spacing.md | 6 +- .../{highlight.css => shared-styles.css} | 7 ++ 12 files changed, 161 insertions(+), 66 deletions(-) rename test-assets/target-size/{highlight.css => shared-styles.css} (61%) diff --git a/_rules/target-size-empty-kj4tr0.md b/_rules/target-size-empty-kj4tr0.md index 49295748b8..45aca8c7e1 100644 --- a/_rules/target-size-empty-kj4tr0.md +++ b/_rules/target-size-empty-kj4tr0.md @@ -134,7 +134,7 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov ```html Inapplicable Example - + + + + +``` + +#### Passed Example 3 + +The first link has an equivalent [instrument][] that satisfies the [essential condition][] (namely, the second link). The second link has an equivalent [instrument][] that satisfies the [inline condition][] (namely, the first link). + +```html + + +Find the ACT rules headquarters on the map below: +
+ + + +``` + +#### Passed Example 4 + +```html + I agree with the following terms and conditions. +

Terms and conditions: We reserve the right to delete your account without notice.

+ I agree with the previous terms and conditions. +``` + ### Failed #### Failed Example 1 @@ -160,7 +242,7 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov ```html Inapplicable Example - + - + + -
+
+ ``` [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 63cb024544..331930d224 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -102,13 +102,15 @@ This `input` element, combined with its [implicit label][] and its padding, has - - + + + + ``` #### Passed Example 4 @@ -121,11 +123,13 @@ This `input` element, combined with its [explicit label][] and its padding, has - - - + + + + + ``` #### Passed Example 5 @@ -295,13 +299,15 @@ This button has a [clickable area][] containing a 44×44px rectangle. Even thoug } - + + -
-
-
+
+
+
+ ``` #### Passed Example 12 @@ -321,11 +327,13 @@ This button has a [clickable area][] of roughly 73×50px. The `div` element with } - + + -
+
+ ``` #### Passed Example 13 @@ -377,17 +385,18 @@ This button has a 50×50px [clickable area][]. The `div` with a dashed red borde } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Passed Example 14 @@ -423,9 +432,11 @@ This button has been clipped, leaving a [clickable area][] containing a 45×45px } -
- Hello -
+ +
+ Hello +
+ ``` ### Failed @@ -473,7 +484,9 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown Failed Example 3 -Hi + + Hi + ``` #### Failed Example 4 @@ -547,13 +560,15 @@ This button only has a [clickable area][] of approximately 20×45px, because it } - + + -
-
-
+
+
+
+ ``` #### Failed Example 7 @@ -605,17 +620,18 @@ This button only has a [clickable area][] of approximately 20×45px, because it } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Failed Example 8 @@ -685,9 +701,11 @@ The [clickable area][] of this button only contains a 25×45px [horizontal recta } -
- Hi -
+ +
+ Hi +
+ ``` ### Inapplicable @@ -720,11 +738,13 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-equivalent-enhanced-yvb1xu.md b/_rules/target-size-equivalent-enhanced-yvb1xu.md index 3b5416458e..b8e5f9a1c8 100644 --- a/_rules/target-size-equivalent-enhanced-yvb1xu.md +++ b/_rules/target-size-equivalent-enhanced-yvb1xu.md @@ -168,11 +168,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index a07f74ae9c..611785fd65 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -86,21 +86,23 @@ Both buttons have an [instrument][] to achieve the same function satisfying the - - - - + + + + + + ``` #### Passed Example 3 @@ -108,43 +110,42 @@ Both buttons have an [instrument][] to achieve the same function satisfying the The first link has an equivalent [instrument][] that satisfies the [essential condition][] (namely, the second link). The second link has an equivalent [instrument][] that satisfies the [inline condition][] (namely, the first link). ```html - - -Find the ACT rules headquarters on the map below: -
- - - + + Passed Example 3 + + + + + Find the ACT rules headquarters on the map below: +
+ + + + ``` #### Passed Example 4 @@ -251,11 +252,13 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-essential-dppn1b.md b/_rules/target-size-essential-dppn1b.md index 1d98f663aa..cf8ef89818 100644 --- a/_rules/target-size-essential-dppn1b.md +++ b/_rules/target-size-essential-dppn1b.md @@ -144,11 +144,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-inline-ssehdh.md b/_rules/target-size-inline-ssehdh.md index ffd6072182..03bd27830a 100644 --- a/_rules/target-size-inline-ssehdh.md +++ b/_rules/target-size-inline-ssehdh.md @@ -104,11 +104,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md index 38d71784d6..0d9f2ae6ba 100644 --- a/_rules/target-size-size-enhanced-8iacb5.md +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -87,13 +87,15 @@ This `input` element, combined with its [implicit label][] and its padding, has - - + + + + ``` #### Passed Example 4 @@ -106,11 +108,13 @@ This `input` element, combined with its [explicit label][] and its padding, has - - - + + + + + ``` #### Passed Example 5 @@ -208,13 +212,15 @@ This button has a [clickable area][] containing a 44×44px rectangle. Even thoug } - + + -
-
-
+
+
+
+ ``` #### Passed Example 8 @@ -234,11 +240,13 @@ This button has a [clickable area][] of roughly 73×50px. The `div` element with } - + + -
+
+ ``` #### Passed Example 9 @@ -290,17 +298,18 @@ This button has a 50×50px [clickable area][]. The `div` with a dashed red borde } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Passed Example 10 @@ -336,9 +345,11 @@ This button has been clipped, leaving a [clickable area][] containing a 45×45px } -
- Hello -
+ +
+ Hello +
+ ``` ### Failed @@ -386,7 +397,9 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown Failed Example 3 -Hi + + Hi + ``` #### Failed Example 4 @@ -460,13 +473,15 @@ This button only has a [clickable area][] of approximately 20×45px, because it } - + + -
-
-
+
+
+
+ ``` #### Failed Example 7 @@ -518,17 +533,18 @@ This button only has a [clickable area][] of approximately 20×45px, because it } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Failed Example 8 @@ -580,9 +596,11 @@ The [clickable area][] of this button only contains a 25×45px [horizontal recta } -
- Hi -
+ +
+ Hi +
+ ``` ### Inapplicable @@ -615,11 +633,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-size-minimum-yb5y5l.md b/_rules/target-size-size-minimum-yb5y5l.md index f0c1a61f3b..cb8e8ba479 100644 --- a/_rules/target-size-size-minimum-yb5y5l.md +++ b/_rules/target-size-size-minimum-yb5y5l.md @@ -87,13 +87,15 @@ This `input` element, combined with its [implicit label][] and its padding, has - - + + + + ``` #### Passed Example 4 @@ -106,11 +108,13 @@ This `input` element, combined with its [explicit label][] and its padding, has - - - + + + + + ``` #### Passed Example 5 @@ -208,13 +212,15 @@ This button has a [clickable area][] containing a 44×44px rectangle. Even thoug } - + + -
-
-
+
+
+
+ ``` #### Passed Example 8 @@ -234,11 +240,13 @@ This button has a [clickable area][] of roughly 73×30px. The `div` element with } - + + -
+
+ ``` #### Passed Example 9 @@ -290,17 +298,18 @@ This button has a 30×30px [clickable area][]. The `div` with a dashed red borde } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Passed Example 10 @@ -336,9 +345,11 @@ This button has been clipped, leaving a [clickable area][] containing a 25×25px } -
- Hi -
+ +
+ Hi +
+ ``` ### Failed @@ -387,7 +398,9 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown Failed Example 3 -Hi + + Hi + ``` #### Failed Example 4 @@ -452,13 +465,15 @@ This button only has a [clickable area][] of approximately 20×45px, because it } - + + -
-
-
+
+
+
+ ``` #### Failed Example 6 @@ -510,17 +525,18 @@ This button only has a [clickable area][] of approximately 20×40px, because it } + +
+
+
+
-
-
-
-
- - -
-
+ +
+
+ ``` #### Failed Example 7 @@ -573,9 +589,11 @@ The [clickable area][] of this button only contains a 20×45px [horizontal recta } -
- Hi -
+ +
+ Hi +
+ ``` ### Inapplicable @@ -608,11 +626,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-spacing-minimum-rvh4wa.md b/_rules/target-size-spacing-minimum-rvh4wa.md index 4664c503fa..39e868defb 100644 --- a/_rules/target-size-spacing-minimum-rvh4wa.md +++ b/_rules/target-size-spacing-minimum-rvh4wa.md @@ -65,16 +65,18 @@ Both buttons have a [clickable area][] with [spacing][] of at least 24px to the } - - - + + + + + ``` #### Passed Example 2 @@ -93,12 +95,14 @@ Since there is only one test target, it doesn't require to be spaced from anythi } - - + + + + ``` ### Failed @@ -119,17 +123,19 @@ None of these button has [spacing][] of at least 24px to the other. Both of the } - -
- - + + +
+ + + ``` #### Failed Example 2 @@ -148,17 +154,19 @@ None of these button has [spacing][] of at least 24px to the other. The two 24px } - -
- - + + +
+ + + ``` #### Failed Example 3 @@ -177,17 +185,19 @@ The second button has [spacing][] of less than 24px to the first button. The 24p } - -
- - + + +
+ + + ``` ### Inapplicable @@ -220,11 +230,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' diff --git a/_rules/target-size-ua-control-vcup8d.md b/_rules/target-size-ua-control-vcup8d.md index 097608bb71..d1dcb2c9a5 100644 --- a/_rules/target-size-ua-control-vcup8d.md +++ b/_rules/target-size-ua-control-vcup8d.md @@ -120,11 +120,11 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov } - + + -
+
+ ``` [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' From 9db02746a0c805c8e840282740442695c1bdbd6a Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Sun, 17 Mar 2024 10:49:30 -0500 Subject: [PATCH 53/58] Finish examples --- .../target-size-equivalent-minimum-8lzn42.md | 126 +++++++++++++----- 1 file changed, 96 insertions(+), 30 deletions(-) diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index 611785fd65..b715c0e2c8 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -151,9 +151,26 @@ The first link has an equivalent [instrument][] that satisfies the [essential co #### Passed Example 4 ```html - I agree with the following terms and conditions. -

Terms and conditions: We reserve the right to delete your account without notice.

- I agree with the previous terms and conditions. + + Passed Example 4 + + +
+ I agree with the following terms and conditions. +

Terms and conditions: We reserve the right to delete your account without notice.

+ I agree with the previous terms and conditions. +
+ + + ``` ### Failed @@ -183,19 +200,43 @@ None of these buttons has an [instrument][] to achieve the same objective. #### Failed Example 2 -Both buttons have an [instrument][] to achieve the same function, but not with a large enough [clickable area][]. +Both `.target` buttons have an [instrument][] to achieve the same function, but not satisfying any of the conditions. ```html - - - + + Passed Example 4 + + + + + + +
+ + + + + + + ``` #### Failed Example 3 @@ -203,21 +244,44 @@ Both buttons have an [instrument][] to achieve the same function, but not with a The `#small` button has an [instrument][] to achieve the same objective with a 44×44px [clickable area][] (namely, the `#large` button). The `#large` button doesn't. ```html - - - + + Passed Example 4 + + + + + + +
+ + + + + + + ``` #### Failed Example 4 @@ -236,7 +300,9 @@ This `button` does not have any [instrument][] to achieve the same objective. ``` -#### Inapplicable Example 2 +### Inapplicable Examples + +#### Inapplicable Example 1 This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. From 43d244e67f0a23e6114736be0dd5eaadf6537358 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Sun, 17 Mar 2024 10:57:46 -0500 Subject: [PATCH 54/58] Add spelling exceptions --- __tests__/spelling-ignore.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index ca21f5e567..f28e12003d 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -10,6 +10,7 @@ - https - wai-aria - validator +- 8lzn42 # Tag(s) - svg # `aria-query` dom tags does not list `svg` @@ -88,6 +89,7 @@ - rfc - webauthn - customizable +- ua #lowercase needed in reference list # spell checker checks against strict casing & hence some repeated words here - Autocomplete @@ -135,7 +137,7 @@ - ozplayer - GitHub -# Test case anamolies +# Test case anomalies - brewitt-taylor - level2-frame1 - level1-frame2 @@ -242,7 +244,7 @@ - focusability - unitless - luminance -- checkboxes # this seems tè be the correct plural +- checkboxes # this seems to be the correct plural # Parts of Unicode - 000A From 35cc34cccd93e5f8d0b4c4a0cbb4f72519d28085 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Sun, 17 Mar 2024 11:02:39 -0500 Subject: [PATCH 55/58] Clean up reference list --- _rules/target-size-equivalent-minimum-8lzn42.md | 14 ++++++++++++++ _rules/target-size-spacing-minimum-rvh4wa.md | 2 -- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index b715c0e2c8..42246e3ddd 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -150,6 +150,8 @@ The first link has an equivalent [instrument][] that satisfies the [essential co #### Passed Example 4 +Both checkboxes have an [instrument][] to achieve the same function satisfying the [user agent condition][] (namely, the other checkbox). + ```html Passed Example 4 @@ -304,6 +306,18 @@ This `button` does not have any [instrument][] to achieve the same objective. #### Inapplicable Example 1 +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. ```html diff --git a/_rules/target-size-spacing-minimum-rvh4wa.md b/_rules/target-size-spacing-minimum-rvh4wa.md index 39e868defb..3a73c6141a 100644 --- a/_rules/target-size-spacing-minimum-rvh4wa.md +++ b/_rules/target-size-spacing-minimum-rvh4wa.md @@ -240,10 +240,8 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' [can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' [clickable area]: #clickable-area 'Definition of Clickable Area' -[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' [focusable]: #focusable 'Definition of Focusable' [horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' -[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' [sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' [spacing]: #area-spacing 'Definition of Spacing' From adbbebbdbe62aa22376557c4c0e1af8e7422cd18 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Sun, 17 Mar 2024 11:06:58 -0500 Subject: [PATCH 56/58] Typos --- _rules/target-size-equivalent-minimum-8lzn42.md | 2 +- _rules/target-size-spacing-minimum-rvh4wa.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index 42246e3ddd..34992851cf 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -302,7 +302,7 @@ This `button` does not have any [instrument][] to achieve the same objective. ``` -### Inapplicable Examples +### Inapplicable #### Inapplicable Example 1 diff --git a/_rules/target-size-spacing-minimum-rvh4wa.md b/_rules/target-size-spacing-minimum-rvh4wa.md index 3a73c6141a..f592516acf 100644 --- a/_rules/target-size-spacing-minimum-rvh4wa.md +++ b/_rules/target-size-spacing-minimum-rvh4wa.md @@ -244,5 +244,5 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov [horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' [sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' -[spacing]: #area-spacing 'Definition of Spacing' +[spacing]: #spacing 'Definition of Spacing' [targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' From 656a93f62222d8f5ba7501663a7d2362aa49004e Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Wed, 3 Apr 2024 13:55:46 +0200 Subject: [PATCH 57/58] Add final rule and examples --- _rules/target-size-enhanced-gi8qkf.md | 6 +- .../target-size-equivalent-minimum-8lzn42.md | 36 +- _rules/target-size-minimum-5awcwe.md | 1083 +++++++++++++++++ _rules/target-size-size-enhanced-8iacb5.md | 2 +- _rules/target-size-size-minimum-yb5y5l.md | 28 +- _rules/target-size-spacing-minimum-rvh4wa.md | 12 +- _rules/target-size-ua-control-vcup8d.md | 4 +- 7 files changed, 1129 insertions(+), 42 deletions(-) create mode 100644 _rules/target-size-minimum-5awcwe.md diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 331930d224..3794e12100 100755 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -485,7 +485,7 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown - Hi + Hi ``` @@ -761,9 +761,9 @@ This button cannot be [targeted by a pointer event][] because it is entirely cov [sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' [target size enhanced]: https://www.w3.org/WAI/standards-guidelines/act/rules/8iacb5/ 'Rule Interactive component has strict enhanced size' [target size empty]: https://www.w3.org/WAI/standards-guidelines/act/rules/kj4tr0/ 'Rule Interactive component has no clickable area' +[target size equivalent enhanced]: https://www.w3.org/WAI/standards-guidelines/act/rules/yvb1xu/ 'Rule Interactive component has equivalent control with enhanced size' +[target size essential]: https://www.w3.org/WAI/standards-guidelines/act/rules/dppn1b/ 'Rule Interactive component has essential size' [target size inline]: https://www.w3.org/WAI/standards-guidelines/act/rules/ssehdh/ 'Rule Interactive component is inline' [target size user agent]: https://www.w3.org/WAI/standards-guidelines/act/rules/vcup8d/ 'Rule Interactive component has size controlled by User Agent' -[target size essential]: https://www.w3.org/WAI/standards-guidelines/act/rules/dppn1b/ 'Rule Interactive component has essential size' -[target size equivalent enhanced]: https://www.w3.org/WAI/standards-guidelines/act/rules/yvb1xu/ 'Rule Interactive component has equivalent control with enhanced size' [targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' [user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component' diff --git a/_rules/target-size-equivalent-minimum-8lzn42.md b/_rules/target-size-equivalent-minimum-8lzn42.md index 34992851cf..a68e531a9b 100644 --- a/_rules/target-size-equivalent-minimum-8lzn42.md +++ b/_rules/target-size-equivalent-minimum-8lzn42.md @@ -53,7 +53,7 @@ When the equivalent [instrument][] satisfies the [size condition][] and has a [c ## Test Cases -> **Note:** Several test cases have `.placeholder` buttons whose only role is to ensure the [spacing condition][] is not met for the true targets. These `.placeholder` buttons pass the rule (by having another `.placeholder` button with sufficient size to pass the rule). These `.placeholder` buttons are irrelevant to the examples and never mentioned in the descriptions. +> **Note:** Several test cases have `.placeholder` buttons whose only role is to ensure that the [spacing condition][] is not met for the true targets. These `.placeholder` buttons pass the rule (by having another `.placeholder` button with sufficient size to pass the rule). These `.placeholder` buttons are irrelevant to the examples and never mentioned in the descriptions. > **Note:** Several test cases show the circle relevant for the [spacing condition][]. These circles are solid green when the [spacing condition][] is satisfied, and dashed red when it is not. The circles are not part of the actual test cases, and are only shown to help understand the [spacing condition][]. @@ -157,22 +157,24 @@ Both checkboxes have an [instrument][] to achieve the same function satisfying t Passed Example 4 -
- I agree with the following terms and conditions. -

Terms and conditions: We reserve the right to delete your account without notice.

- I agree with the previous terms and conditions. -
- - - + +
+ I agree with the following terms and conditions. +

Terms and conditions: We reserve the right to delete your account without notice.

+ I agree with the previous terms and conditions. +
+ + + + ``` ### Failed diff --git a/_rules/target-size-minimum-5awcwe.md b/_rules/target-size-minimum-5awcwe.md new file mode 100644 index 0000000000..4d92214894 --- /dev/null +++ b/_rules/target-size-minimum-5awcwe.md @@ -0,0 +1,1083 @@ +--- +id: 5awcwe +name: Interactive component has minimum size +rule_type: composite +description: | + This rule checks that elements that can receive pointer events have a size of at least 24×24 pixels, have enough spacing, are inline, are user agent controlled, or have essential size. +accessibility_requirements: + wcag21:2.5.5: # Target size (enhanced) (AAA) + secondary: 'This success criterion is **more strict** than this rule. This is because this criterion has a larger size requirement. Some of the passed examples do not satisfy this success criterion.' + wcag22:2.5.8: # Target Size (Minimum) (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_rules: + - 8lzn42 + - dppn1b + - kj4tr0 + - rvh4wa + - ssehdh + - vcup8d + - yb5y5l +acknowledgments: + authors: + - Jean-Yves Moyen + test_assets: Map Image by Freepik +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][]. + +## Expectation + +For each test target, the [outcome](#outcome) of at least one of the following rules is passed: + +- [Interactive component has strict minimum size][target size minimum]; or +- [Interactive component has no clickable area][target size empty]; or +- [Interactive component has minimum spacing][target size spacing]; or +- [Interactive component is inline][target size inline]; or +- [Interactive component has size controlled by User Agent][target size user agent]; or +- [Interactive component has essential size][target size essential]; or +- [Interactive component has equivalent control with minimum size][target size equivalent minimum]. + +## Assumptions + +- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] is satisfied. + +## Accessibility Support + +Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area]. + +## Background + +While the rule, and [Success Criterion 2.5.8 Target Size (minimum)][sc258], apply to targets of any shape, the test cases mostly focus on targets whose [clickable area][] is itself an [horizontal rectangle][]. This acknowledges the fact that the [border box][] of an element can easily be queried by automated tools (e.g., through the `getBoundingClientRect` function), and therefore it is expected that most automated tools will perform better on such elements. For elements with "weird" clickable shape, including `area` elements, nested targets, or elements that have been rotated or clipped, the actual [clickable area][] is much harder to determine and may be much smaller than the [border box][]. These elements could fail the rule while their [border box][] contain a large enough [horizontal rectangle][]. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a [border box][] which is too small. + +When the target passes [Interactive component has strict minimum size][target size minimum] and has a [clickable area][] which is nearly an [horizontal rectangle][], it also passes [Interactive component has minimum spacing][target size spacing] (because any 24px square contains a 24px diameter circle). However, when their shape is greatly different, notable concave, [Interactive component has minimum spacing][target size spacing] forces the center of the circle, possibly not in the center of the square, and thus may fail. Since test cases are mostly restricted to [clickable areas][clickable area] that are [horizontal rectangles][horizontal rectangle], Passed test cases that satisfy the [Interactive component has strict minimum size][target size minimum] are also expected to satisfy the [Interactive component has minimum spacing][target size spacing]. + +### Bibliography + +- [Understanding Success Criterion 2.5.8: Target Size (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) + +## Test Cases + +> **Note:** Several examples draw borders around some of the elements or texts. This is purely for aesthetic purpose and to clearly show the [clickable areas][clickable area] that are not obvious. These borders are solid green when showing good cases, or relevant areas; and dashed red when showing bad cases, or irrelevant areas. + +> **Note:** Several examples illustrate overlapping and partially obscured content with fully transparent `div` (with a dashed red border), in order to still show the underlying target. This often results in very "artificial" examples where in real page the overlapping element would not be transparent and would actually hide the target. + +> **Note:** Several test cases have `.placeholder` buttons whose only role is to ensure that [Interactive component has minimum spacing][target size spacing] fails for the true targets. These `.placeholder` buttons pass [Interactive component has strict minimum size][target size minimum]. These `.placeholder` buttons are irrelevant to the examples and never mentioned in the descriptions. + +> **Note:** Several test cases show the circle relevant for [Interactive component has minimum spacing][target size spacing]. These circles are solid green when that rule passes, and dashed red when it fails. The circles are not part of the actual test cases, and are only shown to help understand spacing. + +### Passed + +#### Passed Example 1 + +This `link` has a [clickable area][] of approximately 91×24 pixels and thus passes [Interactive component has strict minimum size][target size minimum]. + +```html + +ACT rules +``` + +#### Passed Example 2 + +This button has a [clickable area][] of exactly 24×24 pixels and thus passes [Interactive component has strict minimum size][target size minimum]. + +```html + + +``` + +#### Passed Example 3 + +This `input` element, combined with its [implicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 81×48px and thus passes [Interactive component has strict minimum size][target size minimum]. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 3 + + + + + + + +``` + +#### Passed Example 4 + +This `input` element, combined with its [explicit label][] and its padding, has a [clickable area][] containing a rectangle of approximately 50×44px and thus passes [Interactive component has strict minimum size][target size minimum]. Note that this rectangle has to intersect both the `input` element itself, and the text of the label (within the solid green border), as none of the individual components are enough. + +```html + + Passed Example 4 + + + + + + + + +``` + +#### Passed Example 5 + +This button has a clickable area of approximately 93×24px due to the overflowing text being clickable, and thus passes [Interactive component has strict minimum size][target size minimum]. The `div` element is only here to visually display the clickable area of the text. + +```html + + Passed Example 5 + + + + + + + + + +``` + +#### Passed Example 6 + +This button, together with its padding and border, has a [clickable area][] of more than 24×24px and thus passes [Interactive component has strict minimum size][target size minimum]. The solid green border shows the [clickable area][] while the dashed red one shows the inner text (without sizing nor padding). + +```html + + Passed Example 6 + + + + + +
Hi
+ + +``` + +#### Passed Example 7 + +Both buttons have a [clickable area][] with [spacing][] of at least 24px to the other button's [clickable area][] and thus pass [Interactive component has minimum spacing][target size spacing]. + +```html + + Passed Example 7 + + + + + + + + + +``` + +#### Passed Example 8 + +Since there is only one test target, it doesn't require to be spaced from anything else and automatically passes [Interactive component has minimum spacing][target size spacing]. + +```html + + Passed Example 8 + + + + + + + + +``` + +#### Passed Example 9 + +These links are [rendered on a line][] and thus pass [Interactive component is inline][target size inline]. + +```html +

+ The size of the target for + pointer inputs is at least 44 by 44 + CSS pixels. +

+``` + +#### Passed Example 10 + +This checkbox is an [User Agent controlled component][] and thus passes [Interactive component has size controlled by User Agent][target size user agent]. + +```html + + Passed Example 10 + + + + +

+ + I agree with the terms and conditions. +

+ + + +``` + +#### Passed Example 11 + +The pin (red square) on this map has [essential size][] because it is important to pinpoint the exact location. Thus it passes [Interactive component has essential size][target size essential]. + +```html + + Passed Example 11 + + + + + Location of ACT rules headquarters: +
+ + + + +``` + +#### Passed Example 12 + +The `#small` button has a [clickable area][] of only 20×20px, but there is an [instrument][] to achieve the same function with a 44×44px [clickable area][] (namely, the `#large` button). Thus, the `#small` button passes [Interactive component has equivalent control with minimum size][target size equivalent minimum]. + +```html + + Passed Example 12 + + + + + + + + + +``` + +#### Passed Example 13 + +Both buttons have a [clickable area][] of only 20×20px. The `#spaced` one passes [Interactive component has minimum spacing][target size spacing]. Since it is an [instrument][] to achieve the same function as the `#cramped` button, the `#cramped` button passes [Interactive component has equivalent control with minimum size][target size equivalent minimum]. + +```html + + Passed Example 13 + + + + + + + + + + + + +``` + +#### Passed Example 14 + +Both links pass [Interactive component has equivalent control with minimum size][target size equivalent minimum]. + +```html + + Passed Example 14 + + + + + Find the ACT rules headquarters on the map below: +
+ + + + +``` + +#### Passed Example 15 + +The checkbox passes [Interactive component has size controlled by User Agent][target size user agent]. Since it is an [instrument][] to achieve the same function is the link, the link passes [Interactive component has equivalent control with minimum size][target size equivalent minimum]. + +```html + + Passed Example 15 + + + + +
+ I agree with the following terms and conditions.
+

Terms and conditions: We reserve the right to delete your account without notice.

+ I agree with the previous terms and conditions. +
+ + + + +``` + +#### Passed Example 16 + +This button has a [clickable area][] containing a 24×24px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 24×24px rectangle delimited by prolonging the solid green lines. Thus, it passes [Interactive component has strict minimum size][target size minimum]. + +```html + + Passed Example 16 + + + + + + +
+
+
+ +``` + +#### Passed Example 17 + +This button has a [clickable area][] of roughly 73×50px. The `div` element with a dashed red border does not obscure it because of its `pointer-events: none` CSS property that let the clicks go through. Thus, it passes [Interactive component has strict minimum size][target size minimum]. + +```html + + Passed Example 17 + + + + + + +
+ +``` + +#### Passed Example 18 + +This button has a 30×30px [clickable area][]. The `div` with a dashed red border is not obscuring it because it can be scrolled out of the way. The solid green lines hint at a 24×24px area inside the button.Thus, it passes [Interactive component has strict minimum size][target size minimum]. + +```html + + Passed Example 18 + + + + +
+
+
+
+ + +
+
+ +``` + +#### Passed Example 19 + +The [clickable area][] of this button contains a 24×24px [horizontal rectangle][]. Thus, it passes [Interactive component has strict minimum size][target size minimum]. Note that the actual [border box][] has to be much larger to account for the rounded corners. + +```html + + +``` + +#### Passed Example 20 + +This button has been clipped, leaving a [clickable area][] containing a 45×45px [horizontal rectangle][]. Thus, it passes [Interactive component has strict minimum size][target size minimum]. + +```html + + Passed Example 20 + + + + +
+ Hi +
+ +``` + +### Failed (TODO, add .placeholder to avoid spacing.) + +#### Failed Example 1 + +This `button` has a [clickable area][] of only 20×20 pixels. + +```html + + Failed Example 1 + + + + + + + + + + +``` + +#### Failed Example 2 + +This link only has a [clickable area][] of approximately 66×18 pixels, as shown by its border. + +```html + + Failed Example 2 + + + + + + ACT rules + + + + +``` + +#### Failed Example 3 + +This custom button has a [clickable area][] of approximately 18×20px, as shown by its dashed red border. + +```html + + Failed Example 3 + + + + + Hi + + + + +``` + +#### Failed Example 4 + +The `#small` button has a [clickable area][] of only 18×18px. The `#large` button has a [clickable area][] of 30×30px, but it does not achieve the same objective. + +```html + + Failed Example 4 + + + + + + + + + + + +``` + +#### Failed Example 5 + +This button only has a [clickable area][] smaller than 24×24px, because it is obscured by the `div` with a dashed red border. The solid green lines hint at how a 24×24px area would fit inside the button, but not inside the non-obscured part. + +```html + + Failed Example 5 + + + + + + +
+
+
+ + +``` + +#### Failed Example 6 + +This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. Even though the `div` is scrollable, it is not scrollable fully out of the way and always obscures the button. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the never obscured part. + +```html + + Failed Example 6 + + + + +
+
+
+
+ + +
+
+ + +``` + +#### Failed Example 7 + +These radio buttons have their size modified by the author and are therefore not [User Agent controlled components][user agent controlled component]. Their [clickable area][] is too small. + +```html + + Failed Example 7 + + + + +
+ Pick a color (required) +
+ +
+ +``` + +#### Failed Example 8 + +The [clickable area][] of this button does not contain a 24×24px [horizontal rectangle][]. + +```html + + Failed Example 8 + + + + + + + + + + +``` + +#### Failed Example 9 + +The [clickable area][] of this button does not contain a 24×24px [horizontal rectangle][]. + +```html + + Failed Example 9 + + + + + + + + + + +``` + +#### Failed Example 10 + +The [clickable area][] of this button only contains a 20×20px [horizontal rectangle][]. + +```html + + Failed Example 10 + + + + + +
+ Hi +
+ + + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +These `input` elements and `button` are `disabled` and therefore not [focusable][]. + +```html +
+
+
+ +
+``` + +#### Inapplicable Example 2 + +This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border. + +```html + + Inapplicable Example + + + + + + +
+ +``` + +[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' +[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[clickable area]: #clickable-area 'Definition of Clickable Area' +[essential size]: #essential-target-size 'Definition of Essential Target Size' +[explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' +[focusable]: #focusable 'Definition of Focusable' +[horizontal rectangle]: #horizontal-rectangle 'Definition of Horizontal Rectangle' +[implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' +[instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[rendered on a line]: #rendered-on-a-line 'Definition of Rendered on a Line' +[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)' +[target size minimum]: https://www.w3.org/WAI/standards-guidelines/act/rules/yb5y5l/ 'Rule Interactive component has strict minimum size' +[target size empty]: https://www.w3.org/WAI/standards-guidelines/act/rules/kj4tr0/ 'Rule Interactive component has no clickable area' +[target size equivalent minimum]: https://www.w3.org/WAI/standards-guidelines/act/rules/8lzn42/ 'Rule Interactive component has equivalent control with minimum size' +[target size essential]: https://www.w3.org/WAI/standards-guidelines/act/rules/dppn1b/ 'Rule Interactive component has essential size' +[target size inline]: https://www.w3.org/WAI/standards-guidelines/act/rules/ssehdh/ 'Rule Interactive component is inline' +[target size spacing]: https://www.w3.org/WAI/standards-guidelines/act/rules/rvh4wa/ 'Rule Interactive component has minimum spacing' +[target size user agent]: https://www.w3.org/WAI/standards-guidelines/act/rules/vcup8d/ 'Rule Interactive component has size controlled by User Agent' +[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component' diff --git a/_rules/target-size-size-enhanced-8iacb5.md b/_rules/target-size-size-enhanced-8iacb5.md index 0d9f2ae6ba..44575a5235 100644 --- a/_rules/target-size-size-enhanced-8iacb5.md +++ b/_rules/target-size-size-enhanced-8iacb5.md @@ -398,7 +398,7 @@ This custom button has a [clickable area][] of approximately 18×20px, as shown - Hi + Hi ``` diff --git a/_rules/target-size-size-minimum-yb5y5l.md b/_rules/target-size-size-minimum-yb5y5l.md index cb8e8ba479..f3f39d4f9e 100644 --- a/_rules/target-size-size-minimum-yb5y5l.md +++ b/_rules/target-size-size-minimum-yb5y5l.md @@ -175,11 +175,11 @@ This button, together with its padding and border, has a [clickable area][] of m #### Passed Example 7 -This button has a [clickable area][] containing a 44×44px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 24×24px rectangle delimited by prolonging the solid green lines. +This button has a [clickable area][] containing a 24×24px rectangle. Even though it is partially obscured by the dashed red `div`, its remaining [clickable area][] contains a 24×24px rectangle delimited by prolonging the solid green lines. ```html - Passed Example 9 + Passed Example 7 @@ -573,15 +575,15 @@ The [clickable area][] of this button does not contain a 24×24px [horizontal re #### Failed Example 9 -The [clickable area][] of this button only contains a 20×45px [horizontal rectangle][]. +The [clickable area][] of this button only contains a 20×20px [horizontal rectangle][]. ```html - Failed Example + Failed Example 9
From a0b6a07078e446eb5bf03590718f2bcc87daf727 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Wed, 3 Apr 2024 14:04:34 +0200 Subject: [PATCH 58/58] Typo --- _rules/target-size-minimum-5awcwe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/target-size-minimum-5awcwe.md b/_rules/target-size-minimum-5awcwe.md index 4d92214894..2192fa6351 100644 --- a/_rules/target-size-minimum-5awcwe.md +++ b/_rules/target-size-minimum-5awcwe.md @@ -646,7 +646,7 @@ This button has been clipped, leaving a [clickable area][] containing a 45×45px ``` -### Failed (TODO, add .placeholder to avoid spacing.) +### Failed #### Failed Example 1