diff --git a/_rules/heading-descriptive-b49b2e.md b/_rules/heading-descriptive-b49b2e.md index f469d6bc92..da16011f69 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 @@ -28,37 +28,40 @@ acknowledgments: ## Applicability -This rule applies to any [semantic][semantic role] `heading` element that is [included in the accessibility tree][] and has a non-empty (`””`) [accessible name][]. +This rule applies to any [semantic](semantic-role "Definition of semantic role") `heading` element that is [included in the accessibility tree](included-in-the-accessibility-tree "Definition of included in the accessibility tree") and has a non-empty `""` [accessible name](accessible-name "Definition of accessible name"). It also applies to other elements that are not semantically `heading` elements, but that are presented as headings. -## Expectation +### Applicability Type Designation -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][]. +Rule contains subjective applicability, depending on whether the target element should be considered a heading. -**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 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]. +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. + +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 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. +The limitations for the evaluation are 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 possess the necessary know-how to determine whether the heading is relevant. -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 obviously non-compliant 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. +There are no accessibility support issues known. ### 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 @@ -66,164 +69,284 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b ### Passed #### Passed Example 1 +An `h1` element is followed by a page that has instructions about how to make the renewal application and an application form. +This `h1` element states the functional purpose of the page content. +```html +

Renew Your Passport Online

+``` -This `h1` heading element describes the topic of the following paragraph. +#### Passed Example 2 +An `h1` element is followed by a carousel displaying newly arrived printers on a shopping website. +This `h1` element contains a heading about the marketing content that follows it. +```html +

Fresh deals just dropped: Printers

+``` +#### Passed Example 3 +An `h2` element precedes a data table that contains info about the weather forecast. +This `h2` element is a relevant heading for the informational data that follows it. ```html - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

- +

Current Weather in New York

``` -#### Passed Example 2 +#### Passed Example 4 +Headings denoting standard document sections – such as "Glossary," "Summary," or "Appendix" – are inherently compliant, unless an obvious error is observed. +This `h2` element contains a structural identifier of the order of content sections. The content that follows makes no difference to the outcome of this test. +```html +

Chapter 4

+``` -This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. +#### Passed Example 5 +This `h2` element contains a structural identifier for a section of a musical work. The content that follows makes no difference to the outcome of this test, unless an obvious misplacement is observed. +```html +

1st movement

+``` +#### Passed Example 6 +This `h3` element is for a standard document section, preceding terms and explanations of them. ```html - - Opening Hours -

We are open Monday through Friday from 10 to 16

- +

Glossary

``` -#### Passed Example 3 +#### Passed Example 7 +This `h1` element contains an important reminder for users. The content that follows makes no difference, unless there is a clear contextual mismatch, i.e. the content clearly belongs on another page. +```html +

Don't Forget To Bring:

+``` -This `h1` heading element with an image describes the topic of the following paragraph. +#### Passed Example 8 +An `h1` element precedes the name of a university and some other promotional content. +This `h1` element contains a relevant heading to the page content. It passes this rule despite exhibiting another WCAG failure for having a severely low contrast ratio. +```html +

Your Future Starts Here, at Our University

+``` +#### Passed Example 9 +The home page of a travel website that advertises their services. The heading content is contained in a `p` element, but its presentation style is intended to be perceived visually as a heading. +The heading passes this rule as its content is relevant and descriptive, despite failing other WCAG criteria due to using changes in text presentation without using the appropriate markup and utilizing an invalid ARIA role and value. ```html - -

- Opening hours -

-

We are open Monday through Friday from 10 to 16

- +

A Million Different Journeys

``` -#### Passed Example 4 +#### Passed Example 10 +There is large image of text that reads "Today’s Mortgage Rates at Our Bank", which is followed by a data table showing different rates for different amortizations. +Because this `img` element is visually presented as a heading, it is perceived as a heading. It passes this rule as its text is relevant, despite failing other WCAG criteria by relying entirely on an image of text and lacking an accessible name. +```html + +``` -This `h1` heading element has a single character text that describes the topic of the following description list. +#### Passed Example 11 +Headings that are compliant under this criterion by remaining relevant or descriptive, irrespective of whether they could be optimized for length, contain redundant phrasing, are entirely unnecessary, or provide editorially unnecessary descriptions. +An `h1` element precedes a page that has instructions, images, and a form about how to make the driver's licence renewal application. This `h1` element contains a heading from which the purpose of the page content can be understood. It passes this rule despite being overly casual and including unnecessary details. +```html +

