Skip to content

heading-descriptive-b49b2e.md

Latest commit

 

History

History
executable file
·
227 lines (172 loc) · 7.74 KB

heading-descriptive-b49b2e.md

File metadata and controls

executable file
·
227 lines (172 loc) · 7.74 KB
id b49b2e
name Heading is descriptive
rules_format 1.1
rule_type atomic
description This rule checks that headings describe the topic or purpose of the content.
accessibility_requirements
wcag20:2.4.6
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
DOM Tree
CSS Styling
Language
acknowledgments
authors funding
Carlos Duarte
Dagfinn Rømen
Geir Sindre Fossøy
Jean-Yves Moyen
WAI-Tools

Applicability

This rule applies to any semantic 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.

Background

Headings that are visible but not in the accessibility tree are a failure of Success Criterion 1.3.1 Info and Relationships. These are not tested by this rule but they can still fail Success Criterion 2.4.6 Headings and Labels.

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 Label 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 Label is still satisfied.

Accessibility Support

Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some semantic heading elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue.

Other Resources

Examples

Passed

Passed Example 1

This h1 heading element describes the topic of the following paragraph.

<html lang="en">
	<h1>Opening Hours</h1>
	<p>We are open Monday through Friday from 10 to 16</p>
</html>

Passed Example 2

This heading marked up with an [explicit role][] of heading describes the topic of the following paragraph.

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

Passed Example 3

This h1 heading element with an image describes the topic of the following paragraph.

<html lang="en">
	<h1>
		<img src="/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>
</html>

Passed Example 4

This h1 heading element has a single character text that describes the topic of the following description list.

<html lang="en">
	<h1>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>
</html>

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

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

This h1 heading element does not describes the topic of the following paragraph.

<html lang="en">
	<h1>Weather</h1>
	<p>We are open Monday through Friday from 10 to 16</p>
</html>

Failed Example 2

This heading marked up with an [explicit role][] of heading does not describe the topic of the following paragraph.

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

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 lang="en">
	<span role="heading" aria-level="1" style="position: absolute; top: -9999px; left: -9999px;">Weather</span>
	<p>
		We are open Monday through Friday from 10 to 16
	</p>
</html>

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

There is no heading.

<html lang="en">
	<p>We are open Monday through Friday from 10 to 16</p>
</html>

Inapplicable Example 2

This h1 heading element is not included in the accessibility tree.

<html lang="en">
	<h1 hidden>Opening Hours</h1>
	<p>We are open Monday through Friday from 10 to 16</p>
</html>