no-duplicate-h1

Warn if there is more than one h1 element in the document.

This rule is based on Techniques H42 for Success Criterion 1.3.1 in WCAG, Practices for skipping heading level and Web Accessibility Tutorials - Headings.

The h1 elements are counted by tree: the content of a template element and a declarative shadow root are trees of their own, where it is not known from the markup where they are inserted, so an h1 in them does not duplicate the one of the document. In React and Vue, the children of a template element without a directive are in the tree of the document.

Split out of the former required-h1 rule, alongside require-h1.

❌ Examples of incorrect code for this rule

<html>
  <body>
    <h1>heading</h1>
    <main>
      <h1>another heading</h1>
    </main>
  </body>
</html>

✅ Examples of correct code for this rule

<html>
  <body>
    <h1>heading</h1>
    <main>
      <h2>subheading</h2>
    </main>
  </body>
</html>

Interface

{
  "no-duplicate-h1": boolean
}

Options

{
  "no-duplicate-h1": {
    "options": {
      "in-document-fragment"?: boolean
    }
  }
}

Property	Type	Default Value	Description
in-document-fragment	boolean	"false"	Set it to true if you want this rule to apply within document fragment rather than the entire document.

Default Severity

warning