Skip to content
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.

Sign up for GitHub

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

Jump to bottom

"Heading is descriptive" (b49b2e): replace "section of content" #1425

Merged
merged 17 commits into from
Sep 23, 2020
Merged

"Heading is descriptive" (b49b2e): replace "section of content" #1425

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7546844
Precise what should be described
Jym77 Aug 20, 2020
965c110
Fix examples headings
Jym77 Aug 20, 2020
ac86576
Do not consider decorative content
Jym77 Aug 20, 2020
f6ea4a2
Update example descriptions
Jym77 Aug 24, 2020
bb06801
Remove unused definition
Jym77 Aug 24, 2020
3d2ae78
Typo
Jym77 Aug 24, 2020
a2557aa
Merge branch 'develop' into heading-descriptive-fix
Jym77 Aug 24, 2020
2c61ed9
Cleanup
Jym77 Aug 24, 2020
0e8eb45
Merge branch 'develop' into heading-descriptive-fix
Jym77 Aug 25, 2020
99bca10
Merge branch 'develop' into heading-descriptive-fix
Jym77 Sep 3, 2020
56cec2e
Split expectation in two
Jym77 Sep 3, 2020
4eda744
Merge branch 'develop' into heading-descriptive-fix
Jym77 Sep 8, 2020
37658c1
Improve description
Jym77 Sep 16, 2020
089f4ba
Improve description
Jym77 Sep 16, 2020
952fdb5
Merge branch 'develop' into heading-descriptive-fix
Jym77 Sep 16, 2020
b30f95b
Improve description
Jym77 Sep 16, 2020
c7efb8a
Merge branch 'develop' into heading-descriptive-fix
Jym77 Sep 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
61 changes: 47 additions & 14 deletions _rules/heading-descriptive-b49b2e.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ acknowledgments:
- Carlos Duarte
- Dagfinn Rømen
- Geir Sindre Fossøy
- Jean-Yves Moyen
---

## Applicability
Expand All @@ -30,13 +31,18 @@ This rule applies to any element with the [semantic role][] of heading that is e

## Expectation

Each target element describes the topic or purpose of its [section of the content][].
Each target element describes the topic or purpose of the first non-[decorative][] [palpable content][] which is:
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

- after the target, in tree order in the [flat tree][]; and
- [visible][], if the target is [visible][]; and
- [included in the accessibility tree][], if the target is [included in the accessibility tree][].
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This strongly suggest that this rule should be split in two, one for each case…

Copy link
Collaborator

@EmmaJP EmmaJP Aug 26, 2020 •
edited

Choose a reason for hiding this comment

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

Not if those 'and' conditional are intentional. I read this as:

If the target is visible and included in the accessibility tree, then it should describe the first palpable content that is visible and included in the accessibility tree that comes after the target in the flat tree.

However, what about non-visible headings describing visible content, where both are included in the accessibility tree? This is not an unusual use case, eg. a news front page with a hidden heading 'Top headlines'. The heading isn't needed visually as that is usually apparent from other cues.

That also makes me question the phrasing of the applicability. Should it not be ' visible and/or included in the accessibility tree'?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

If it is both visible and included in the accessibility tree, then it is "visible or included in the accessibility tree" (the or is inclusive by default). And then it matches both the expectations and need to describe both visible and accessible content (which may be the same or different palpable content).

Jym77 marked this conversation as resolved.
Show resolved Hide resolved

**Note:** Headings do not need to be lengthy. A word, or even a single character, may suffice.

## Assumptions

This rule assumes that the language of each test target can be correctly determined (either programmatically or by analyzing the content), and sufficiently understood.
- This rule assumes that the language of each test target can be correctly determined (either programmatically or by analyzing the content), and sufficiently understood.
- This rule assumes that the [flat tree][] order is close to the reading order, as elements are rendered on the page. Due to positioning, it is possible to render a document in a order that greatly differ from the tree order, in which case the content which is visually associated with a heading might not be the content following it in tree order and this rule might fail while [Success Criterion 2.4.6 Headings and Label][sc246] is still satisfied.
Copy link
Contributor

Choose a reason for hiding this comment

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

Isn't the rule essentially assuming conformance to 1.3.2 (https://www.w3.org/TR/WCAG/#meaningful-sequence)? In that case, it seems like an even more reasonable assumption to make.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not really, because the programmatically determined order could be different from the DOM order (and match the visual order). For example by tweaking the accessibility tree with aria-owns.

Copy link
Contributor

Choose a reason for hiding this comment

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

Makes sense 👍 I also just looked into CSS Grid and, interestingly enough, grid layouts that re-arrange the logical order of content are non-conforming: https://drafts.csswg.org/css-grid/#order-accessibility

Copy link
Collaborator

Choose a reason for hiding this comment

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

Not to mention the fun that can ensue when flexbox gets involved!


## Accessibility Support

Expand All @@ -56,7 +62,7 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b

#### Passed Example 1

