一目了然地查看 WCAG 审核的页面结构。检查侧面板中的标题、链接、地标等。包括人工智能指导。
A11y Navigation Auditor 可以可视化页面的结构辅助功能实现（标题、地标、辅助名称和实时 ARIA 状态），所有这些都在一个 Chrome 侧面板中。受 VoiceOver 的 Rotor（一种按类别列出标题、链接、表单和其他元素的功能）作为信息组织模型的启发，该面板显示了辅助技术所依赖的信息，使专业级结构审计快速而集中。
查看您的辅助功能实现实际包含的内容并一目了然地发现结构问题。
🔍 你会看到什么
▪️标题
完整的层次结构（h1–h6，包括 role="heading"），包含每个标题的可访问名称以及名称的来源。
▪️链接
每个链接的可访问名称和目标 URL，带有分类图标（导航/新窗口/页内锚点）和 aria-当前状态。
▪️表单控件
可访问的名称及其来源、元素类型/角色、自动完成值和实时 ARIA 状态徽章（aria-expanded、aria-pressed、aria-invalid 等）。
▪️地标
页面的完整地标结构 — 每个地标的类型、源 HTML 元素（<nav>、<main> 等）以及可访问的名称。
▪️图像和图形
缩略图预览、可访问名称和分类（信息/装饰/文本图像/链接图像）。
▪️桌子
可访问的名称、尺寸、标题单元格 (<th>) 和 <caption> 存在以及可访问的说明。
▪️ARIA 角色
WAI-ARIA 角色列在一个位置 - 交互式小部件（组合框、选项卡列表、菜单、对话框、滑块）以及结构/显示角色（组、工具提示、图形、仪表、提要）以及具有隐式角色的本机元素（<fieldset>、<figure>、<meter>、<dialog>）。查看每个角色的可访问名称、元素标签、aria-roledescription 和所需的属性/状态。
🛡️问题自动浮现
当您浏览结构时，问题会被内联标记为错误、警告或信息，因此您可以一目了然地确定优先级。检测包括：
▪️标题：跳级、空标题、丢失标题角色
▪️链接：空链接文本、不明确的文本、具有不同目的地的相同文本
▪️表单控件：缺少可访问的名称、缺少用户信息字段的自动完成功能、未链接的错误消息
▪️地标：缺少或重复的<main>、没有区分名称的地标
▪️图像和图形：缺少 alt、通用 alt 文本、文件名作为 alt
▪️表格：复杂表格中缺少标题或标题、范围/标题不正确
▪️ARIA 角色：缺少必需的属性/子项/父项、损坏的 ID 引用（aria-controls 等）、无效的 aria-haspopup 值、缺少可访问的名称
▪️目标大小：24×24px以下的交互元素与相邻目标的间距不足（SC 2.5.8）
每个发现都引用了 WCAG 成功标准（1.1.1、1.3.1、2.4.4、2.5.8、3.3.1、4.1.2 等）作为参考，但该工具并未完全涵盖每个标准的各个方面。
✨ v1.3.0 中的新功能：ARIA 角色选项卡和目标大小检查
第七个类别——“ARIA 角色”选项卡——在一个位置列出了 WAI-ARIA 小部件和结构角色，显示可访问的名称、所需的属性/状态、损坏的 ID 引用（aria 控件等）以及无效的 aria-haspopup 值。它还添加了 WCAG 2.5.8 目标大小（最小）检查，用于标记小于 24×24px 且与相邻目标间距不足的交互元素。
✨ v1.2.0 中的新功能：AI 指导（实验室）
由 Chrome 的内置人工智能 (Gemini Nano) 提供支持，现在每个问题都包含一个可选的“人工智能指导”按钮，可在面板中生成上下文感知提示。数据不会离开您的浏览器，无需 API 密钥，也无需支付令牌费用。一切都在设备本地运行。
*注意：此功能需要支持的 Chrome 版本，并启用 Prompt API 和 Gemini Nano。可用性可能会因您的设备规格而异。如果尚未安装模型，则需要下载模型（大约 4 GB）。
⭐ 主要特点
▪️无障碍名称显示
显示遵循 W3C 规范的每个元素的计算可访问名称及其来源 - 是否来自 aria-label、aria-labelledby、alt、<label>、标题或文本内容。
▪️实时 ARIA 监控
实时跟踪属性，包括 aria-expanded、aria-pressed、aria-checked、aria-selected、aria-invalid、aria-busy 和 aria-disabled。当您与页面交互时，面板会通过 MutationObserver 自动更新，无需手动重新扫描。当 aria-invalid 切换时，链接的错误消息（通过 aria-描述）会与其一起显示。
▪️点击突出显示
单击侧面板中的任意项目可滚动到并突出显示页面上的匹配元素。
📊 与其他工具的比较
专注于标题或地标等特定类别的工具无法显示完整图片，而标记覆盖工具会使页面变得混乱，并模糊您要检查的结构。即使是 DevTools 可访问性树也可能令人难以承受，为快速、高级的审核提供太多噪音。
A11y Navigation Auditor 通过将七个核心类别统一到一个专用侧面板中来弥补这一差距，让您能够集中查看重要的结构信息，而不会产生噪音。
⚠️ 限制
该工具重点关注通过静态 DOM 分析可检测的结构可访问性。它不涵盖颜色对比度、键盘可操作性、动态行为或实际屏幕阅读器兼容性。它不能替代全面的 WCAG 一致性测试。
💻 支持的浏览器
此扩展程序需要 Chrome 侧面板 API。它适用于 Google Chrome 114+ 和 Microsoft Edge 114+。由于缺乏侧面板 API 实现，不支持其他基于 Chromium 的浏览器（Arc、Brave、Vivaldi 等）。
*注：“AI Guidance”为 Google Chrome 独有（需要内置 AI/Gemini Nano 环境）。
🔒 隐私
我们不收集任何数据。从未发出任何网络请求。所有可访问性检查均在您的浏览器本地执行。
