配色与无障碍工具箱
图片与设计 仅本地处理
网页无障碍检查与修复指南
本地 axe-core 审计使用 axe-core 审计本地 HTML、检查 WCAG 问题、比较基线并规划可执行修复。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nobuf accessibility review sample</title>
<style>body{font-family:sans-serif;padding:2rem;color:#999;background:#fff}.card{padding:1rem;border:1px solid #ddd}</style>
</head>
<body>
<h1>Account</h1>
<h3>Profile settings</h3>
<main class="card">
<img src="https://tracker.example/avatar.png">
<p><a href="#"></a></p>
<input type="email" placeholder="Email address">
<button aria-labeledby="missing">Save</button>
</main>
</body>
</html>已清理本地预览
脚本与远程加载已阻止使用方法
- 01
载入安全 HTML 预览
粘贴或打开有大小限制的 HTML；活动和远程资源会先被移除，再进入同源沙箱 iframe。
- 02
运行无障碍审计
执行所选 axe-core WCAG 标签，筛选违规与待人工复核项，并检查精确目标、失败摘要与修复建议。
- 03
验证改进并报告
检查文档结构与人工测试提示，保存基线、比较再次运行结果，并导出 JSON 或 Markdown 证据。
常见问题
能证明页面符合 WCAG 吗？
不能。自动化只能发现部分障碍；符合性还需要专家审查、键盘测试、辅助技术与内容判断。
可以抓取公开网址吗？
不可以。Cloudflare Pages 静态页面无法安全绕过跨域限制；本工具审计粘贴或本地 HTML 的受控预览。
为什么有些结果是待人工复核？
当规则需要人工判断或上下文不可用时，axe-core 会返回 incomplete；检查器会将其与已确认的自动化违规分开。
有哪些规则？
预设覆盖 axe-core 的 WCAG 2.x、2.1、2.2 A/AA 标签或最佳实践检查，具体规则取决于打包的 axe-core 版本。
相关工具
继续使用其他专注的浏览器端工具。