diff --git a/_rules/heading-descriptive-b49b2e.md b/_rules/heading-descriptive-b49b2e.md index f469d6bc92..28952684a8 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 and meaningful 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 meaningful and they 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,390 @@ 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][]. - -## 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. +This rule applies to any visible content styled or perceived as a heading on a given page, as well as to any semantic heading element that is [included in the accessibility tree](included-in-the-accessibility-tree "Definition of included in the accessibility tree") while not visible. This evaluation focuses strictly on whether these headings are meaningful and relevant to their associated topic, purpose, or page, regardless of their compliance with any other accessibility criteria. +The testing scope is limited to evaluating the text of the heading in relation to its context, rather than programmatic implementation or visual styling. + +### None of the following is within this rule's scope: +- The sequential order of heading levels, such as evaluating whether a heading skips levels in the hierarchy (e.g., moving from an `h2` directly to an `h5`) +- Coding or parsing errors in headings (assuming that the heading is visible or exposed to assistive technologies), such as mismatched tags like `

Meaningful and relevant heading

` which browsers automatically correct in the DOM +- Factual accuracy of headings, such as the verification of historical dates, including names, locations, technical facts +- Technical mistakes related to numeration or ordering in headings, such as skipped numbers, sequencing or arithmetical mistakes, chronological validity, incorrect ordering of section headers +- Objective truth in headings, such as editorial biases, opinions, or controversial theories +- Grammar or spelling errors in headings (unless they render the text entirely unintelligible), such as common typos or minor translation mistakes like "Command your food" instead of "Order your food" +- Headings of highly specialized or technical domains consisting of advanced scientific, technical, or academic material, where evaluating the relevance of the terminology requires domain-specific expertise +- Headings of abstract or creative content consisting of literary works, poetry, or avant-garde text where relevance is interpretive or non-linear rather than purely informational +- Headings of legally mandated or standardized statements, documents, or user interfaces where their heading text and structure are rigidly dictated by statutory, regulatory, or legal mandates (e.g., standardized privacy disclosures) that should not be altered by the author +- Compliance with other WCAG success criteria applicable to headings that are evaluated independently + +## Expectations +- Each heading text carries meaning and is sufficiently intelligible +- Each heading is relevant to the specific page or section where it appears ## Background +This rule evaluates any element that is a semantic heading, that functions as a heading (including those perceived visually as headings by sighted users), or that is explicitly exposed as a heading to assistive technologies. +In other words, the scope encompasses fully accessible headings (e.g., `

Meaningful and relevant heading

`), visual headings that lack assistive technology support (e.g., `

Meaningful and relevant heading

`), and structural headings that are hidden from visual presentation (e.g., `

Meaningful and relevant 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 have a meaning and 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. -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. +#### Limitations +The following scenarios present inherent limitations to evaluation and the headings being tested in such cases may be deemed out of scope: +- Multilingual 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. +- Rapidly changing or real-time content streams: 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. +- Use of automated testing tools: This rule is inherently subjective and relies entirely on human judgment; it is not intended for automated testing tools. +- Exposure to controversies: Because evaluating the relevance and meaning of textual content is non-technical, findings can be contested by anyone regardless of their technical background. Consequently, 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 +## Test Cases -### Passed +### Passed (Situation A) +Headings that are compliant under this criterion, while exhibiting no other accessibility or structural failures under WCAG. #### Passed Example 1 +This `h1` element provides a relevant heading that 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 +This `h1` element provides a relevant heading for the marketing content that follows it. +```html +

Fresh deals just dropped: Printers

+ +``` +#### Passed Example 3 +This `h1` element provides 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 (Situation B) +Headings that serve as structural or sequential identifiers, which are inherently compliant regardless of the specific content that follows. +Similarly: +- Headings denoting standard document sections – such as "Glossary," "Summary," or "Appendix" – are inherently compliant, unless an obvious error is observed. +- Headings serving as call-to-action items, reminders, or warnings followed by list items or other relevant content – such as "Don't Forget To:", "Please Bring...", or "Doors are closed at 10:00 pm sharp!" – are considered compliant, unless a clear contextual mismatch is observed (such as appearing on an unrelated page). -This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. +#### Passed Example 4 +This `h1` element provides a sequential identifier for a major document section. The content that follows makes no difference to the outcome of this test. +```html +

