Heading is descriptive

  • Rule Typeatomic
  • Rule ID: b49b2e
  • Last modified: Jul 19, 2019
  • Accessibility Requirements Mapping
    • 2.4.6 Headings and Labels (Level: AA)
      • Learn More about 2.4.6 (Headings and Labels)
      • Required for conformance to WCAG 2.0 and above on level AA and above
      • Outcome mapping:
        • Any failed outcomes: not satisfied
        • All passed outcomes: further testing is needed
        • An inapplicable outcome: further testing is needed
  • Input Aspects

Description

This rule checks that headings describe the topic or purpose of the content.

Applicability

This rule applies to any element with the semantic role of heading that is either visible or included in the accessibility tree.

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

Each target element describes the topic or purpose of its section of the content.

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

Assumptions

There are currently no assumptions.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

Heading marked up with h1 element that describes the topic or purpose of its section of the content.

<h1 class="target">Opening Hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>

Passed Example 2

Heading marked up with role="heading" that describes the topic or purpose of its section of the content.

<span role="heading" aria-level="1">Opening Hours</span>
<p>We are open Monday through Friday from 10 to 16</p>

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.

<span role="heading">Opening Hours</span>
<p>We are open Monday through Friday from 10 to 16</p>

Passed Example 4

Heading marked up with h1 element with an image that describes the topic or purpose of its section of the content.

<h1 class="target">
	<img scr="../test-assets/descriptive-heading-b49b2e/opening_hours_icon.png" alt="Opening hours" />
</h1>
<p>We are open Monday through Friday from 10 to 16</p>

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.

<h1 class="target">A</h1>
<dl>
	<dt>airplane</dt>
	<dd>
		a powered flying vehicle with fixed wings and a weight greater than that of the air it displaces.
	</dd>
	<dt>apple</dt>
	<dd>
		the round fruit of a tree of the rose family, which typically has thin green or red skin and crisp flesh.
	</dd>
</dl>

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.

<span role="heading" aria-level="1" style="position: absolute; top: -9999px; left: -9999px;">Opening Hours</span>
<p style="position: absolute; top: -9999px; left: -9999px;">
	We are open Monday through Friday from 10 to 16
</p>

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.

<h1 class="target" aria-hidden="true">Opening Hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>

Failed

Failed Example 1

Heading marked up with h1 element that does not describe the topic or purpose of its section of the content.

<h1 class="target">Weather</h1>
<p>We are open Monday through Friday from 10 to 16</p>

Failed Example 2

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

<span role="heading" aria-level="1">Weather</span>
<p>We are open Monday through Friday from 10 to 16</p>

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.

<span role="heading" style="position: absolute; top: -9999px; left: -9999px;">Weather</span>
<p style="position: absolute; top: -9999px; left: -9999px;">
	We are open Monday through Friday from 10 to 16
</p>

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.

<h1 class="target" aria-hidden="true">Weather</h1>
<p>We are open Monday through Friday from 10 to 16</p>

Inapplicable

Inapplicable Example 1

No heading.

<p>We are open Monday through Friday from 10 to 16</p>

Inapplicable Example 2

Heading that is neither visible to users, nor included in the accessibility tree.

<h1 style="display: none;">Opening hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>

Inapplicable Example 3

Empty heading marked up with h1 is not visible.

<h1></h1>

Inapplicable Example 4

Empty heading marked up with role="heading" is not visible.

<p role="heading" aria-level="1"></p>

Glossary

Included in the accessibility tree

key: included-in-the-accessibility-tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (work in progress) and the SVG accessibility API mappings (work in progress).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Outcome

key: outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Section of content

key: section-of-content

A distinct part or subdivision of a document.

A section of content may consist of one or more paragraphs and include graphics, tables, lists and sub-sections that together serve a purpose.

A section of the content may be defined in different ways, and combinations of these, such as:

  • HTML markup, using WAI-ARIA landmarks or HTML5 sectioning elements.
  • A heading that marks the beginning of the section of content.

Semantic Role

key: semantic-role

A semantic role is a semantic association that indicates an object's type. This allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

The semantic role of an element is its explicit semantic role if it has any, otherwise, the implicit semantic role is used.

Visible

key: visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.


Changelog

Jul 19, 2019chore: run prettier (#688)
Jul 2, 2019fix: add test asset for rule "descriptive headings" (b49b2e) (#629)
Jun 21, 2019fix: Make "manual" rules consistent with their SC (#586)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - Heading is descriptive (#504)
Apr 29, 2019chore: rename files and update associations (#489)
Apr 16, 2019chore: add unique id to all rules (#478)
Apr 15, 2019chore: WCAG ACT RULES CG Website Update (#437)
Mar 3, 2019fix: update rule type frontmatter (#427)
Oct 31, 2018SC2-4-6-descriptive-headings (#284)

Useful Links


Implementations

Tool NameCreated ByReport

Acknowledgements