useHeadingContent

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/useHeadingContent

¥Diagnostic Category: lint/a11y/useHeadingContent
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 jsx-a11y/heading-has-content 相同
  
  ¥Same as jsx-a11y/heading-has-content

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useHeadingContent": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制标题元素（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

1
<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.

1
<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.

1
<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.

1
<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

1
<h1>heading</h1>

1
<h1><div aria-hidden="true"></div>visible content</h1>

1
<h1 aria-label="Screen reader content"><div aria-hidden="true">invisible content</div></h1>

1
<h1 dangerouslySetInnerHTML={{ __html: "heading" }} />

1
<h1><div aria-hidden />visible content</h1>

可访问性指南

¥Accessibility guidelines

WCAG 2.4.6

useHeadingContent

摘要

如何配置

描述

示例

无效

有效

可访问性指南

相关链接