Skip to content

useHeadingContent (since v1.0.0)

Diagnostic Category: lint/a11y/useHeadingContent

Sources:

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.

<h1 />
a11y/useHeadingContent.js: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>
a11y/useHeadingContent.js: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></h1>
a11y/useHeadingContent.js: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.
  
<h1>heading</h1>
<h1><div aria-hidden="true"></div>visible content</h1>
<h1 dangerouslySetInnerHTML={{ __html: "heading" }} />
<h1><div aria-hidden />visible content</h1>