免费无障碍检查工具
在真实浏览器中对您的页面运行 axe-core 无障碍引擎，找出常见障碍 — 例如没有标签的表单字段、颜色对比度低、图片缺少替代文本以及 ARIA 错误 — 并了解如何修复。
此工具检查什么
替代文本
图片、图片按钮和其他非文本内容缺少屏幕阅读器可以读取的替代文本。
表单标签
输入框、复选框和下拉菜单没有无障碍标签，辅助技术无法说明它们的用途。
颜色对比度
文字颜色与背景过于接近，达不到 WCAG AA 对比度要求。
链接和按钮的名称
没有可读名称的链接和按钮 — 通常是纯图标按钮。
ARIA
无效的、不允许用在该元素上的，或缺少必需部分的 ARIA 角色和属性。
页面结构
页面语言、页面标题、地标区域以及来自 WCAG 和 axe-core 最佳实践的其他结构规则。
受影响的元素数量
对于每个问题（最多 25 种类型），列出未通过的元素数量以及一个可以找到它的示例位置。
检查的工作原理
我们在无头 Chromium 中加载您的页面，加入 axe-core 库，并在页面渲染完成后运行其默认规则集，因此由 JavaScript 添加的内容也会被测试。默认规则集涵盖 WCAG 2.x A 级和 AA 级规则以及 axe-core 的最佳实践。
每条未通过的规则会按其影响程度扣分：严重扣 15 分，较重扣 10 分，中等扣 5 分，轻微扣 2 分。扣分按规则计算，而不是按元素计算，因此缺少一个标签和缺少二十个标签扣分相同 — 问题详情会告诉您有多少元素受到影响。
自动化测试只能发现页面可能存在的部分无障碍问题。很多问题需要人来判断 — alt 文本是否真正有意义、键盘操作顺序是否合理、内容是否易于理解。请把此项检查当作起点，而不是合格证书。
我们常发现的问题
对比度低的文字
浅灰色文字、彩色按钮上的文字，以及用占位文字代替标签。
图片没有 alt 文本
徽标、产品照片和用作链接的图片。
表单字段没有标签
只靠占位文字说明的搜索框和订阅表单。
纯图标按钮和链接
菜单、关闭、社交媒体和购物车图标没有供屏幕阅读器读取的文字。
缺少页面语言
html 元素上没有 lang 属性，屏幕阅读器可能会使用错误的发音。
ARIA 使用不当
角色用在了错误的元素上，或引用了不存在的 ID。
如何修复
加深文字颜色或调浅背景
普通文字的对比度应至少达到 4.5:1，大号文字至少 3:1。浏览器开发者工具中的对比度检查器会显示该比值。
添加说明图片用途的 alt 文本
描述在上下文中重要的信息 — 对于图标链接，应写“下载价目表”，而不是“图标”。纯装饰性图片请使用 alt=""。
为每个字段提供可见标签
使用与输入框关联的 label 元素。如果设计上确实无法显示标签，可以使用 aria-label — 但可见标签对每个人都有帮助。
为图标按钮命名
添加视觉上隐藏的文字或 aria-label，例如 aria-label="Open menu"。
优先使用原生 HTML，而非 ARIA
真正的 button 或链接元素默认就是无障碍的。只有在没有合适的原生元素时才添加 ARIA。
也要手动测试
尝试只用键盘操作页面，并使用 NVDA 或 VoiceOver 等屏幕阅读器，找出自动规则无法发现的问题。
常见问题
如果我通过了此项检查，我的网站就符合 WCAG 吗？
不是。通过检查只表示自动规则没有发现问题。很多 WCAG 要求只能由人来检查，因此要达到合规还需要人工审查。
它会测试键盘导航或屏幕阅读器吗？
不会。axe-core 检查的是页面代码和计算后的样式。它无法判断 Tab 键顺序是否合理，也无法知道屏幕阅读器实际如何朗读页面 — 这些需要手动测试。
它使用哪个 WCAG 版本和级别？
axe-core 的默认规则集：WCAG 2.x A 级和 AA 级规则，以及最佳实践规则。不包括 AAA 级规则。
为什么修复了一个元素，评分却没有变化？
无论涉及多少元素，每条未通过的规则只扣一次分。只有当某条规则标记的所有元素都修复后，它才不再扣分。
它能检查需要登录的页面吗？
不能。我们只能测试无需登录即可公开加载的页面。