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 DescriptionEnforce 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 />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
Section titled 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
Section titled Accessibility guidelinesHow to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "useHeadingContent": "error" } } }}