diff --git a/_rules/heading-descriptive-b49b2e.md b/_rules/heading-descriptive-b49b2e.md index f469d6bc92..1e77d81b81 100755 --- a/_rules/heading-descriptive-b49b2e.md +++ b/_rules/heading-descriptive-b49b2e.md @@ -1,10 +1,10 @@ --- id: b49b2e -name: Heading is descriptive +name: Heading is relevant rules_format: 1.1 rule_type: atomic -description: | - This rule checks that headings describe the topic or purpose of the content. +description: + This rule checks that headings are relevant to a specific topic, purpose or page. accessibility_requirements: wcag20:2.4.6: # Headings and labels (AA) forConformance: true @@ -13,11 +13,11 @@ accessibility_requirements: inapplicable: further testing needed input_aspects: - Accessibility Tree - - DOM Tree - CSS Styling - Language acknowledgments: authors: + - Armağan Tekdöner - Carlos Duarte - Dagfinn Rømen - Geir Sindre Fossøy @@ -27,203 +27,33 @@ acknowledgments: --- ## Applicability +This rule applies to semantic heading elements that are [included in the accessibility tree](included-in-the-accessibility-tree "Definition of included in the accessibility tree"), as well as to any HTML element that is styled as a heading. Elements that are styled as a heading may include features such as a larger font-size than nearby text, bolding or changing of the font, or the use of whitespace or shapes that visually distinguish the element text, as well as an image of text such as a text banner displayed like a heading as the first visible element on the page. -This rule applies to any [semantic][semantic role] `heading` element that is [included in the accessibility tree][] and has a non-empty (`””`) [accessible name][]. +### Applicability Type Designation: +Rule contains subjective applicability, depending on whether the element evaluated as a heading by implementers should be considered a heading. -## Expectation - -Each target element describes the topic or purpose of the first [perceivable content][] after the test target that is not [decorative][]. The order of elements is determined by the [flat tree][]. - -**Note:** Headings do not need to be lengthy. A word, or even a single character, may be sufficient. +## Expectations +Each heading is relevant to the specific page or section where it appears and it is sufficiently intelligible. ## Background +Headings are normally marked as semantic headings using `

` to `

` elements or using generic elements with correct ARIA roles that convert them into semantic headings. On the other hand, on websites that are not adhering to HTML5 semantic coding practices, or that are intended to apply semantics in the code while containing errors in the usage of ARIA roles for example, other elements can be observed that function as headings. Sometimes a heading is a list item, sometimes a figcaption, sometimes a table caption, sometimes another element that is not normally a heading. -Headings that are visible but not in the accessibility tree are a failure of [Success Criterion 1.3.1 Info and Relationships][sc131]. These are not tested by this rule but they can still fail [Success Criterion 2.4.6 Headings and Labels][sc246]. +Under this rule, "content" refers to any textual or non-textual element presented on the web page, including sections, paragraphs, forms, user interface components, media galleries, lists, or hyperlinks. -Testing tools treat empty headings `

