Skip to content

useHeadingContent

诊断类别:lint/a11y/useHeadingContent

¥Diagnostic Category: lint/a11y/useHeadingContent

自从:v1.0.0

¥Since: v1.0.0

来源:

¥Sources:

强制标题元素(h1、h2 等)具有内容,并且内容可供屏幕阅读器访问。可访问意味着它不会使用 aria-hidden 属性隐藏。

¥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

¥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

<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

¥Related links