可访问性树测试

概念概述

可访问性树测试（Accessibility Tree Testing）指的是：可访问性树测试针对屏幕阅读器所接收的计算语义进行断言，而非原始 DOM，从而更贴近真实辅助技术行为。

从更严格的定义看，Accessibility tree testing is an approach that queries the browser-computed accessibility tree, including roles, names, and states, to verify what assistive technologies would perceive. 该概念在工程实践中的价值，在于它能帮助团队用统一的语言描述一个具体的质量属性或设计约束，从而在评审与协作中减少歧义。

为什么需要它

It is used alongside automated audits to ensure interactive components expose correct semantics and focus behaviour. 它与 The Test Oracle Problem、Branch Coverage、Stress Testing Beyond Design Limits 等概念经常一起出现，用于解决相近的工程问题。理解它的适用场景，有助于在多种备选方案之间做出有依据的取舍，而不是凭直觉选择技术方案。

常见误解

• passing an automated audit proves a page is accessible
• querying by role and name is the same as querying by CSS class

需要避免的反模式

• asserting on DOM structure instead of exposed semantics
• relying only on lint-style rules and never testing keyboard flow

实践要点

1. The accessibility tree is what a screen reader actually consumes, so a button implemented as a styled div looks wrong there even when it renders correctly.
2. Querying by accessible role and name makes tests resilient to styling and structure changes while validating the semantics that matter.
3. Automated checks catch a limited class of issues, so they complement rather than replace manual keyboard and screen reader testing.

参考来源

https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree

代码示例

<div class="accordion">
  <h3>
    <button aria-expanded="true"
            aria-controls="panel-1"
            id="header-1">
      Section 1
    </button>
  </h3>
  <div role="region"
       aria-labelledby="header-1"
       id="panel-1">
    <p>Content for section 1</p>
  </div>
</div>

<div class="alert" role="alert" aria-live="assertive">
  Form submitted successfully!
</div>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<button aria-busy="false"
        aria-describedby="save-help">
  Save Changes
</button>
<span id="save-help" class="visually-hidden">
  Saves all changes to your profile
</span>

<div role="status" aria-live="polite" class="sr-only">
  Loading content...
</div>

<input type="text"
       aria-label="Search products"
       aria-describedby="search-hint"
       placeholder="Search...">
<p id="search-hint">Type at least 3 characters</p>

button:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}