当我初学ARIA时希望有人告诉我的事

可访问富互联网应用(ARIA)是处理网页可访问性时不可避免的技术。如果你从未接触过ARIA，这是个学习新知识的好机会；如果已有所了解，本文或许能帮你更深入理解。

本文内容

• 提供理解ARIA概念的正确思维方式
• 澄清常见误解
• 提供指导原则帮助你更好地理解和使用ARIA

ARIA是什么？

ARIA是在没有更合适的原生HTML元素或属性时，用于传达交互性、目的和状态的补充技术。它像调味料一样撒在标记中增强功能。

在HTML中添加ARIA是为屏幕阅读器和语音控制软件提供额外信息的方式：

• 交互性：内容可被激活或操作(如导航到链接目标)
• 目的：元素的用途(如收集姓名的文本输入框)
• 状态：内容的当前状态(如可展开/折叠的手风琴面板)

示例模式让辅助技术用户知道：

1. 某物是否可交互
2. 执行何种交互行为
3. 当前状态

ARIA的历史

ARIA最早发布于2006年9月26日，最新版本1.2发布于2023年6月6日。它诞生于HTML功能有限而需要让辅助技术理解交互体验的时期。

ARIA的使用规则

ARIA文档包含五条核心规则：

1. 尽可能使用原生元素
2. 不要改变原生元素的语义
3. 所有交互元素必须支持键盘操作
4. 不要在可聚焦元素上使用role=“presentation"或aria-hidden=“true”
5. 交互元素必须有名称

ARIA的分类体系

ARIA有结构化语法，围绕角色(roles)、状态(states)和属性(properties)构建：

• 角色：辅助技术读取并宣布的内容。HTML元素有隐含角色
• 状态和属性：描述元素特征的方式，可通过属性声明和值来定义

如何声明ARIA

ARIA作为HTML属性的扩展，是名称/值对的集合：

1
2
3
4
5
6

<button 
  aria-label="Stop"
  aria-pressed="true"
  type="button">
  <!-- SVG图标 -->
</button>

使用说明：

• 可在HTML元素上放置多个ARIA声明
• 声明顺序不重要
• 没有数量限制(但增加复杂度也提高出错几率)
• 可与class或id等非ARIA声明共存

ARIA的局限性

• 静默失败：错误的ARIA不会产生控制台错误
• 仅暴露存在性：添加ARIA不会自动"解锁"功能
• 支持不一致：规范存在≠辅助技术支持
• 复杂交互需测试：使用越不常见的ARIA，越需要实际测试

实用建议

1. 样式化ARIA：可通过CSS定位ARIA属性

   1 2 3

   nav[aria-label="Main"] [aria-current="true"] { border-bottom: 2px solid #ffffff; }

2. 测试中使用ARIA：编写UI测试时利用ARIA更可靠

   1 2	// 选择角色为button且名称为"Edit"的元素 const editMenuButton = await page.getByRole('button', { name: "Edit" });

3. 避免常见陷阱：

   • aria-label使用不当
   • 过度依赖ARIA创作实践指南
   • 仅测试macOS VoiceOver

结论

ARIA虽然复杂但优雅，它能确保残障人士与其他用户一样使用网络体验。正确使用语义HTML并辅以ARIA，是构建包容性网络的关键。