useHeadingContent

Diagnostic Category: lint/a11y/useHeadingContent

JSX and TSX

Since: v1.0.0

Sources:

Same as: jsx-a11y/heading-has-content

Description

Enforce that heading elements (h1, h2, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the aria-hidden prop.

Examples

Invalid

<h1 />

code-block.jsx:1:1 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using heading  elements.
  
  > 1 │ <h1 />
      │ ^^^^^^
    2 │ 
  
  ℹ All headings on a page should have content that is accessible to screen readers.

<h1><div aria-hidden /></h1>

code-block.jsx:1:1 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using heading  elements.
  
  > 1 │ <h1><div aria-hidden /></h1>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All headings on a page should have content that is accessible to screen readers.

<h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>

code-block.jsx:1:1 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using heading  elements.
  
  > 1 │ <h1 aria-label=“Screen reader content” aria-hidden>invisible content</h1>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All headings on a page should have content that is accessible to screen readers.

<h1></h1>

code-block.jsx:1:1 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using heading  elements.
  
  > 1 │ <h1></h1>
      │ ^^^^^^^^^
    2 │ 
  
  ℹ All headings on a page should have content that is accessible to screen readers.

Valid

<h1>heading</h1>

<h1><div aria-hidden="true"></div>visible content</h1>

<h1 aria-label="Screen reader content"><div aria-hidden="true">invisible content</div></h1>

<h1 dangerouslySetInnerHTML={{ __html: "heading" }} />

<h1><div aria-hidden />visible content</h1>

Accessibility guidelines

WCAG 2.4.6

How to configure

{
  "linter": {
    "rules": {
      "a11y": {
        "useHeadingContent": "error"
      }
    }
  }
}