useHeadingContent (since v1.0.0)
Diagnostic Category: lint/a11y/useHeadingContent
Source: heading-has-content
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
Section titled ExamplesInvalid
Section titled Invalid<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.
Valid
Section titled Valid<h1>heading</h1><h1><div aria-hidden="true"></div>visible content</h1><h1 dangerouslySetInnerHTML={{ __html: "heading" }} /><h1><div aria-hidden />visible content</h1>