自动化无障碍测试

概念定义

WCAG 成功标准分为机器可查规则与人工判断标准。自动化引擎编码前者并跑在真实 DOM 上——廉价、快速、且对自身覆盖上限诚实。

工作机制

引擎遍历无障碍树并应用规则：输入须有程序关联标签、图片须有可访问名称、标题须嵌套、颜色对须满足对比度、landmark 与 role 须合法。违规带严重级别与规则 id，可映射到文档。接入点：组件单测、跨路由跨状态的 e2e 扫描。

使用场景

持续运行——每次组件构建、CI 中每次页面渲染，且覆盖交互后状态。把规则引擎当作无障碍的编译器：违规像类型错误一样阻断合并。

常见误区

“axe 报绿即可访问”不成立：自动规则约抓到一半问题，判断型那一半需要人加读屏器。只扫默认路由状态会放过焦点陷阱里的对话框；删内容而不是选无障碍色板来消对比度告警是自欺；对比度规则读计算样式，文字背后的背景图能逃逸。“零违规但键盘不可用”是真实且常见的状态。

代码示例

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

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

<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>