HTML 辅助功能审核器
粘贴原始 HTML 并获得真正的 WCAG 可访问性审核:手工构建的 DOM walker 检查图像、表单标签、标题顺序和链接文本,以及根据真实 AA/AAA 阈值评分的真正相对亮度对比度计算器 — 无需外部库,也不会发送任何内容。
结果
大多数快速可访问性检查要么是肤浅的关键字扫描,要么是您必须像黑匣子一样信任的重量级库。该工具采用第三条路径:它使用浏览器自己的内置 DOMParser 解析您粘贴的任何 HTML(没有 axe-core、没有外部可访问性库、没有下载任何内容),然后使用一组反映常见、真实 WCAG 2.1 故障模式的手写检查来遍历生成的 DOM 树。这意味着逻辑是完全可检查的,并且审核完全在浏览器内运行:您粘贴的标记以及您测试的任何颜色对永远不会上传或发送到任何地方。
这些检查涵盖了真实页面中最常出现的故障:根本没有 alt 属性的 <img> 元素(真正的 WCAG 故障,与用于装饰图像的故意空的 alt="" 不同,后者正确地未标记),辅助技术无法知道它们的用途的表单控件(根据标签的每个真实路径进行检查 - 匹配的 <label for>,包装在 <label> 内,或 aria-label/aria-labelledby 属性),跳转的标题级别没有警告(<h1> 直接指向 <h3>,或者根本没有 <h1> 的文档,或者有多个),没有 href 或带有模糊的、脱离上下文的文本(如“单击此处”或“阅读更多”)的链接,以及粘贴完整 HTML 文档(不仅仅是片段)时缺少 lang 属性。
杰出的作品是真正的对比数学,而不是肤浅的“看起来可读”启发式。对于带有内联颜色和背景颜色的任何元素,该工具会读取这两个值,通过浏览器自己的 CSS 引擎将它们解析为真实的 RGB 数字(因此 hex、rgb()、hsl() 和命名颜色(如“tomato”)的工作方式相同),并计算每个值的精确 WCAG 相对亮度 — L = 0.2126×R + 0.7152×G + 0.0722×B,每个通道都经过伽玛校正首先使用真实的 sRGB 传输曲线 - 然后将它们组合到官方对比度公式中,(浅色 L + 0.05) / (深色 L + 0.05)。元素自己的字体大小和字体粗细决定是应用更严格的“普通文本”阈值还是更宽松的“大文本”阈值(18pt+ 或 14pt+ 粗体),并且立即对照所有四个真实 WCAG 数字检查结果:AA 为 4.5:1 和 3:1,AAA 为 7:1 和 4.5:1 — 永远不会崩溃为单个假好/坏判决。
这是完整可访问性审核的一个故意诚实、务实的子集,而不是认证工具:它不会评估 JavaScript 驱动的交互性、超出基本标签的 ARIA 小部件模式、键盘焦点顺序或任何需要实际渲染和运行页面的内容。将其视为快速的第一遍,在页面发布之前捕获一些最常见和最重要的 WCAG 故障(缺少替代文本、未标记的字段、损坏的标题层次结构、低对比度文本和模糊链接),同时进行(而不是代替)完整的手动审核或用于交付生产的任何内容的专用审核工具。