Welcome to Our State-of-the-art New Wizard That Will Mail Your Driver's Licence Home

+``` +#### Passed Example 12 +This `h1` element contains a heading from which the purpose of the page content can be understood. It passes this rule as its meaning or efficacy of the description despite containing completely redundant phrasing. ```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. -
-
- +

Travel Advisories and Travel Advisory Information

+ ``` -#### Passed Example 5 +#### Passed Example 13 +This `h2` element describes the content of the promotional banner that follows it. It passes this rule despite it repeats the text of the accompanying `figcaption` element verbatim and the redundant tooltip. +```html +

Our hotel, conveniently located near the historic town center, features 118 guest rooms and 18 luxury suites

+
+ Panoramic view of a mountain ski resort in winter, with the modern hotel facade illuminated in the foreground. +
Our hotel, conveniently located near the historic town center, features 118 guest rooms and 18 luxury suites.
+
+``` -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][]. +#### Passed Example 14 +The section that precedes the `h2` element contains an unordered list of hyperlinks. +This `h2` element provides a relevant heading that describes the content of the section. It passes this rule despite being editorially unnecessary because the following list of hyperlinks makes the purpose of the section immediately obvious. Although an alternative like "Useful Links to External Resources" would provide better clarity, headings cannot be deemed non-compliant under this rule for merely stating the obvious, as such choices remain strictly within the editorial domain. +```html +

List of Links

+``` +#### Passed Example 15 +This `h2` element uses a satirical or metaphorical phrase to introduce the topic. Although the heading text does not seem to match the vocabulary of the section, its contextual relevance becomes evident when considering the immediate context that follows, which is an analysis article about inflation, explaining how long-term economic trends cause prices to rise continuously. Headings that use literary devices remain compliant under this rule, as the determination of tone or stylistic approach falls within the editorial domain. ```html - - Opening Hours -

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

- +

Final Day for Savings

+

Everything will be more expensive tomorrow.

``` -#### Passed Example 6 +#### Passed Example 16 +A heading for an opinion piece that provides statistics regarding active global conflicts and advocates for international peace. +This `h1` element employs irony to introduce the topic. Although the heading text does not explicitly reference the literal vocabulary of the section, its contextual relevance becomes evident when the primary purpose of the content is determined. Headings that utilize literary or stylistic devices remain compliant under this rule, as the determination of editorial tone falls outside the scope of accessibility evaluation. +```html +

Nobel's Peace Prize Office is Temporarily Closed Due to Declining Business

+``` + +#### Passed Example 17 +This `h3` element employs an interrogative structure to introduce the section topic. Although the heading itself asks a question rather than providing a direct declaration, its contextual relevance becomes immediately evident upon evaluating the concise response that follows in the immediate text. +```html +

Opening hours?

+

24/7

+

No opening hours. We are at your service round the clock!

+``` -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. +#### Passed Example 18 +This `h3` element contains a duplicated word and a trailing white space resulting from a manual copy-paste error. It is followed by the contact details for customer support. It passes this rule despite a repeated word, as the second "Contact" word could cause no misunderstanding. +```html +

Contact Contact Customer Support

+``` +#### Passed Example 19 +This `h3` element contains the former placeholder text (h3) at the end of the heading. It is followed by the contact details for customer support. The web publisher forgot to remove it after pasting the actual heading. It passes this rule despite the forgotten (h3), as it is still clearly about contacting customer support. ```html - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

-

We are open Saturday from 10 to 13

- +

Contact Customer Support (h3)

+``` + +#### Passed Example 20 +This `h3` element contains an extra angle bracket at the end that resulted from a local markup formatting oversight. It is followed by the contact details for customer support. It passes this rule despite the extra angle bracket which may not be noticeable by some, as the meaning of the heading is not affected. +```html +

Contact Customer Support <

``` ### Failed #### Failed Example 1 +This `h1` element contains unremoved placeholder text from a content template. It fails this rule because the text serves as a developmental instruction rather than describing the purpose or topic of the page content. +```html +

[Replace this text with heading 1]

+``` -This `h1` heading element does not describes the topic of the following paragraph. +#### Failed Example 2 +A page displays a form, but its heading mistakenly shows a back-end error message. +This `h1` element contains a raw back-end runtime error message injected during server-side execution. It fails this rule because the displayed text is a system-generated message rather than an intentional heading describing the purpose or topic of the page content. +```html +

