Loading...
Loading...
粘贴 HTML 按 WCAG 2.2 AA 检查,并内置实时对比度速查。
无障碍问题最容易被引入、也最容易被忽略,因为页面在你眼里看起来一切正常。这个检查器像浏览器一样解析你的 HTML,标出最常把人挡在门外的问题:没有 alt 的图片、没有标签的表单项、屏幕阅读器念不出名字的图标按钮。
粘贴一个页面或组件,它会跑一组 WCAG 2.2 AA 检查:缺失 alt、表单控件无可访问标签、纯图标按钮和链接没有名称、标题层级跳级、正值 tabindex、键盘到不了的可点击 div、重复 id、缺失 lang 属性,以及从样式里能读到的颜色对的低对比度。还有一个实时对比度速查,让你用肉眼测任意前景背景组合。一切都用页面自带的 DOM 解析器在浏览器里跑,不上传。
标出没有 alt 属性的图片,以及缺少真实 label、aria-label 或 aria-labelledby 的表单控件。
抓出纯图标的按钮和链接,屏幕阅读器会把它们念成「空」。
标题跳级、正值 tabindex、没有键盘路径的可点击 div,以及重复 id。
对样式里找到的颜色与背景对计算对比度,低于 4.5:1 的标出来。
选一个文字色和背景色,立刻看到比值和正文/大字的 AA 判定。
用内置 DOM 解析器,你的代码不离开页面。
从浏览器元素检查器里复制渲染后的 HTML,而不是源模板,才能看到用户真正收到的东西。
把页面或组件的 HTML 粘到左边面板。
看右侧命中,每条都标了对应的 WCAG 成功准则。
照内联指引先修 error 再修 warning。
用对比度速查把没通过的颜色对调到达标。
组件上线前先过一遍,趁修起来还便宜。
生成的 HTML 经常漏掉 alt 和标签,在真实用户碰到之前抓住它。
每条命中都标了成功准则,边修真实代码边把标准记住。
用实时比值敲定配色,而不是凭感觉猜它过不过。
检查器用浏览器 DOMParser 解析你的 HTML,在生成的树上查询已知的无障碍问题。对比度用标准 WCAG 相对亮度公式,作用于它从内联样式和样式块里能提取到的颜色。
所有解析和分析都在本地完成。代码、颜色和结果都不会发往任何地方。
一次解析加几条选择器查询,所以命中会随你编辑输入即时更新。