From 1f3a63a43b5005f33d2e26c24d41529f4dc2cbb2 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 8 Sep 2022 11:41:40 +0200 Subject: [PATCH 01/35] 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 00000000000..6e334b7ac36 --- /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/35] 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 6e334b7ac36..b6ad9c634c5 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/35] 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 b6ad9c634c5..97b2e78315a 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 00000000000..1200b2633ee --- /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 00000000000..819373bc4fc --- /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/35] 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 97b2e78315a..549d02eb4f6 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/35] 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 549d02eb4f6..166e3dd0001 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 819373bc4fc..93b1acc503d 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/35] 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 1200b2633ee..f26949b3798 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 93b1acc503d..e35448f09a5 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 6db0f22c5c1..7b3938d7dc5 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 e5e873f6773..e3759eb1dd7 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 00000000000..04df5a59dbd --- /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/35] 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 7571516b51f..80af1e07326 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 7b3938d7dc5..4a5a8c0168c 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 a96de1735bf..97d8c649a31 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 00000000000..49eaa865048 --- /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 00000000000..06255958dbe --- /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 00000000000..1228f22d051 --- /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 e3759eb1dd7..00000000000 --- 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 04df5a59dbd..dcd9e9f968d 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/35] 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 8521a34d588..153f8a8ea35 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 dcd9e9f968d..1cadad0a1e6 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/35] 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 153f8a8ea35..7766cc18933 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/35] 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 5f4a4489db5..4f93566512e 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/