在现代 Web 开发中，数字可访问性（通常缩写为 A11y）不再是奢侈品或事后的想法，而是核心质量标准。创建每个人都可以导航的界面，无论身体或认知能力如何，都从语义 HTML 开始。
然而，在构建复杂的自定义 UI 组件（如手风琴、模式对话框和选项卡面板）时，标准本机 HTML 元素有时无法向辅助技术描述其角色或状态。这就是 WAI-ARIA（Web 可访问性倡议 - 可访问的富互联网应用程序） 发挥作用的地方。
在本文中，我们将介绍 WAI-ARIA 的基本规则，并剖析如何正确使用 role、aria-label 和 aria-hidden 等属性来增强应用程序的可访问性。
1. 为什么我们需要 WAI-ARIA？
HTML5 提供原生“语义”元素，例如 <button>、<nav>、<main> 和 <header>。浏览器自动将这些标签映射到辅助功能树，将它们转换为屏幕阅读器可以解释的角色和状态。
但语义差距出现在两个主要场景中：
- 构建不在 HTML 中原生表示的交互式小部件（例如，自定义下拉菜单、轮播或树）。
- 当动态状态变化（由 JavaScript 驱动）必须与辅助设备同步时（例如，当可展开部分折叠时进行通知）。
WAI-ARIA 充当桥梁，利用辅助技术准确解释应用程序的布局和状态所需的元数据来丰富本机 HTML 元素。
2. ARIA 的第一条规则：不要使用它
WAI-ARIA 规范具有所有开发人员必须首先学习的基本规则：
“如果您可以使用具有您需要的内置语义和行为的原生 HTML 元素或属性，而不是重新调整元素的用途并添加 ARIA 角色、状态或属性以使其可访问，那么就这样做。”
例如，如果您需要创建一个可单击的按钮，那么使用本机 <button> 元素比将 role="button" 附加到 <div> 元素要好得多。
本机 <button> 元素自然支持：
- 键盘焦点（自动添加到 Tab 键顺序）。
- 默认执行键（按 Enter 和 Space 按键时触发）。
- 明确的屏幕阅读器公告将其标识为“按钮”。
<!-- Anti-pattern: Requires manual javascript and tabindex configuration -->
<div role="button" tabindex="0" onclick="submitForm()">Submit</div>
<!-- Correct: Fully accessible and interactive by default -->
<button onclick="submitForm()">Submit</button>
3. WAI-ARIA 的核心属性和实践
当原生元素不够时，请小心利用 WAI-ARIA 属性。以下是 ARIA 套件中三个最常用的工具：
① role 属性（组件上下文）
定义特定元素做什么或是什么（例如，tablist、dialog、status或alert）。
<div role="tablist">
<button role="tab" aria-selected="true" id="tab-a">Tab A</button>
<button role="tab" aria-selected="false" id="tab-b">Tab B</button>
</div>
② aria-label 和 aria-labelledby （显式命名）
当不存在可见文本（如图标按钮）时提供可读文本标签，或将元素连接到标题。
<!-- Textless icon button labeled explicitly for screen readers -->
<button aria-label="Close Dialog">×</button>
<!-- Labeling a wrapper container using an existing header's ID -->
<h2 id="modal-title">Settings</h2>
<div role="dialog" aria-labelledby="modal-title">
<!-- Dialog Content -->
</div>
③ aria-hidden（隐藏视觉噪音）
从辅助功能树中排除纯装饰性视觉效果（如图标字体、SVG 或插图），防止屏幕阅读器阅读原始文本字形或无用元素。
<button>
<span class="icon-trash" aria-hidden="true"></span>
<span>Delete Item</span>
</button>
结论
WAI-ARIA 是一款功能强大的工具，旨在使丰富的动态界面变得易于访问。然而，不正确的 ARIA 配置（例如角色冲突或忽略键盘事件处理程序）实际上可能会使辅助技术用户的界面变得“更糟”。
仅当本机结构无法表示当前用户界面的状态和角色时，始终优先考虑干净、语义、本机 HTML 标记和层 WAI-ARIA。