React应用遇jsx-a11y/img-redundant-alt错误：alt属性冗余如何解决？

核心问题回顾 #

这个eslint规则是为了优化无障碍体验——屏幕阅读器会自动把<img>标签识别为图片，所以alt文本里不需要重复“图片”“照片”“image”这类词。如果已经修改了alt文本但错误仍存在，按以下步骤排查：

• 检查是否遗漏隐藏关键词
  除了规则提示的“image”“photo”“picture”，还要留意同义词或变种（比如中文的“图”“相片”，甚至混合语言的情况）。把这些冗余词直接删掉即可。
  示例：

  // 错误写法
  <img src="product.jpg" alt="智能手表宣传图片" />
  // 正确写法
  <img src="product.jpg" alt="智能手表宣传" />
  

• 查看项目自定义规则配置
  有些项目会在eslint配置里给这个规则加额外的禁用关键词。打开项目的.eslintrc或.eslintrc.json，找到jsx-a11y/img-redundant-alt的配置项，看看有没有自定义的words数组。如果alt文本里包含这些自定义词，也会触发错误，删掉对应词即可。
  示例配置：

  {
    "rules": {
      "jsx-a11y/img-redundant-alt": ["error", {
        "words": ["图", "相片", "pic"]
      }]
    }
  }
  

• 排查拼写或空格问题
  有时候alt文本里的关键词被空格分隔或者拼写变形（比如“图 片”），也会被规则检测到。检查并修正这类格式问题。

• 特殊场景下强制忽略（谨慎使用）
  如果业务场景确实需要保留冗余关键词，可以在代码行上方加eslint注释临时忽略该规则：

  {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
  <img src="special-case.jpg" alt="活动专属图片" />
  

  注意：无障碍规范优先，非必要不要这么做。

内容的提问来源于stack exchange，提问作者Ashutosh Singh