为图片按钮提供 alt 文本Front-End-Checklist 中 input typeimage 的可访问名称规则实战指南【免费下载链接】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 中 skills/input-image-alt/SKILL.md 及其 references/rule.md 为骨架结合仓库中结构化规则源文件 packages/content/rules/en/accessibility/input-image-alt.mdx 展开讲解。你将掌握为什么input typeimage必须携带alt属性、alt 文本应该描述什么、如何写出正确的 alt 值以及如何用自动化工具和人工测试验证修复效果从而让表单图片按钮对屏幕阅读器用户同样可用。规则速览一条 critical 级可访问性规则在 Front-End-Checklist 的规则体系中本规则属于accessibility可访问性分类下的forms表单子分类元数据标记为priority: critical、difficulty: beginner、estimatedTime: 55 分钟内可完成检查来源为 frontendchecklist.io。规则的核心主张只有一句话input元素若typeimage必须携带描述性的alt属性。这一点在 README.md 的检查清单中同样以 critical 级别列出Input elements of typeimage must have a descriptive alt attribute.从语义上看input typeimage是一个以图片呈现的表单按钮它既承载视觉内容图片本身又承担交互功能提交表单或触发操作。正是这种既是图片又是按钮的双重身份使它成为 alt 文本规则的关键对象——它不属于装饰性图片的豁免范围。为什么缺少 alt 会出问题原文档点明了最直接的后果Without alt text, screen readers may read the file name of the image, leaving users unable to determine the function of the button.当input typeimage没有alt属性时屏幕阅读器无法从元素上获得可访问名称accessible name只能退而求其次去朗读图片文件名如go.png、submit-btn.png用户听到的是一串毫无语义的字符根本无法判断点击这个按钮会发生什么。在 WCAG 2.1 的成功标准 SC 1.1.1Non-text Content非文本内容以及 HTML 规范对 image button state 的定义中这都属于可访问名称accessible-name要求而非装饰性图片豁免条款。也就是说对于普通装饰性图片alt空 alt是正确写法但对于图片按钮空 alt 反而是错误——因为它是一个功能性元素。正确与错误的写法对照原文档给出了三组正反示例这是本规则最核心的实操内容。正确实现input typeimage srcsearch-icon.png altSearch input typeimage srcsubmit-btn.png altSubmit Registration要点alt 描述的是按钮被点击后执行的动作而不是图片的视觉效果。错误实现!-- No alt text -- input typeimage srcgo.png !-- Describing the icon instead of the action -- input typeimage srcmagnifying-glass.png altMagnifying glass第一行完全缺少alt属性屏幕阅读器只能读出文件名go.png第二行虽然写了 alt但描述的是图标本身放大镜而非动作搜索——这在语义上仍然无法传达按钮的功能。从源码结构看packages/content/rules/en/accessibility/input-image-alt.mdx 中保留了完全一致的示例并配套了供人工审阅使用的 prompts 字段check / fix / explain / codeReview说明该规则在设计上同时服务于人工审查与 AI 代理审查两种场景。为什么 alt 必须描述动作而非外观原文档用三个要点解释了这一设计意图功能清晰性Functional Clarity按钮 alt 应描述动作如 Search而不是视觉如 Magnifying glass。用户需要知道的是点击后会发生什么而不是图片长什么样。可访问性Accessibility屏幕阅读器用户必须能通过 alt 文本推断元素被激活后产生的效果。兜底行为Fallbacks如果图片加载失败浏览器会以文本形式展示alt内容用户依然能辨认出这是一个表单按钮并正常使用表单——alt 实际上承担了图片的文本替身角色。这一点与仓库中同属表单可访问性区域的其他规则形成呼应在 packages/content/rules/en/accessibility/input-image-alt.mdx 的relatedRules中本规则与select-name、form-labels、form-field-multiple-labels、aria-command-name建立了关联原因均为同属 accessibility/forms 区域通常一起审查。换句话说可访问名称accessible name是表单可访问性的一条主线下拉框要有名称、表单控件要有标签、图片按钮要有动作化的 alt——审查时应当将它们作为一个整体来检查。最佳实践清单原文档给出三条简明的最佳实践✅面向动作Be Action-Oriented使用动词如 Search、Login、Sign Up。✅保持简短Keep it Short按钮 alt 一到两个单词通常就足够了。❌不要留空Dont leave it empty与装饰性图片不同图片按钮必须要有 alt 文本因为它是功能性元素。例外情况原文档也明确了例外边界避免规则被教条化误用Logo、纯装饰性文字处理、以及用作文档说明的截图只要其可访问替代内容accessible alternative被恰当地提供可以作为合理例外。不应强加冗余内容当附近已有其他机制清晰提供等价信息时图片或媒体规则不应强行要求重复的 alt、字幕或文字记录。多规则命中时的取舍如果同一媒体资产同时违反多条规则应优先处理最直接阻碍辅助技术用户理解的那个问题。这些例外强调了一个原则alt 文本的目标是等价的信息传递而非形式上的补齐。验证与修复从自动化检查到屏幕阅读器实测原文档的 Verification 部分给出了双层验证路径这也是进行 Code Review 时的完整闭环。自动化检查检查浏览器**可访问性树accessibility tree**或可访问性面板accessibility pane中目标元素对应的 role 与可访问名称是否完整。input typeimage在可访问性树中的角色是 button其可访问名称来源即为alt属性。运行自动化可访问性检查器如axe或Lighthouse。axe 会将缺失alt的图片按钮报告为image-alt违规Lighthouse 的可访问性审计同样会标记该问题。人工检查用纯键盘操作Tab 导航测试受影响的 UI确认焦点可达、按钮可激活并在渲染后的实际体验中验证规则成立。如果该规则影响关键交互用屏幕阅读器如 NVDA、VoiceOver、TalkBack重测一条具有代表性的用户流程确认朗读出的可访问名称与按钮动作一致。在 Code Review 层面SKILL.md 的Code Review提示要求审查渲染后的标记rendered markup及交互状态精确定位违反规则的元素、角色、标签、焦点行为或键盘交互并说明如何借助浏览器可访问性工具或辅助技术验证修复效果。修复流程Check → Fix → Explain仓库将该规则设计为可执行的三步流程对应 SKILL.md 中的 Check / Fix / Explain 三个动作也直接映射到 packages/content/rules/en/accessibility/input-image-alt.mdx 的prompts字段Check检查验证所有input typeimage元素都带有非空的alt属性。Fix修复为input typeimage添加描述按钮点击后所执行动作的alt属性例如 Search、Submit。Explain解释向团队或作者解释为什么图片按钮需要替代文本以向无法看到图片的用户传达其功能。这套 check → fix → explain 的结构意味着该规则不仅用于发现和修复问题还要求审查者能解释背后的可访问性原理推动团队整体理解而非机械修修补补。如何在当前仓库中定位与复用本规则如果你正在 Front-End-Checklist 仓库中检索或引用这条规则以下路径是完整的证据链Skill 定义skills/input-image-alt/SKILL.md——包含规则摘要、Quick Reference、Check/Fix/Explain 提示词与 Code Review 指引供人工或 AI 代理按步骤执行审查。规则全文skills/input-image-alt/references/rule.md——代码示例、Why It Matters、Best Practices、Exceptions 与 Verification 的完整版本是本文章内容的主要来源。结构化规则源文件packages/content/rules/en/accessibility/input-image-alt.mdx——机器可读的 frontmatter含优先级、耗时、提示词、关联规则、标准来源是生成站点与自动化工具消费的数据源。检查清单README.md 中以 checkbox 形式列出该规则标注 Critical 级别可直接作为项目审计清单项勾选。小结input typeimage的 alt 文本是表单可访问性中最容易被忽略、但影响直接的一个细节它既是 WCAG 2.1 SC 1.1.1 的可访问名称要求也是表单可用性的兜底保障。遵循面向动作、保持简短、绝不留空三条原则配合可访问性树检查、axe/Lighthouse 自动化扫描与屏幕阅读器人工实测即可让图片按钮对键盘用户、屏幕阅读器用户以及图片加载失败场景下的所有用户保持可用。【免费下载链接】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），仅供参考