WAI-ARIA

以下是关于 WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）的核心知识梳理。

---

一、WAI-ARIA 的基本概念

1. 定义与作用

   • WAI-ARIA 是一套由 W3C 制定的技术规范，旨在通过 语义补充 使动态 Web 应用（如单页应用、复杂 UI 组件）对辅助技术（如屏幕阅读器）更可访问。
   • 核心目标：为无法通过原生 HTML 语义化标签表达的 UI 元素（如自定义控件、动态内容）提供无障碍支持。

2. 适用场景

   • 当使用非语义化标签（如 <div>、<span>）构建交互组件时（如模态框、树形菜单）。
   • 动态内容更新（如 AJAX 加载、实时通知）需要告知辅助技术内容变化。
   • 复杂控件的状态管理（如展开/折叠、进度条、滑块）。

---

二、WAI-ARIA 核心属性

WAI-ARIA 属性分为三类：角色（Roles）、状态（States） 和 属性（Properties）。

1. 角色（Roles）

• 定义：描述元素的类型或功能，覆盖原生 HTML 的语义。
• 常见角色：
  • 基础组件：button、link、checkbox、radio、textbox。
  • 复合组件：menu、tablist、tree、dialog（模态框）、alert（警告信息）。
  • 文档结构：banner（页眉）、navigation、main、complementary（侧边栏）、region。
  • 动态区域：status（实时状态更新）、log（日志流）、timer。

2. 状态（States）

• 定义：描述元素的当前状态，通常动态变化。
• 关键属性：
  • aria-disabled：禁用状态（如不可点击的按钮）。
  • aria-expanded：表示可展开/折叠的内容（如菜单）。
  • aria-checked：复选框或单选框的选中状态。
  • aria-selected：标记当前选中的项（如 Tab 标签）。
  • aria-hidden：隐藏元素（对辅助技术不可见）。
  • aria-invalid：标记输入验证失败。

3. 属性（Properties）

• 定义：描述元素的特性或关系。
• 关键属性：
  • aria-label：为元素提供简短的可访问名称（优先级高于元素内部文本）。
  • aria-labelledby：关联另一个元素的 ID 作为标签（适用于复杂标签）。
  • aria-describedby：关联描述性文本的 ID（如输入框的提示信息）。
  • aria-controls：指向受当前元素控制的另一个元素（如按钮控制的下拉菜单）。
  • aria-live：标记动态更新区域的重要性级别（polite、assertive、off）。
  • aria-atomic：与 aria-live 配合使用，控制是否读出整个区域内容。

---

三、动态内容与 ARIA 实时区域

1. aria-live 区域

• 用途：告知辅助技术动态更新的内容（如实时通知、聊天消息）。
• 礼貌级别：
  • aria-live="polite"：辅助技术会在空闲时通知用户（适合非紧急更新）。
  • aria-live="assertive"：立即通知用户（用于关键信息，如错误提示）。
  • aria-live="off"：默认值，不通知。

2. 示例代码

<div aria-live="polite" id="notification">
  <!-- 动态更新的内容会通过 JS 插入此处 -->
</div>

---

四、WAI-ARIA 最佳实践

1. 优先使用原生 HTML 语义化标签

   • 能用 <button> 就不要用 <div role="button">。
   • 原生标签自带键盘交互和默认 ARIA 语义。

2. 避免过度使用 ARIA

   • 错误示例：为 <nav> 添加 role="navigation"（冗余）。
   • 正确做法：直接使用 <nav>。

3. 确保键盘可操作性

   • 自定义组件需支持键盘导航（如 Tab、Enter、箭头键）。

4. 结合 aria-* 与原生语义

   • 示例：为 <input type="search"> 添加 aria-controls="search-results"。

---

五、辅助工具与测试

1. 屏幕阅读器测试

   • 工具：NVDA（Windows）、VoiceOver（Mac）、JAWS。
   • 测试步骤：用键盘导航，验证 ARIA 角色、状态是否被正确识别。

2. 自动化检测工具

   • Lighthouse（Chrome DevTools）：检查 ARIA 误用。
   • axe DevTools：扫描可访问性问题。

3. 浏览器开发者工具

   • Chrome 的 Accessibility 面板：查看元素的 ARIA 属性计算值。

---

六、常见错误与避坑指南

1. 角色冲突

   • 错误：同时使用原生语义和 ARIA 角色（如 <h1 role="button">）。
   • 修复：移除冗余的 role。

2. 未关联标签

   • 错误：自定义输入框未关联 aria-labelledby 或 aria-label。
   • 修复：确保每个可交互元素都有明确的标签。

3. 动态状态未更新

   • 错误：展开菜单时未更新 aria-expanded。
   • 修复：通过 JavaScript 动态同步状态。

---

通过掌握以上内容，你可以为复杂的前端组件提供完整的无障碍支持，确保所有用户（包括残障人士）都能平等访问 Web 应用。