diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md index 44fa26843f7..8ec35f0d042 100755 --- a/_rules/image-non-empty-accessible-name-23a2a8.md +++ b/_rules/image-non-empty-accessible-name-23a2a8.md @@ -243,6 +243,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 325258590c5..09f3b067e4d 100755 --- a/_rules/role-attribute-valid-value-674b10.md +++ b/_rules/role-attribute-valid-value-674b10.md @@ -170,12 +170,28 @@ This `role` attribute is only [ASCII whitespace][]. #### Inapplicable Example 5 -This `role` attribute is specified on an element which is [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 + +``` + [ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'Definition of ASCII whitespace' [html or svg element]: #namespaced-element [implicit role]: #implicit-role 'Definition of Implicit Role' diff --git a/pages/glossary/programmatically-hidden.md b/pages/glossary/programmatically-hidden.md index 118460c74fb..73fe62d5964 100755 --- a/pages/glossary/programmatically-hidden.md +++ b/pages/glossary/programmatically-hidden.md @@ -8,15 +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 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 element has 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][] are considered in the [flat tree][] for this definition. -**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. +#### 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 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' [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'