Skip to content
← Back to rules

jsx-a11y/alt-text 正确性

An auto-fix is available for this rule.

作用

强制要求所有需要替代文本的元素都具有可传达给最终用户的有意义信息。

为什么这很糟糕?

替代文本是屏幕阅读器用户可访问性的重要组成部分,使他们能够理解元素的内容和功能。缺失或不充分的 alt 文本会使依赖辅助技术的用户无法访问内容。

示例

以下是此规则的错误代码示例:

jsx
<img src="flower.jpg" />
<img src="flower.jpg" alt="" />
<object />
<area />

以下是此规则的正确代码示例:

jsx
<img src="flower.jpg" alt="一朵白色雏菊的特写" />
<img src="decorative.jpg" alt="" role="presentation" />
<object aria-label="交互式图表" />
<area alt="导航链接" />

配置

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

area

type: string[]

default: []

用于检查 area 元素上替代文本的自定义组件。

img

type: string[]

default: []

用于检查 img 元素上替代文本的自定义组件。

input[type="image"]

type: string[]

default: []

用于检查 input[type="image"] 元素上替代文本的自定义组件。

object

type: string[]

default: []

用于检查 object 元素上替代文本的自定义组件。

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/alt-text": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["jsx-a11y"],
  rules: {
    "jsx-a11y/alt-text": "error",
  },
});
bash
oxlint --deny jsx-a11y/alt-text --jsx-a11y-plugin

版本

此规则在 v0.0.16 中加入。

参考资料