HTML可访问性树的基本认识
HTML可访问性树到底是什么
在无障碍设计领域，HTML可访问性树指的是辅助技术（如屏幕阅读器）用来解释网页语义的信息结构。它不是直接等同于网页的DOM树，而是基于网页的语义标签、ARIA属性以及可访问性相关的状态，形成一个为用户所呈现的“可访问名称、角色和关系”集合。语义信息、标签语义和<可访问性属性共同决定了树的节点名称与作用。
当浏览器渲染页面时，会从文档对象模型（DOM）派生出可访问性树。DOM树关注元素的结构和样式，而可访问性树则面向外部使用者，确保辅助技术能够理解页面的功能与用途。理解二者的关系有助于开发者避免依赖仅仅的视觉呈现来传达信息。
可访问性树与DOM树的关系
尽管HTML可访问性树从 DOM 派生，但并不总是完全等同。某些元素可能通过隐藏、显示属性或hidden属性被从可访问性树中排除，或者通过aria-hidden="true"被显式隐藏。ARIA属性和semantic HTML标签会在树中暴露额外的语义信息。
通过理解关系，开发者可以确保在视觉呈现之外仍然提供清晰的导航结构。例如，使用nav、main、role等元素能帮助<屏幕阅读器正确地解读页面的结构层级。
通过浏览器开发者工具快速检查可访问性树
在Chrome中查看Accessibility树的步骤
在<Chrome浏览器中，打开开发者工具后，选中一个页面元素，切换到元素视图，随后在右侧面板找到Accessibility相关信息。通过这里的可访问性树视图，可以直观地看到元素的名称、角色、属性和状态，以及屏幕阅读器将如何解释该元素。
如果某个元素没有显示正确的名称或角色，可以从aria-label、aria-labelledby、aria-describedby等属性入手进行诊断。此时你所看到的<节点名称和<展现的角色将直接影响无障碍体验。
对比其他浏览器的做法
在<Firefox、Edge等浏览器中，同样有专门的无障碍调试工具。它们通常提供独立的无障碍检查器或集成在开发者工具中的Accessibility标签。通过对比，可以验证同一元素在不同实现上的可访问性一致性。
虽然界面与操作略有差异，但核心理念是一致的：查看元素的名称、角色、是否隐藏、是否可聚焦，并逐项验证ARIA属性的正确性。如果发现名称或角色不匹配，应优先使用更语义化的HTML标签来表达意图。
验证工具与方法
使用DevTools的Accessibility面板进行验证
DevTools的Accessibility面板提供了对当前选中元素的完整无障碍信息，包含可访问性树的结构、节点级别的名称/角色以及ARIA属性的实际值。通过检查这些字段，可以快速定位无障碍问题。
另外，DevTools也显示了元素是否对键盘导航可访问、是否被隐藏以及可能的冲突属性。借助这些信息，开发者可以在本地验证修改的影响。
<!-- 示例: 语义化 HTML 提升可访问性树的质量 -->
<header><h1>站点标题</h1><nav aria-label="主导航"><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li></ul></nav>
</header>
<main><section><h2>内容区</h2><p>示例文本</p></section>
</main>
<!-- 通过正确的标签与属性，HTML可访问性树会更完整 >-->
通过脚本快速检查常见无障碍问题
如果要在自动化层面进行快速检查，可以编写一个简单的脚本，遍历页面中的交互元素并输出常见的无障碍属性情况。以下示例演示了如何收集可访问性相关的属性并输出报告。脚本化检查有助于在持续集成中快速反馈问题。
// 示例: 汇总页面中可访问性相关属性
const elems = Array.from(document.querySelectorAll('button, [role], [aria-label], [aria-labelledby], [aria-describedby], a[href], input, select, textarea'));
const report = elems.map(el => ({tag: el.tagName,role: el.getAttribute('role') || '',ariaLabel: el.getAttribute('aria-label') || '',labelledBy: el.getAttribute('aria-labelledby') || '',describedBy: el.getAttribute('aria-describedby') || '',isHidden: el.hasAttribute('aria-hidden') || el.hidden,isFocusable: el.hasAttribute('tabindex') || /^(A|BUTTON|INPUT|TEXTAREA|SELECT)$/i.test(el.tagName)
}));
console.log(JSON.stringify(report, null, 2));利用Lighthouse等工具进行自动化验证
除了浏览器本身，Lighthouse等工具提供了针对可访问性的自动化评估。通过命令行运行可以得到详细的报告，帮助快速定位无障碍问题的来源。以下是一个常用命令示例，适用于CI场景。
lighthouse https://example.com --output html --only-categories=accessibility