无障碍环境观察器用于实时查看网页的无障碍树结构、角色语义、名称描述、焦点顺序和对比度合规状态；通过高亮节点、扫描页面、检查属性、验证对比度及模拟焦点流，快速定位WCAG不符合项并验证ARIA解析。
你需要在火狐浏览器中实时查看网页的无障碍树结构、角色语义、名称描述、焦点顺序和对比度合规状态，以便快速定位 WCAG 不符合项并验证 ARIA 属性是否被正确解析——这正是“无障碍环境观察器”（Accessibility Inspector）的核心用途。
打开开发者工具并切换到无障碍检查器
在任意网页空白处右键→选择“检查元素”，或直接按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）唤出开发者工具。
点击顶部标签栏中的“可访问性”选项卡（图标为轮椅符号），该面板即为无障碍环境观察器的主界面。
若未看到该标签，请确认你使用的是 Firefox 76 或更高版本；旧版 Firefox 需升级后才内置此功能。
启用并操作无障碍观察器核心功能
第一步：在可访问性面板左侧，勾选“高亮可访问性节点”开关——鼠标悬停在 DOM 元素上时，会实时叠加显示其角色（role）、名称（name）、值（value）及是否支持键盘焦点。
第二步：点击面板右上角的“扫描页面”按钮（图标为放大镜+轮椅），触发全页无障碍树自动分析；扫描完成后，右侧将列出所有检测到的严重问题（如缺失 alt 文本、无名称的按钮、低对比度文本等）。
第三步：在左侧 DOM 树中点击任一元素，右侧“属性”区域会立即展开其完整的无障碍属性详情，包括 computed name、accessible name sources、ARIA 属性继承链，以及是否被屏幕阅读器实际通告。
注意：若某元素在右侧属性区显示“Not exposed to accessibility API”，说明它被 CSS visibility: hidden、display: none 或 aria-hidden="true" 彻底屏蔽，屏幕阅读器完全无法感知——这是常见却隐蔽的无障碍断裂点。
快捷验证对比度与焦点流
方法一：在 DOM 树中选中一个文本节点→右侧“对比度”区域会自动计算其前景色与背景色的比率，并标注是否满足 WCAG AA（4.5:1）或 AAA（7:1）标准。
方法二：点击面板顶部的“焦点导航模拟”按钮（图标为键盘 Tab 键）→用 Tab 键逐个遍历页面可聚焦元素，观察焦点顺序是否符合逻辑流向；若跳转错乱或跳过关键交互控件，说明 tabindex 或 focusable 属性配置有误。
方法三：勾选“显示焦点轮廓”→所有获得焦点的元素将强制渲染高亮轮廓线，避免因 CSS 重置 outline: none 导致视觉焦点丢失——这对键盘用户至关重要。
