From e1850c8d0db5cc98cc0197e0f66906ee367f8532 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 4 Aug 2022 13:56:34 +0200 Subject: [PATCH 1/6] Handle content-visibility and hidden=until-found --- pages/glossary/programmatically-hidden.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pages/glossary/programmatically-hidden.md b/pages/glossary/programmatically-hidden.md index 118460c74fb..8cc380b1547 100755 --- a/pages/glossary/programmatically-hidden.md +++ b/pages/glossary/programmatically-hidden.md @@ -11,11 +11,12 @@ input_aspects: An HTML element is _programmatically hidden_ if either it has a [computed][] CSS property `visibility` whose value is not `visible`; or at least one of the following is true for any of its [inclusive ancestors][] in the [flat tree][]: - has a [computed][] CSS property `display` of `none`; or +- has a [computed][] CSS property `content-visibility` of `hidden`; or - has an `aria-hidden` attribute set to `true` **Note**: Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. -**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements) setting the CSS `display` property to `none` for elements with the `hidden` attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` property can reveal elements with the `hidden` attribute. +**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. [computed]: https://www.w3.org/TR/css-cascade/#computed-value 'CSS definition of computed value' [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' From 4175046cc4702463f8e4e1b5bf22437a083495b3 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 4 Aug 2022 14:15:22 +0200 Subject: [PATCH 2/6] Add examples to rules that use programmatically hidden --- _rules/image-non-empty-accessible-name-23a2a8.md | 10 ++++++++++ _rules/role-attribute-valid-value-674b10.md | 7 ++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md index e49107aa2e0..0518c5b784b 100755 --- a/_rules/image-non-empty-accessible-name-23a2a8.md +++ b/_rules/image-non-empty-accessible-name-23a2a8.md @@ -246,6 +246,16 @@ This `img` element is hidden with `visibility: hidden`. ``` +#### Inapplicable Example 6 + +This `img` element is [programmatically hidden][] with `content-visibility: hidden`. + +```html +
+ +
+``` + [accessible name]: #accessible-name 'Definition of accessible name' [explicit role]: #explicit-role 'Definition of explicit role' [focusable]: #focusable 'Definition of focusable' diff --git a/_rules/role-attribute-valid-value-674b10.md b/_rules/role-attribute-valid-value-674b10.md index 95a2fab056e..3eb306c2f73 100755 --- a/_rules/role-attribute-valid-value-674b10.md +++ b/_rules/role-attribute-valid-value-674b10.md @@ -170,10 +170,15 @@ This `role` attribute is only [ASCII whitespace][]. #### Inapplicable Example 5 -This `role` attribute is specified on an element which is [programmatically hidden][]. +These `role` attributes are specified on elements which are [programmatically hidden][]. ```html + + +
Some Content
+
Some Content
+
Some Content
``` [ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'Definition of ASCII whitespace' From 262192a08bab8099f4c05642ede8617bebfbaf76 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 5 Aug 2022 13:26:16 +0200 Subject: [PATCH 3/6] Apply suggestion from code review Co-authored-by: Carlos Duarte --- pages/glossary/programmatically-hidden.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/glossary/programmatically-hidden.md b/pages/glossary/programmatically-hidden.md index 8cc380b1547..1217158ea6d 100755 --- a/pages/glossary/programmatically-hidden.md +++ b/pages/glossary/programmatically-hidden.md @@ -16,7 +16,7 @@ An HTML element is _programmatically hidden_ if either it has a [computed][] CSS **Note**: Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. -**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. +**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute set to the `hidden` state; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. [computed]: https://www.w3.org/TR/css-cascade/#computed-value 'CSS definition of computed value' [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' From d88140e8daec2dacbd4c94732d7e97e3f3043a48 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 15 Sep 2022 16:17:29 +0200 Subject: [PATCH 4/6] Split example --- _rules/role-attribute-valid-value-674b10.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/_rules/role-attribute-valid-value-674b10.md b/_rules/role-attribute-valid-value-674b10.md index 3eb306c2f73..7e512e90b80 100755 --- a/_rules/role-attribute-valid-value-674b10.md +++ b/_rules/role-attribute-valid-value-674b10.md @@ -170,15 +170,26 @@ This `role` attribute is only [ASCII whitespace][]. #### Inapplicable Example 5 -These `role` attributes are specified on elements which are [programmatically hidden][]. +This `role` attributes is specified on an element which is [programmatically hidden][]. ```html +``` + +#### Inapplicable Example 6 + +This `role` attributes is specified on an element which is [programmatically hidden][]. + +```html +``` + +#### Inapplicable Example 7 + +This `role` attributes is specified on an element which is [programmatically hidden][]. + +```html -
Some Content
-
Some Content
-
Some Content
``` [ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'Definition of ASCII whitespace' From 12e54454e8329ec07bd04d2f8b607827b72f32c3 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 15 Sep 2022 17:05:30 +0200 Subject: [PATCH 5/6] Fix content-visibility usage, add assumption for auto case --- pages/glossary/programmatically-hidden.md | 25 +++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/pages/glossary/programmatically-hidden.md b/pages/glossary/programmatically-hidden.md index 1217158ea6d..6af6976d000 100755 --- a/pages/glossary/programmatically-hidden.md +++ b/pages/glossary/programmatically-hidden.md @@ -8,16 +8,29 @@ input_aspects: - DOM tree --- -An HTML element is _programmatically hidden_ if either it has a [computed][] CSS property `visibility` whose value is not `visible`; or at least one of the following is true for any of its [inclusive ancestors][] in the [flat tree][]: +An HTML element is _programmatically hidden_ if any of the following is true: -- has a [computed][] CSS property `display` of `none`; or -- has a [computed][] CSS property `content-visibility` of `hidden`; or -- has an `aria-hidden` attribute set to `true` +- the element has a [computed][] CSS property `visibility` whose value is not `visible`; or +- at least one [ancestor][] of the element has a [computed][] CSS property `content-visibility` of `hidden`; or +- at least one [inclusive ancestors][] of the element has a [computed][] CSS property `display` of `none`; or +- at least one [inclusive ancestors][] of the elementhas an `aria-hidden` attribute set to `true` -**Note**: Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. +[Ancestors][ancestor] and [inclusive ancestors][inclusive ancestor] are considered in the [flat tree][] for this definition. -**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute set to the `hidden` state; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. +#### Assumptions +This definition assumes that `content-visibility: auto` is treated the same way as `content-visibility: visible` for accessibility purposes (notably for inclusion in the accessibility tree). + +#### Background + +Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. + +The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute set to the `hidden` state; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. + +Using `content-visibility: auto` is meant to allow the user agent to delay styling and painting the content until it is needed, thus saving an CPU usage (for example, when showing a very long list of items such as a newsfeed). However, the content must still be considered for search in page, tab order, … which make it needed. This mostly implies that the content must also be exposed to assistive technologies as normal. But in turn, if the content is only styled and laid out for assistive technologies, it means that the rendering time depends whether the user uses some; which open a "time attack" channel for malicious authors to detect user with disabilities… For this reason the draft specification has a caveat about [accessibility implications][] allowing the user agent to **not** expose such content in some case. The assumption states that the definition should not be used when such a case triggers. + +[accessibility implications]: https://w3c.github.io/csswg-drafts/css-contain-2/#cv-a11y +[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM Definition of Ancestor' [computed]: https://www.w3.org/TR/css-cascade/#computed-value 'CSS definition of computed value' [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' [inclusive ancestors]: https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor 'DOM Definition of Inclusive Ancestor' From 65d769fbc7e019a70c168df7f641fc2196d13628 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 16 Sep 2022 09:02:03 +0200 Subject: [PATCH 6/6] Fix references and spelling --- pages/glossary/programmatically-hidden.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/glossary/programmatically-hidden.md b/pages/glossary/programmatically-hidden.md index 6af6976d000..73fe62d5964 100755 --- a/pages/glossary/programmatically-hidden.md +++ b/pages/glossary/programmatically-hidden.md @@ -13,9 +13,9 @@ An HTML element is _programmatically hidden_ if any of the following is true: - the element has a [computed][] CSS property `visibility` whose value is not `visible`; or - at least one [ancestor][] of the element has a [computed][] CSS property `content-visibility` of `hidden`; or - at least one [inclusive ancestors][] of the element has a [computed][] CSS property `display` of `none`; or -- at least one [inclusive ancestors][] of the elementhas an `aria-hidden` attribute set to `true` +- at least one [inclusive ancestors][] of the element has an `aria-hidden` attribute set to `true` -[Ancestors][ancestor] and [inclusive ancestors][inclusive ancestor] are considered in the [flat tree][] for this definition. +[Ancestors][ancestor] and [inclusive ancestors][] are considered in the [flat tree][] for this definition. #### Assumptions @@ -27,7 +27,7 @@ Contrary to the other conditions, the `visibility` CSS property may be reverted The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute set to the `hidden` state; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. -Using `content-visibility: auto` is meant to allow the user agent to delay styling and painting the content until it is needed, thus saving an CPU usage (for example, when showing a very long list of items such as a newsfeed). However, the content must still be considered for search in page, tab order, … which make it needed. This mostly implies that the content must also be exposed to assistive technologies as normal. But in turn, if the content is only styled and laid out for assistive technologies, it means that the rendering time depends whether the user uses some; which open a "time attack" channel for malicious authors to detect user with disabilities… For this reason the draft specification has a caveat about [accessibility implications][] allowing the user agent to **not** expose such content in some case. The assumption states that the definition should not be used when such a case triggers. +Using `content-visibility: auto` is meant to allow the user agent to delay styling and painting the content until it is needed, thus saving an CPU usage (for example, when showing a very long list of items such as a news feed). However, the content must still be considered for search in page, tab order, … which make it needed. This mostly implies that the content must also be exposed to assistive technologies as normal. But in turn, if the content is only styled and laid out for assistive technologies, it means that the rendering time depends whether the user uses some; which open a "time attack" channel for malicious authors to detect user with disabilities… For this reason the draft specification has a caveat about [accessibility implications][] allowing the user agent to **not** expose such content in some case. The assumption states that the definition should not be used when such a case triggers. [accessibility implications]: https://w3c.github.io/csswg-drafts/css-contain-2/#cv-a11y [ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM Definition of Ancestor'