ARIA — 无障碍术语表

WAI-ARIA——无障碍富互联网应用——是 W3C 规范，用于填补一个特定空白：当原生 HTML 元素不足以描述自定义 UI 控件时，ARIA 提供了一套角色、状态和属性词汇表，供辅助技术（尤其是屏幕阅读器）理解。

ARIA 的本质与边界

ARIA 是 HTML 的附加层，不添加行为。在 <div> 上设置 role="button" 会使屏幕阅读器将其朗读为按钮，但不会使该 <div> 可聚焦，不会添加键盘处理逻辑，也不会添加视觉样式。所有这些都需要开发者自行实现。

这正是生产环境中大多数 ARIA 缺陷的根源：开发者添加了角色便停止，随后发布了一个无法响应 Enter 或空格键、无法通过 Tab 键访问、也没有焦点指示器的”按钮”。

ARIA 第一规则

若能使用具备所需语义和行为的原生 HTML 元素，则应使用原生元素。

编写的每一行 ARIA 代码，都意味着手动重新实现了一份 HTML 语义。<button> 本身即可被朗读为按钮、可聚焦、响应 Enter 和空格键，并自带焦点环——无需任何额外代码。而 <div role="button" tabindex="0"> 加上自定义键盘处理程序，只能以更多代码、更脆弱的方式达到相同效果。

主要类别

ARIA 定义了三类属性：

角色（Roles）——元素是什么（role="button"、role="dialog"、role="navigation"、role="alert"）。完整角色列表超过80条；WAI 的《ARIA 创作实践指南》将其分为地标角色、部件角色和文档结构角色。
状态（States）——元素当前的状态（aria-expanded="true"、aria-checked="false"、aria-disabled="true"）。状态在运行时动态变化。
属性（Properties）——元素之间的关系（aria-labelledby="title-id"、aria-describedby="help-id"、aria-controls="menu-id"）。属性通常是静态的。

ARIA 其余三条规则

W3C 在”尽可能使用原生 HTML”之后的五条规则序列：

除非确有必要，否则不要改变原生语义。（<h1 role="button"> 会使屏幕阅读器困惑：这究竟是标题还是按钮。）
所有交互式 ARIA 控件必须支持键盘操作。
不得在可聚焦元素上使用 role="presentation" 或 aria-hidden="true"。
所有交互式元素必须具有可访问名称。

遵循这五条规则可消除80%以上的 ARIA 缺陷。

参考资源

最实用的操作性参考资料是**《ARIA 创作实践指南》**（APG），其中提供了常见部件（组合框、对话框、树形视图、选项卡）的端到端实现模式，包含键盘交互表和 DOM 示例。