src/content/docs/linter/rules/use-heading-content.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useHeadingContent`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/heading-has-content`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/heading-has-content.md){
"linter": {
"rules": {
"a11y": {
"useHeadingContent": "error"
}
}
}
}
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 />
<h1><div aria-hidden /></h1>
<h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
<h1></h1>
<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>