Skip to content

Handle content-visibility and hidden="until-found" #1903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions _rules/image-non-empty-accessible-name-23a2a8.md
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,16 @@ This `img` element is hidden with `visibility: hidden`.
</div>
```

#### Inapplicable Example 6

This `img` element is [programmatically hidden][] with `content-visibility: hidden`.

```html
<div style="content-visibility: hidden">
<img src="/test-assets/shared/w3c-logo.png" />
</div>
Comment on lines +251 to +253
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Until this is better supported I don't think we should add this. This example fails in Firefox and Safari. I think its better to use hidden=until-found here. If you wanted to pass in Chromium you'd still need to support content-visibility, but the example wouldn't be a failure in browsers that don't support it yet. What's also neat specifically about using it in this rule is that there's nothing to be found here, so this couldn't become a visible image through some user action.

Suggested change
<div style="content-visibility: hidden">
<img src="/test-assets/shared/w3c-logo.png" />
</div>
<div hidden="until-found">
<img src="/test-assets/shared/w3c-logo.png" />
</div>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hidden="until-fonud" also seems to have poor support: MDN browser compatibility.
I guess it's best to just park this until there is better support…

```

[accessible name]: #accessible-name 'Definition of accessible name'
[explicit role]: #explicit-role 'Definition of explicit role'
[focusable]: #focusable 'Definition of focusable'
Expand Down
18 changes: 17 additions & 1 deletion _rules/role-attribute-valid-value-674b10.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div aria-hidden="true" role="banner">Some Content</div>
```

#### Inapplicable Example 6

This `role` attributes is specified on an element which is [programmatically hidden][].

```html
<div hidden role="banner">Some Content</div>
```

#### Inapplicable Example 7

This `role` attributes is specified on an element which is [programmatically hidden][].

```html
<div hidden="until-found" role="banner">Some Content</div>
```
Comment on lines +179 to +193
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd prefer these test cases in different rules. This rule is has been somewhat contested. How about adding the hidden example to Form field has non-empty accessible name, and have the image rule above use hidden="until-found"?


[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'
Expand Down
24 changes: 19 additions & 5 deletions pages/glossary/programmatically-hidden.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not new to the PR, we could open a separate issue, but this is incorrect I think. If you use aria-owns to grab a node that has an ancestor with aria-hidden, that node itself isn't hidden.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's also the conclusion that was reach in this ARIA PR.

I'm recording that in #1991 .


**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'