Chapter 4

+ +``` +#### Passed Example 5 +This `h1` element provides 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 - - Opening Hours -

We are open Monday through Friday from 10 to 16

- +

1st movement

+ ``` -#### Passed Example 3 +#### Passed Example 6 +This `h1` element is for a standard document section. The content that follows makes no difference unless an obvious error indicates it is not a glossary section. +```html +

Glossary

+ +``` + +#### Passed Example 7 +This `h1` element is a reminder heading. The content that follows makes no difference unless a clear contextual mismatch indicates it 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 (Situation C) +Headings that are compliant under this criterion, despite exhibiting other accessibility or structural failures under WCAG. +#### Passed Example 8 +This `h1` element provides a relevant heading that states the purpose of the page content. It passes this rule despite exhibiting other WCAG failures, such as hiding the text from assistive technologies and having a severely low contrast ratio. ```html - -

- Opening hours -

-

We are open Monday through Friday from 10 to 16

- +

Your Future Starts Here, at Our University

+ ``` -#### Passed Example 4 +#### Passed Example 9 +Because this `p` element looks like a heading, it is perceived as a heading. It passes this rule as its text is relevant, 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 +

A Million Different Journeys

+ +``` -This `h1` heading element has a single character text that describes the topic of the following description list. +#### Passed Example 10 +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 + + + +``` +### Passed (Situation D) +Headings that are compliant under this criterion by remaining meaningful and relevant, irrespective of whether they could be optimized for length, contain redundant phrasing, are entirely unnecessary, or provide editorially unnecessary descriptions. + +#### Passed Example 11 +This `h1` element provides a relevant 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 - -

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

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

+ ``` -#### Passed Example 5 +#### Passed Example 12 +This `h1` element provides a relevant heading from which the purpose of the page content can be understood. It passes this rule despite containing completely redundant phrasing. +```html +

Travel Advisories and Travel Advisory Information

+ +``` -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 13 +This `h2` element accurately describes the content of the promotional banner that follows it. It passes this rule despite being entirely unnecessary, as it repeats the text of the accompanying `figcaption` element verbatim. +```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.
+
+``` +#### Passed Example 14 +This `h2` element provides a relevant heading that accurately 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 "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 - - Opening Hours -

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

- +

List of Links

+ ``` -#### Passed Example 6 +### Passed (Situation E) +Headings whose relevance or relationship to the section content is not immediately apparent, but becomes evident upon evaluation of the surrounding content or structural context. -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 15 +This `h2` element uses a satirical or metaphorical phrase to introduce the topic. Although the heading text does not literally match the vocabulary of the section, its contextual relevance becomes evident when considering the immediate context of the paragraph that follows. Headings that use literary devices remain compliant under this rule, as the determination of tone or stylistic approach falls within the editorial domain. +```html +

Final Day for Savings

+

Everything will be more expensive tomorrow.

+ +``` +#### Passed Example 16 +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 - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

-

We are open Saturday from 10 to 13

- +

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

+ ``` -### Failed +#### Passed Example 16 +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!

+``` -#### Failed Example 1 +### Passed (Situation F) +Headings containing errors due to copy-pasting, forgotten placeholder text along with the actual heading, or left-over markup code that should not be visible. These headings are considered passing if the text remains meaningful and relevant, not introducing a risk for user misunderstanding. -This `h1` heading element does not describes the topic of the following paragraph. +#### Passed Example 17 +This `h3` element contains a duplicated word and a trailing white space resulting from a manual copy-paste error. It passes this rule despite a repeated word, as the second "Contact" word could cause no misunderstanding. +```html +

Contact Contact Customer Support

