Front-End-Checklist 无障碍检查项详解：避免冗余的图片替代文本（image-redundant-alt）
【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist
本文是 Front-End-Checklist 开源仓库中
image-redundant-alt规则的深度技术指南，围绕「替代文本不应包含 image、photo 等冗余词汇」这一核心要求展开。你将掌握冗余 alt 文本的识别方法、正确与错误的代码写法、屏幕阅读器下的实际听感差异，以及如何用自动化工具与人工流程完成验证，可直接用于日常页面开发与无障碍审查。
Front-End-Checklist 在 packages/content/rules/en/accessibility/image-redundant-alt.mdx 中收录了「Avoid redundant image alternative text」这条规则，对应的技能文件位于 skills/image-redundant-alt/SKILL.md，完整规范定义在 skills/image-redundant-alt/references/rule.md。这条规则属于accessibility分类下的visual子类，优先级为low，难度为beginner，预计耗时5 分钟，是接入无障碍审查时最容易被忽略、也最容易修复的一类问题。
规则核心：替代文本不应包含冗余词汇
规则的 TL;DR 可以概括为三条：
- 不要在 alt 文本中重复 "image of" 或 "picture of" 这类短语；
- 避免 alt 文本与相邻可见文本完全相同；
- 保持 alt 文本简洁，聚焦于图片传达的含义。
其背后的原理在于：屏幕阅读器等辅助技术在朗读图片时，本身就会先播报 "Graphic" 或 "Image"来告知用户「这是一个图片」。W3C WAI 图像教程和 MDN 的<img>元素参考都假设辅助技术已经知道用户正在面对一张图片，因此再在 alt 文本中加入 "image"、"photo" 等词汇，只是重复已知信息，白白增加听读负担。
在 Front-End-Checklist 的规则元数据中，这条规则引用了三项权威来源：WCAG 2.1 成功准则 1.1.1（Non-text Content，Level A 最低要求）、W3C WAI 的图片决策树教程，以及 MDN 的<img>元素参考。也就是说，冗余 alt 文本不仅影响体验，在严格审查下也会被判定为不符合 WCAG 1.1.1 的精神——虽然图片有 alt，但替代文本没有提供「等价的、不重复的信息」。
代码示例：错误与正确的实现对照
规则文档给出了两组对照示例，这也是审查时最常用的判断基准。
错误实现（Incorrect）
<img src="dog.jpg" alt="A photo of a Golden Retriever playing in the park"> <!-- Redundant with caption --> <p>A Golden Retriever playing in the park</p> <img src="dog.jpg" alt="A Golden Retriever playing in the park">第一处问题：alt="A photo of ..."中的 "photo of" 是冗余词——屏幕阅读器已经播报 "Image"，用户实际听到的是 "Image, a photo of a Golden Retriever..."，信息被重复。第二处问题：图片下方已经有一行文字完全描述同一内容，此时 alt 与相邻文本完全重复，属于「alt 与周围内容重复」。
正确实现（Correct）
<img src="dog.jpg" alt="Golden Retriever playing in the park"> <!-- Decorative image or described by caption --> <p>A Golden Retriever playing in the park</p> <img src="dog.jpg" alt="">第一处：去掉 "photo of"，直接描述图片内容，用户听到 "Graphic, Golden Retriever playing in the park"，简洁且信息完整。第二处：当图片的信息已经由相邻文字（caption）完整传达时，图片本质上退化为装饰性元素，此时应使用**空 alt（null alt，即alt=""）**让屏幕阅读器直接跳过，避免同一信息被朗读两遍。
这里需要特别区分：alt=""是「有意忽略装饰性图片」的正确姿势，而缺失 alt 属性则是另一条规则（alt-text）要处理的问题——屏幕阅读器会退而求其次去猜测文件名。关于这一点，可参考同仓库的 skills/alt-text/references/rule.md 中对缺失 alt、文件名当 alt、泛化 alt 的完整对照。
为什么重要：从屏幕阅读器的听感说起
规则文档从三个维度解释了这条规则的价值：
- 冗长（Verbosity）：屏幕阅读器在读 alt 文本前会先播报 "Graphic" 或 "Image"。如果 alt 写的是 "Image of a dog"，用户实际听到的是 "Graphic, image of a dog"——同一个「图片」概念被重复了两遍。
- 效率（Efficiency）：去掉无意义的词汇后，用户能以更快的速度消费内容，尤其对于每天要浏览大量页面的重度屏幕阅读器用户，累积节省的时间非常可观。
- 认知清晰（Cognitive Clarity）：好的 alt 文本把用户注意力引导到图片的内容与含义上，而不是「这是一张图片」这个事实本身。
这与 skills/decorative-elements/references/rule.md 中强调的「屏幕阅读器会播报每一张图片和图标」是同一条体验链路上的问题：装饰元素制造噪音，冗余 alt 文本同样制造噪音，只是后者还叠加了「重复信息」的额外负担。
最佳实践清单
规则文档给出三条可以直接照做的实践准则：
- ✅聚焦信息（Focus on Information）：描述图片传达了什么，而不是图片是什么。例如
alt="Golden Retriever playing in the park"描述的是内容，alt="A photo of a dog"描述的是媒介，前者正确。 - ✅装饰性图片使用空 alt（Use Null Alt）：图片纯粹用于装饰、或信息已由文字完整描述时，使用
alt=""。 - ❌不要重复文件名：
alt="IMG_001.jpg"永远没有帮助——它既不是描述，还会暴露无意义的技术细节，让用户听到一串毫无信息量的字符。
写 alt 时可以用一句口头禅自检：「如果这句话删掉 'image/photo/picture of' 之后依然完整、准确，那就说明冗余词应该删掉。」
例外情况：什么时候可以不遵守
规则文档明确列出了三条例外，审查时切忌一刀切：
- Logo、纯装饰性文字设计、用于文档的截图：只要它们的可访问替代仍被恰当地提供（例如 Logo 的 alt 直接写品牌名，见 skills/alt-text/references/rule.md 中 "Acme Corp" 的例子），就可以作为合法例外。
- 附近已有等价信息时：一条图片/媒体规则不应强制在已有其他机制清楚提供等价信息的情况下，再堆叠冗余的 alt 文本、说明文字或转写稿。这正是本文规则与
alt-text、object-alt等规则共同遵循的「就近去重」原则。 - 多条规则同时失败时：如果某个媒体资产同时违反多条规则，应优先处理最直接阻碍辅助技术用户理解的那个问题。
值得注意的是，image-redundant-alt的元数据中列出了四条相关联规则：object-alt、color-contrast、identical-links-same-purpose、link-in-text-block，它们同属accessibility/visual区域，在真实审查中常常一起出现。例如 packages/content/rules/en/accessibility/object-alt.mdx 中<object>的 fallback 内容同样遵循「不冗余、可等价」的原则。
如何在代码审查中落地
SKILL.md 给出了面向审查者的操作流程，也可以直接作为团队 Code Review 的检查清单：
- Check（检查）：扫描所有图片的 alt 属性，查找 "image of"、"photo of" 等冗余短语，以及复制周围内容的文本。
- Fix（修复）：从 alt 属性中删除冗余短语，确保文本提供唯一、有描述性的信息。
- Explain（解释）：向作者说明屏幕阅读器已经会播报 "graphic" 或 "image"，因此 "image of" 之类的短语既多余又重复。
- Code Review（代码审查）：审查渲染后的标记与影响该规则的可交互状态，指出具体违反规则的元素、角色、标签、焦点行为或键盘交互，并说明如何用浏览器无障碍工具或辅助技术验证修复效果。
从仓库结构看，这条规则同时存在于两处：人类可读的 Markdown 规范文件 skills/image-redundant-alt/references/rule.md 和结构化内容源 packages/content/rules/en/accessibility/image-redundant-alt.mdx。后者以 frontmatter 形式沉淀了check、fix、explain、codeReview、aiContext等提示词，意味着这条规则不仅面向人工审查，也被设计为可供 Agent/LLM 在代码审查场景下直接调用——这一点从 SKILL.md 的 description（"Use when reviewing rendered HTML, interactive components, or design-system patterns..."）可以得到印证。
验证方法：自动化检查与人工验证
规则文档提供了两层验证策略，确保修复不只在源码层面生效，而是真正改善了渲染后的体验。
自动化检查
- 在浏览器开发者工具中检查**无障碍树（accessibility tree）**或无障碍面板，查看相关元素、角色与可访问名称（accessible name），确认 alt 内容出现在预期位置且无冗余。
- 运行自动化无障碍检查器，如axe DevTools或Lighthouse（在有条件时）。需要说明的是，axe 等工具通常能捕获「缺失 alt」这类硬性错误，而「alt 冗余」更多依赖审查者的判断力，因此自动化结果应结合人工复核。
人工检查
- 仅用键盘导航测试受影响的 UI，在真实渲染体验中确认规则成立。
- 如果该规则影响关键交互，用屏幕阅读器（VoiceOver、NVDA、JAWS）重测一条具有代表性的用户流程，实际听一遍修复前后的播报差异——"Graphic, image of a dog" 与 "Graphic, dog" 的区别，听一次就会理解这条规则的价值。
小结
冗余的图片替代文本是无障碍审查中最「低成本高收益」的修复项之一：它不涉及复杂的 ARIA 设计，只需删掉 "image of"、"photo of" 等重复词汇，或在与相邻文字重复时改用alt=""。作为 Front-End-Checklist 中accessibility/visual分类下的入门级规则，它与alt-text（提供有意义的 alt）、decorative-elements（隐藏装饰元素）共同构成了完整、不重复的图片无障碍方案：有信息就精准描述，无信息就安静隐藏，绝不重复朗读。
【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
