SuperAPI AI 工具集

alt-text

前端与建站

查看项目

更新于 10-16 04:32

技能介绍

用途:这是前端清单(front-end-checklist)中的一条无障碍规则,用于在代码审查阶段确保图片具备有意义的替代文本(alt text)。屏幕阅读器会朗读 alt 属性,缺失或无意义的 alt 会使视障用户无法获取图片信息;该问题同时违反 WCAG 2.1 成功准则 1.1.1(Level A,最低要求),搜索引擎也依赖 alt 索引图片内容。

主要能力(检查项):扫描代码库中所有 img 元素并验证——1)每个 img 都必须有 alt 属性,完全缺失即错误;2)装饰性图片使用 alt="",让屏幕阅读器忽略;3)信息性图片的 alt 应传达图片含义,而不只是文件名;4)作为链接的图片,alt 应描述链接目标;5)文字图片应在 alt 中重现文字。需标记缺少 alt、alt 等于文件名(如 alt="photo1.jpg")或使用 alt="image"、alt="photo" 等笼统值的情况。

修复方向:信息性图片描述其传达的内容(例如用 alt="Bar chart showing 40% increase in sales Q3 2024" 而非 alt="chart");装饰性图片加 alt="";链接图片描述目标(如 alt="Visit our Twitter profile");文字图片逐字复制文字到 alt;复杂图片(图表、信息图)用简短 alt 配合 aria-describedby 或可见说明提供更长描述。

原理:WCAG 2.1 SC 1.1.1 要求所有非文本内容提供文本替代;劣质 alt 并不优于无 alt;装饰图必须显式使用 alt="",否则部分屏幕阅读器会朗读文件名。

代码审查说明:审查与图片 alt 相关的图片资源、标记和交付配置,指出格式选择、尺寸或加载行为违反规则的具体文件或组件,并说明如何在 DevTools 中确认修复。完整实现细节、代码示例和框架特定指引见 references/rule.md,规则页为 https://frontendchecklist.io/rules/images/alt-text。本文资料未提供安装命令、价格或平台信息。