useHeadingContent
诊断类别:lint/a11y/useHeadingContent
¥Diagnostic Category: lint/a11y/useHeadingContent
自从:v1.0.0
¥Since: v1.0.0
来源:
¥Sources:
-
与以下相同:
jsx-a11y/heading-has-content
¥Same as:
jsx-a11y/heading-has-content
强制标题元素(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
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.
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.
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.
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 可访问性指南¥Accessibility guidelines
¥Related links