jsx-a11y/alt-text 正确性
它的作用
强制要求所有需要替代文本的元素都包含有意义的信息,以便向最终用户传达内容。
为什么这是错误的?
替代文本是屏幕阅读器用户可访问性的关键组成部分,使他们能够理解元素的内容和功能。缺少或不充分的替代文本会使依赖辅助技术的用户无法访问内容。
示例
此规则的错误代码示例:
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 元素上替代文本的自定义组件。
如何使用
要通过配置文件或 CLI 启用此规则,可以使用:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/alt-text": "error"
}
}bash
oxlint --deny jsx-a11y/alt-text --jsx-a11y-plugin