+ +``` +#### Passed Example 18 +This `h3` element contains the former placeholder text (h3) at the end of the heading. 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 - -

Weather

-

We are open Monday through Friday from 10 to 16

- +

Contact Customer Support (h3)

+ ``` -#### Failed Example 2 +#### Passed Example 19 +This `h3` element contains an extra angle bracket at the end that resulted from a local markup formatting oversight. 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 (Situation A) +Headings that contain unintended or malformed text resulting from programmatic errors, publishing anomalies, or unremoved development artifacts. These structural failures are typically identifiable through programmatic or visual evaluation without requiring a deep analysis of the surrounding content. -This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. +#### 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]

+``` +#### Failed Example 2 +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 - - Weather -

We are open Monday through Friday from 10 to 16

- +

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

+ ``` #### Failed Example 3 +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 +

2026-06-30 13:46 UTC

+ +``` -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 (Situation B) +Headings that consist entirely of generic phrases, sequential locators, or conversational greetings that, on their face, lack the descriptive property required to identify a specific topic. Because these labels are inherently ambiguous, they typically fail this rule based on their textual content alone, without necessitating any evaluation of the surrounding content. +#### Failed Example 4 +This `h1` element 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 - - Weather -

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

- +

Hi

+ ``` -#### Failed Example 4 +#### Failed Example 5 +This `h1` element 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

+ +``` -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 6 +This `span` element utilizes the `role="heading"` attribute to programmatically identify itself as an `h1` equivalent, but contains a generic operational description of the site structure rather than a descriptive label for the current view. It fails this rule because the text describes the navigational tier instead of identifying the unique topic, aggregate purpose, or functional scope of the content that follows; consequently, it provides no discernable indication whatsoever regarding the actual nature of the articles being presented. +```html +Home Page of Our Newspaper + +``` + +### Failed (Situation C) +Headings that contain explicitly incorrect, mislabeled, or contradictory information that misrepresents the actual purpose, functional scope, or transactional nature of the content that follows. +Unlike subjective editorial choices, these failures are characterized by objective, glaring mismatches that can be easily identified by a human reviewer within seconds of contextual evaluation. This situation focuses primarily on structural errors that cause immediate, severe consequences for most users, but especially for screen reader users and for users with cognitive disabilities the consequences may be more severe. +#### Failed Example 7 +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 possesses zero descriptive utility and 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 - -

Weather

-

We are open Monday through Friday from 10 to 16

-

It is going to rain tomorrow

- +

Request Money

+ ``` -### Inapplicable +#### Failed Example 8 +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. +The `h1` element fails this rule because the primary heading text explicitly misidentifies the subject matter of the content it precedes. A rapid evaluation of the heading structure reveals a direct contradiction between the primary title and the functional content sections, meaning the h1 provides zero accurate descriptive value for the document view. -#### Inapplicable Example 1 +```html +

Contact Human Resources

+
+

Information Technology (IT) management contact information

+ +
+``` -There is no heading. +#### Failed Example 9 +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 - -

We are open Monday through Friday from 10 to 16

- +

Apply for Urgent Passport Renewal

+
+ + + +
``` -#### Inapplicable Example 2 +### Failed (Situation D) +Headings containing errors due to copy-pasting, forgotten placeholder text along with the actual heading, or left-over markup code that should not be visible. These headings are considered failing if the text no longer remains meaningful and relevant, introducing a risk for user misunderstanding. -This `h1` heading element is not [included in the accessibility tree][]. +#### 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

+ +``` +#### 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 - -

Opening Hours

-

We are open Monday through Friday from 10 to 16

- +

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

+ ``` -[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' +#### 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 +

Contact Customer Support

+ +``` + + +### Inapplicable (Situation A) +Lack of headings. If the page contains neither semantic headings nor any element that can be perceived as a heading, this rule is inapplicable on that page. + +#### Inapplicable Example 1 +The page lacks all of the following elements: + +- `h1` through `h6` elements: +```html +

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