Ensure headings have discernible text
This rule checks that each heading has a non-empty accessible name.
Autoren: Jean-Yves Moyen, Wilco Fiers
Finanzierung: WAI-Tools
This rule applies to any HTML element that is a semantic heading, included in the accessibility tree.
Each test target has a non-empty ("") accessible name.
Completely empty headings (e.g., <h1></h1>) seem to be consistently ignored by assistive technologies. However, they fail Technique H42: Using h1-h6 to identify headings (by using heading markup for content which is not heading). Moreover, they may be rendered on screen (by breaking flow content, or because of custom styling), thus causing concerns for sighted users. Therefore, this rule also fails on these.
There are no assumptions.
Some assistive technologies may hide headings with empty accessible name from the users. This depends on the user agent, on how the accessible name was computed (the accessible name and description computation is not clear concerning which characters should be trimmed), and on the assistive technology itself. Hence, there are cases where the outcome of this rule is failed, but users of certain assistive technology and browser combinations will not experience an issue.
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 because the same elements would have a semantic role of presentation and be hidden for these users.
The accessible name and description computation suggests that if an aria-labelledby attribute refers to an existing but empty element, the computation should stop and return an empty name without defaulting to the next steps. Several user agents and assistive technologies chose to use the next step in the computation in this case (ultimately defaulting to the content).
This h1 element has a non-empty accessible name.
<h1>ACT rules</h1>
This div element with a semantic role of heading has a non-empty accessible name.
<div role="heading" aria-level="1">ACT rules</div>
This h1 element has a non-empty accessible name given by its aria-labelledby attribute.
<span id="h-name" hidden>ACT rules</span>
<h1 aria-labelledby="h-name">Learn about ACT rules</h1>
This h1 element has a non-empty accessible name given by the alt attribute of its content.
<h1><img src="/test-assets/shared/act-logo.png" alt="ACT rules" /></h1>
This h1 element is not visible, but is still included in the accessibility tree. It has a non-empty accessible name.
<h1 style="position: absolute; top: -9999px">ACT rules</h1>
This h1 element has an empty accessible name because its content is not exposed to assistive technologies.
<h1><img src="/test-assets/shared/act-logo.png" alt="" /></h1>
This h1 element has an empty accessible name given by its aria-label attribute. Its content is not exposed to assistive technologies, thus preventing the accessible name to default to the content.
<h1 aria-label=""><span aria-hidden="true">ACT rules</span></h1>
This h1 element has an empty accessible name given by its aria-labelledby attribute. Its content is not exposed to assistive technologies, thus preventing the accessible name to default to the content.
<span id="h-name" hidden></span>
<h1 aria-labelledby="h-name"><span aria-hidden="true">ACT rules</span></h1>
This h1 element has an empty accessible name because the img element has a semantic role of presentation, and thus does not provide an accessible name to the h1 element. Note that the alt attribute does not trigger Presentational Roles Conflict Resolution because it is not an ARIA attribute.
<h1><img src="/test-assets/shared/act-logo.png" alt="ACT rules" role="presentation" /></h1>
This h1 element has an empty accessible name because the spaces and line break are trimmed by accessible name computation.
<h1><br /></h1>
This h1 element has an empty accessible name. It is nonetheless rendered by breaking the flow content, resulting in a confusing situation for sighted users.
<span>Hello</span>
<h1></h1>
<span>World!</span>
This div element with a semantic role of heading has an empty accessible name (and content). It is nonetheless rendered due to its styling, resulting in a confusing situation for sighted users.
<div role="heading" aria-level="1" style="border-style: solid"></div>
This h1 element has an explicit role of none. However, the global property aria-label is specified. Thus it has a semantic role of heading due to Presentational Roles Conflict Resolution. It has an empty accessible name given by its aria-label attribute and the lack of accessible content to fallback to.
<h1 aria-label="" role="none"><span aria-hidden="true">ACT rules</span></h1>
There is no semantic heading element.
<div></div>
This h1 element is not included in the accessibility tree.
<h1 aria-hidden="true"></h1>