useHeadingContent
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/useHeadingContent - This rule is recommended, which means is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Same as
jsx-a11y/heading-has-content
- Same as
Description
Section titled “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
Section titled “Examples”Invalid
Section titled “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.
<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
Section titled “Accessibility guidelines”How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useHeadingContent": "error" } } }}