找到需要仔细查看的图像
Alt 标签检查器
审核粘贴的 HTML 中的图像 alt 属性。将缺失的属性与故意空的替代项分开,检查每个图像源,然后导出您的发现。
Image alt audit
Your image counts and alt text review will appear here.
Alt 标签检查器: 你的支票告诉你什么
alt 标签检查器可帮助您找到需要注意其替代品的图像元素。在HTML中,alt是图像上的一个属性,而不是一个单独的标签。缺少属性、空值和有用的描述是三种不同的情况。
此本地审核检查您粘贴的 HTML 中的 img 元素。它不会获取页面、直观地判断图像、执行 JavaScript、加载图像或验证可访问性。它计算图像的出现次数,而不是对文件进行重复数据删除,因为同一图像在不同的上下文中可以服务于不同的目的。
缺少属性
没有 alt 的 img 元素需要审查。辅助技术可能会公布其文件名,而不是有用的替代方案。确定图像是传达信息还是装饰性的。
空的替代方案
明确的 alt="" 可能适合装饰图像。当图像不添加任何信息时,将其保留为空;当传达读者需要的信息时添加有用的文本。
仅空白
alt 内的空格单独列出。检查图像的用途,然后使用真正的空值进行装饰或使用有意义的文本来获取信息。
文字呈现
non-empty 值并不自动成为一个好的替代方案。检查它是否在上下文中描述了目的,而没有填充关键字、重复附近的文本或依赖文件名。
HOW IT WORKS
从支票到 有用的下一步
粘贴源或渲染的 HTML
从页面源或浏览器开发人员工具复制 HTML。仅粘贴网址并不能检索该页面。
查看每个类别
从缺失的属性开始,然后在上下文中查看空的替代项。过滤结果并比较图像源和替代文本。
修复并重新检查
更新您的模板或 CMS 字段,导出审核列表,然后在发布后审核新的 HTML。作为更广泛审查的一部分,使用辅助技术测试页面。
相同的属性,三种不同的决定
信息丰富的产品图片
<img src="mug.jpg" alt="Blue ceramic mug with a curved handle">描述图像提供的信息。这个例子为购物者提供了具体的视觉细节。
装饰隔板
<img src="divider.svg" alt="">空洞的替代品可以防止装饰性图像给阅读体验带来噪音。
尺码表,别无选择
<img src="size-guide.png">缺少替代品需要审查。除了简短的替代方案之外,复杂的图表可能还需要附近的文本或数据表。
For contextual guidance, read the W3C image alt decision tree.