← Back to rules

jsx-a11y/heading-has-content 正确性

它的作用

强制要求标题元素（h1、h2 等）包含内容，并且内容对屏幕阅读器可访问。 “可访问”意味着内容未通过 aria-hidden 属性隐藏。

为什么这是问题？

屏幕阅读器会提示用户存在标题标签。 如果标题为空或文本无法被访问， 这可能会导致用户困惑，甚至阻止用户获取页面结构中的信息。

示例

此规则的错误代码示例：

<h1 />

此规则的正确代码示例：

<h1>Foo</h1>

配置

此规则接受一个配置对象，包含以下属性：

components

type: string[]

default: null

额外的自定义组件名称，将其视为标题元素。 这些组件将与标准的 h1-h6 元素一起进行验证。

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/heading-has-content": "error"
  }
}

CLI

oxlint --deny jsx-a11y/heading-has-content --jsx-a11y-plugin

参考资料

• 规则源码