Uncaught Error: Call to undefined function get_user_data() in /var/www/html/profile.php on line 42

+``` +#### Failed Example 3 +A page contains list of academic programs available at a college, but its heading mistakenly shows timestamp. +This `h1` element contains only a raw timestamp. Due to a publishing or layout logic failure, this metadata was incorrectly rendered within the primary heading container rather than as a document footer element. It fails this rule because the date and time string do not identify or describe the primary purpose or topic of the page content. ```html - -

Weather

-

We are open Monday through Friday from 10 to 16

- +

2026-06-30 13:46 UTC

``` -#### Failed Example 2 +#### Failed Example 4 +This `h1` element for a credit card application page contains a brief, conversational greeting. It fails this rule on its face because the informal text possesses no descriptive value and provides no indication of the highly specific transactional nature of the form that follows. +```html +

Hi

+``` -This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. +#### Failed Example 5 +This `h1` element, followed by a list of kitchen appliances on sale, consists solely of a sequential placeholder. It fails this rule because the text lacks any topic-specific descriptor to identify the subject of the section, unless the page is part of a multi-volume document or a strictly paginated publication where the sequence itself serves as the primary identifier. A rapid evaluation of the immediate context confirms that this is a standard product listing, meaning the sequential label provides no descriptive utility. +```html +

Page 1

+``` +#### Failed Example 6 +A page contains several image buttons that open their own articles. +This `span` element utilizes the `role="heading"` attribute to programmatically identify itself as an `h1` equivalent, but the only word it contains provides no discernable indication whatsoever regarding the actual nature of the articles being presented. It passes other criteria, failing under this criterion only. ```html - - Weather -

We are open Monday through Friday from 10 to 16

- +Home ``` -#### Failed Example 3 +#### Failed Example 7 +An e-transfer screen for sending out money. +This `h2` element misrepresents the operational direction of a financial transaction. The element fails this rule because the heading text explicitly contradicts the functional purpose of the content it introduces. +By providing an entirely inaccurate label for the transaction, the heading fails to identify the true topic or purpose. When a heading explicitly states an inbound transaction ("Request Money") but the interactive form executes an outbound transaction ("Send Money"), a user may inadvertently authorize an irreversible transfer of funds, resulting in immediate financial loss. +```html +

Request Money

+``` + +#### Failed Example 8 +A page about the IT unit employees. +This `h1` element contains an explicit mismatch regarding the organizational topic of the page. At first glance, a user or tester is led to believe they are accessing Human Resources information, only to find that the subsequent headings and content are obviously dedicated to Information Technology. +```html +

Contact Human Resources

+
+

Information Technology (IT) management contact information

+
+``` -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][]. +#### Failed Example 9 +A page about driver's licence renewal. +This `h1` element contains an explicitly erroneous transactional label, which is directly refuted by the form labels and input fields immediately following it. This `h1` element fails this rule because the primary heading text provides a completely false description of the page's functional utility. ```html - - Weather -

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

- +

Apply for Urgent Passport Renewal

``` -#### Failed Example 4 +#### Failed Example 10 +This `h3` element contains fragmented, truncated text resulting from a catastrophic copy-paste error. It fails this rule because the remaining text fragment fails to convey any meaningful topic, leaving it entirely irrelevant to the underlying content. +```html +

ortcontact Custo

+``` -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. +#### Failed Example 11 +This `h3` element contains the former placeholder text at the beginning of the heading. The web publisher forgot to remove it after pasting the actual heading. It fails this rule because the heading will cause confusion and it cannot be reasonably considered meaningful for many users. +```html +

Insert Your Heading Righ Here and Do It by the End of Day Contact Customer Support

+``` +#### Failed Example 12 +This `h3` element reveals an HTML comment that should have been invisible to users, due to a coding mistake the web developer made. It fails this rule because the heading will cause confusion and it cannot be reasonably considered meaningful for many users. ```html - -

Weather

-

We are open Monday through Friday from 10 to 16

-

It is going to rain tomorrow

- +

Contact Customer Support

``` ### Inapplicable #### Inapplicable Example 1 +Lack of the following elements: -There is no heading. - +- `h1` through `h6` elements: ```html - -

We are open Monday through Friday from 10 to 16

- +

+``` +- Elements with an explicit ARIA heading role: +```html +
+``` +- Visually hidden semantic headings designed exclusively for assistive technologies: +```html +

+``` +- Visually hidden elements utilizing an ARIA heading role: +```html +