` or `div role="heading" aria-level="1">` differently. Some report that empty headings fail under 1.3.1 Info and Relationships or 2.4.6 Labels or Instructions. Other tools report that these headings pass because they are ignored by most assistive technologies and cause no accessibility barriers at all. This rule does not include examples of empty headings because there is currently no harmonized approach for testing them. +To pass, a heading must be relevant to its associated content. (Headings consisting of placeholder text or uninformative character strings fail this rule inherently.) ### Assumptions +This rule assumes that testers evaluating the content possess the necessary language proficiency and contextual comprehension required to assess the relationship between the headings and their associated content. Web pages containing content in multiple languages (e.g., a heading in one language preceding content in another) where the tester does not possess professional working proficiency in all languages present is a limitation. +Live, dynamic content fields (e.g., streaming data feeds, live social walls, or active chat interfaces) where the content updates at a rate that prevents static evaluation against its structural headings or content that is highly specialized, academic, or artistic are exceptions when the evaluator does not posess the necessary know-how to determine whether the heading is relevant. -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 an order that greatly differs 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 Labels][sc246] is still satisfied. - -This rule also assumes that the content the heading is intended to describe is [visible][] and not hidden from assistive technologies. Otherwise, cases such as expandable content using a heading might fail this rule while [Success Criterion 2.4.6 Headings and Labels][sc246] is still satisfied. +This rule is designed as a test-to-pass evaluation and failures should be reserved for exceptional cases. Testers should default to a passing or not applicable result when in doubt. ### Accessibility Support - -Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some [semantic][semantic role] `heading` elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue. +This rule does not rely on the support for particular accessibility features by different assistive technologies and user agents. ### Other Resources - -- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) - [Understanding Success Criterion 2.4.6: Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) - [G130: Providing descriptive headings](https://www.w3.org/WAI/WCAG22/Techniques/general/G130) -- [H42: Using h1-h6 to identify headings](https://www.w3.org/WAI/WCAG22/Techniques/html/H42) -- [ARIA12: Using role=heading to identify headings](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA12) +- [Understanding Success Criterion 2.4.10 Section Headings](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) +- [Use headings to convey meaning and structure](https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure) - [HTML Specification - Heading content](https://html.spec.whatwg.org/#heading-content) - -## Examples - -### Passed - -#### Passed Example 1 - -This `h1` heading element describes the topic of the following paragraph. - -```html - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

- -``` - -#### Passed Example 2 - -This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. - -```html - - Opening Hours -

We are open Monday through Friday from 10 to 16

- -``` - -#### Passed Example 3 - -This `h1` heading element with an image describes the topic of the following paragraph. - -```html - -

- Opening hours -

-

We are open Monday through Friday from 10 to 16

- -``` - -#### Passed Example 4 - -This `h1` heading element has a single character text that describes the topic of the following description list. - -```html - -

A

-
-
airplane
-
- a powered flying vehicle with fixed wings and a weight greater than that of the air it displaces. -
-
apple
-
- the round fruit of a tree of the rose family, which typically has thin green or red skin and crisp flesh. -
-
- -``` - -#### Passed Example 5 - -This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. The heading is positioned off screen but is [included in the accessibility tree][]. - -```html - - Opening Hours -

- We are open Monday through Friday from 10 to 16 -

- -``` - -#### Passed Example 6 - -This heading describes the first [perceivable content][] after it (the first `p` element). The next [perceivable content][] (the second `p` element) is not considered by this rule. - -```html - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

-

We are open Saturday from 10 to 13

- -``` - -### Failed - -#### Failed Example 1 - -This `h1` heading element does not describes the topic of the following paragraph. - -```html - -

Weather

-

We are open Monday through Friday from 10 to 16

- -``` - -#### Failed Example 2 - -This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. - -```html - - Weather -

We are open Monday through Friday from 10 to 16

- -``` - -#### Failed Example 3 - -This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. The heading is positioned off screen but is [included in the accessibility tree][]. - -```html - - Weather -

- We are open Monday through Friday from 10 to 16 -

- -``` - -#### Failed Example 4 - -This `h1` heading element does not describe the first [perceivable content][] after it (the first `p` element). The next [perceivable content][] (the second `p` element) is not considered by this rule. - -```html - -

Weather

-

We are open Monday through Friday from 10 to 16

-

It is going to rain tomorrow

- -``` - -### Inapplicable - -#### Inapplicable Example 1 - -There is no heading. - -```html - -

We are open Monday through Friday from 10 to 16

- -``` - -#### Inapplicable Example 2 - -This `h1` heading element is not [included in the accessibility tree][]. - -```html - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

- -``` - -[decorative]: https://www.w3.org/TR/WCAG22/#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' -[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' -[sc131]: https://www.w3.org/TR/WCAG22/#info-and-relationships ' Success Criterion 1.3.1 Info and Relationships' -[sc246]: https://www.w3.org/TR/WCAG22/#headings-and-labels 'Success Criterion 2.4.6 Headings and Labels' -[semantic role]: #semantic-role 'Definition of semantic role' -[visible]: #visible 'Definition of visible' -[accessible name]: #accessible-name 'Definition of accessible name' -[perceivable content]: #perceivable-content 'Definition of perceivable content'