Heading marked up with `h1` element that describes the topic or purpose of its [section of the content][].
Heading marked up with `h1` element that describes the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -67,7 +73,7 @@ Heading marked up with `h1` element that describes the topic or purpose of its [

#### Passed Example 2

Heading marked up with `role="heading"` that describes the topic or purpose of its [section of the content][].
Heading marked up with `role="heading"` that describes the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -78,7 +84,7 @@ Heading marked up with `role="heading"` that describes the topic or purpose of i

#### Passed Example 3

Heading marked up with `role="heading"` that describes the topic or purpose of its [section of the content][], with a default aria-level assigned.
Heading marked up with `role="heading"` that describes the topic or purpose of the following [palpable content][], with a default aria-level assigned.

```html
<html lang="en">
Expand All @@ -89,7 +95,7 @@ Heading marked up with `role="heading"` that describes the topic or purpose of i

#### Passed Example 4

Heading marked up with `h1` element with an image that describes the topic or purpose of its [section of the content][].
Heading marked up with `h1` element with an image that describes the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -102,7 +108,7 @@ Heading marked up with `h1` element with an image that describes the topic or pu

#### Passed Example 5

Heading marked up with `h1` element that is a single character that describes the topic or purpose of its [section of the content][].
Heading marked up with `h1` element that is a single character that describes the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -122,7 +128,7 @@ Heading marked up with `h1` element that is a single character that describes th

#### Passed Example 6

Heading marked up with `role="heading"` that describes the topic or purpose of its [section of the content][]. The heading is positioned off screen and is [included in the accessibility tree][].
Heading marked up with `role="heading"` that describes the topic or purpose of the following [palpable content][]. The heading is positioned off screen and is [included in the accessibility tree][].

```html
<html lang="en">
Expand All @@ -135,7 +141,7 @@ Heading marked up with `role="heading"` that describes the topic or purpose of i

#### Passed Example 7

Heading marked up with `h1` element that describes the topic or purpose of its [section of the content][]. The heading is [visible][], but is not [included in the accessibility tree][].
Heading marked up with `h1` element that describes the topic or purpose of the following [palpable content][]. The heading is [visible][], but is not [included in the accessibility tree][].

```html
<html lang="en">
Expand All @@ -144,11 +150,23 @@ Heading marked up with `h1` element that describes the topic or purpose of its [
</html>
```

#### Passed Example 8

This heading describes the first [palpable content][] after it. The next one (the second `p` element) is not considered by this rule.
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<html lang="en">
<h1>Opening Hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>
<p>We are open Saturday from 10 to 13</p>
</html>
```

### Failed

#### Failed Example 1

Heading marked up with `h1` element that does not describe the topic or purpose of its [section of the content][].
Heading marked up with `h1` element that does not describe the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -159,7 +177,7 @@ Heading marked up with `h1` element that does not describe the topic or purpose

#### Failed Example 2

Heading marked up with `role="heading"` that does not describe the topic or purpose of its [section of the content][].
Heading marked up with `role="heading"` that does not describe the topic or purpose of the following [palpable content][].

```html
<html lang="en">
Expand All @@ -170,7 +188,7 @@ Heading marked up with `role="heading"` that does not describe the topic or purp

#### Failed Example 3

Heading marked up with `role="heading"` that does not describe the topic or purpose of its [section of the content][]. The heading is positioned off screen and is [included in the accessibility tree][].
Heading marked up with `role="heading"` that does not describe the topic or purpose of the following [palpable content][]. The heading is positioned off screen and is [included in the accessibility tree][].

```html
<html lang="en">
Expand All @@ -183,7 +201,7 @@ Heading marked up with `role="heading"` that does not describe the topic or purp

#### Failed Example 4

Heading marked up with `h1` element that does not describe the topic or purpose of its [section of the content][]. The heading is [visible][], but is not [included in the accessibility tree][].
Heading marked up with `h1` element that does not describe the topic or purpose of the following [palpable content][]. The heading is [visible][], but is not [included in the accessibility tree][].

```html
<html lang="en">
Expand All @@ -192,6 +210,18 @@ Heading marked up with `h1` element that does not describe the topic or purpose
</html>
```

#### Failed Example 5

This heading does not describe the first [palpable content][] after it. The next one (the second `p` element) is not considered by this rule.
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<html lang="en">
<h1>Weather</h1>
<p>We are open Monday through Friday from 10 to 16</p>
<p>It is going to rain tomorrow</p>
</html>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down Expand Up @@ -235,8 +265,11 @@ Empty heading marked up with `role="heading"` is not [visible][].
</html>
```

[decorative]: https://www.w3.org/TR/WCAG21/#dfn-pure-decoration 'WCAG definition of Pure decoration'
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
[palpable content]: https://html.spec.whatwg.org/multipage/dom.html#palpable-content 'HTML definition of Palpable Content'
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
[section of the content]: #section-of-content 'Definition of section of content'
[sc246]: https://www.w3.org/TR/WCAG21/#headings-and-labels 'Success Criterion 2.4.6 Headings and Labels'
[semantic role]: #semantic-role 'Definition of semantic role'
[visible]: #visible 'Definition of visible'
15 changes: 0 additions & 15 deletions pages/glossary/section-of-content.md
View file
Open in desktop

This file was deleted.