useAltText

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

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

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

¥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/alt-text 相同
  
  ¥Same as jsx-a11y/alt-text

如何配置

¥How to configure

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

描述

¥Description

强制所有需要替代文本的元素都具有有意义的信息以传递回终端用户。

¥Enforce that all elements that require alternative text have meaningful information to relay back to the end user.

这是屏幕阅读器用户可访问性的关键组件，以便他们了解页面上内容的用途。默认情况下，可以使用 ++ 键盘快捷键运行此操作，也可以通过命令面板 (/++) 选择“组织导入”来访问。<img>、<area>、<input type="image"> 和 <object>。

¥This is a critical component of accessibility for screen reader users in order for them to understand the content’s purpose on the page. By default, this rule checks for alternative text on the following elements: <img>, <area>, <input type="image">, and <object>.

示例

¥Examples

无效

¥Invalid

1
<img src="image.png" />

code-block.jsx:1:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
  > 1 │ <img src=“image.png” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Meaningful alternative text on elements helps users relying on screen readers to understand content’s purpose within a page.
  
  ℹ If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.

1
<input type="image" src="image.png" />

code-block.jsx:1:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
  > 1 │ <input type=“image” src=“image.png” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Meaningful alternative text on elements helps users relying on screen readers to understand content’s purpose within a page.
  
  ℹ If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.

有效

¥Valid

1
<img src="image.png" alt="image alt" />

1
<input type="image" src="image.png" alt="alt text" />

1
<input type="image" src="image.png" aria-label="alt text" />

1
<input type="image" src="image.png" aria-labelledby="someId" />

可访问性指南

¥Accessibility guidelines

WCAG 1.1.1

useAltText

摘要

如何配置

描述

示例

无效

有效

可访问性指南

相关链接