SIA-R61Documents start with a level 1 heading

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that in each document the first heading has a level of 1.

Applicability

This rule applies to every document

where the document element is an <html> element in the HTML namespace; and
which has at least one descendant in the flat tree that has a semantic role of heading and is included in the accessibility tree.

Expectations

The first descendant in the flat tree of the document in tree order that has a semantic role of heading and is included in the accessibility tree, has an aria-level property of 1.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has the following accessibility support concern:

According to the Algorithm for creating an outline, <h1> nested inside sectioning content are treated as <h2>, and so on (roughly speaking). However, whatever the nesting, the heading elements are nonetheless assigned an aria-level which is solely equal to the number in the tag name (see the HTML Accessibility API Mapping). This rule is aiming at checking document structure for users of assistive technologies and is therefore looking only at the aria-level property.

Explicitly setting the aria-level attribute on an element does not change the way it is rendered (due to Non-interference with the Host Language). Doing so will result in confusing situations where the visual outline of the document is very different from the one exposed to assistive technologies.

Examples

Passed

The first element with a semantic role of heading is the <h1> with a default aria-level of 1.

<html>
    <title>Title of the book</title>
    <p>Biography of the author</p>
    <h1>Part one</h1>
    <h2>Chapter one</h2>
</html>

This document has a <div> element with a semantic role of heading and an aria-level property set to 1.

<html>
    <div role="heading" aria-level="1">Prefer using heading elements!</div>
</html>

This document has an <h1> element. Even though it is embedded in a <section> and will thus be rendered as an <h2>, it nonetheless has an aria-level property of 1.

<html>
    <section>
        <h1>This is a heading</h1>
    </section>
</html>

This document has an <h2> with its aria-level explicitly set to 1.

<html>
    <h2 aria-level="1">Do not change level of headings elements!</h2>
</html>

The <h2> element is not included in the accessibility tree. Thus, the first element with a semantic role of heading which is included in the accessibility tree is the <h1> with an aria-level of 1.

<html>
    <h2 aria-hidden="true">This is not in the accessibility tree</h2>
    <h1>This is the first heading in the accessibility tree</h1>
</html>

Failed

This document has no element with a semantic role of heading.

<html>
    <p>I should use heading to structure my document.</p>
</html>

This document has elements with a semantic role of heading, but none of them has an aria-level of 1.

<html>
    <h3>Having no level 1 heading is confusing</h3>
    <div role="heading" aria-level="3"></div>
</html>

The first element with a semantic role of heading which is included in the accessibility tree is the <h2> with a default aria-level of 2.

<html>
    <title>Title of the book</title>
    <p>Biography of the author</p>
    <h1 aria-hidden="true">Part one</h1>
    <h2>Chapter one</h2>
</html>

Inapplicable

In this document, the document element is an SVG <svg> element, not an HTML <html> element, hence the rule is inapplicable.

<svg xmlns="http://www.w3.org/2000/svg">
  <title>This is a circle</title>
  <circle cx="150" cy="75" r="50" fill="green"></circle>
</svg>

This document has no element with a semantic role of heading which is included in the accessibility tree.

<html>
    <h1 aria-hidden="true">Part one</h1>
    <h2 aria-hidden="true">Chapter one</h2>
</html>