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 all 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
63 changes: 48 additions & 15 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 @@ -28,15 +29,20 @@ This rule applies to any element with the [semantic role][] of heading that is e

**Note:** This rule only applies to elements with the [semantic role][] of heading. Thus, it is a partial check for WCAG 2.0 success criterion 2.4.6, which applies to all headings. "Heading" is used in its general sense and includes headlines and other ways to add a heading to different types of content. This includes elements that are not marked up as headings in the code, but still act visually as headings, e.g. by larger and/or bolder text.

## Expectation
## Expectation 1

Each target element describes the topic or purpose of its [section of the content][].
Each target element which is [visible][] describes the topic or purpose of the first [palpable content][] which is non-[decorative][], [visible][], and after the target in tree order in the [flat tree][].

## Expectation 2

Each target element which is [included in the accessibility tree][] describes the topic or purpose of the first [palpable content][] which is non-[decorative][], [included in the accessibility tree][], and after the target in tree order in the [flat tree][].

**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 first `p` element). The next [palpable content][] (the second `p` element) is not considered by this rule.

```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 first `p` element). The next [palpable content][] (the second `p` element) is not considered by this rule.

```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.