Web 可访问性状态（Accessibility State）

1. 基本概念
Web 可访问性状态是描述用户界面（UI）组件当前动态属性的信息，例如一个复选框是否被选中、下拉菜单是否展开、输入框是否必填等。这些状态通过无障碍技术（如屏幕阅读器）传达给残障用户，帮助他们理解组件的实时交互状态。状态与静态的角色（Role）、属性（Attributes） 不同，它随用户操作而动态变化。

2. 常见状态类型及示例

• 布尔状态：
  • aria-checked：表示复选框或单选按钮的选中状态（true/false/mixed）。
  • aria-disabled：表示组件是否不可交互（如灰色按钮）。
• 枚举状态：
  • aria-expanded：表示可展开/折叠的内容（如菜单、树形列表）是否展开。
  • aria-pressed：表示按钮的按压状态（适用于切换按钮）。
• 数值状态：
  • aria-valuenow：表示进度条、滑块等组件的当前值。

3. 状态与属性的区别

• 属性（Attributes） 通常是静态的，定义组件的初始特性（如 aria-label 描述组件用途）。
• 状态（States） 是动态的，需通过 JavaScript 实时更新。例如，用户点击菜单后，需将 aria-expanded 从 false 改为 true。

4. 状态在无障碍树中的传递
当状态改变时，浏览器会更新无障碍树（Accessibility Tree），并通过可访问性API（如 Windows 上的 UI Automation）通知辅助工具。例如：

• 屏幕阅读器会朗读：“菜单按钮，已展开”。
• 焦点管理工具可能高亮当前激活的组件。

5. 实践要点与代码示例

• 状态必须与视觉界面同步：
  若一个选项卡被选中，需同时设置 aria-selected="true" 并更新样式。
• 动态更新示例：

  <button aria-expanded="false" onclick="toggleMenu()">菜单</button>
  <script>
    function toggleMenu() {
      const button = document.querySelector('button');
      const expanded = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', !expanded);
    }
  </script>
  

6. 相关标准与兼容性

• WAI-ARIA 1.2 规范：明确定义了所有状态及其适用场景。
• 兼容性：现代屏幕阅读器（如 NVDA、JAWS）均支持主流状态，但需避免滥用（如对非交互元素添加状态）。

7. 测试与验证

• 使用浏览器开发者工具的无障碍检查器（如 Chrome DevTools）查看实时状态。
• 结合屏幕阅读器测试状态变更的语音反馈是否准确。