初识ARIA时我希望知道的那些事

ARIA（可访问富互联网应用）是处理网页可访问性时不可避免的技术。无论你是初次接触还是已有了解，本文都将提供宝贵见解。

ARIA是什么？

ARIA是当原生HTML元素或属性不足以传达交互性、目的和状态时的解决方案。它如同调味料，为标记语言增添额外信息层：

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

1

<button aria-pressed="true">静音</button>

此例中：

1. <button>元素告知辅助技术这是可点击按钮
2. “静音"文本说明按钮功能
3. aria-pressed="true"表示按钮处于按下状态

ARIA的历史脉络

ARIA诞生于2006年9月26日（首版发布），旨在弥补HTML在交互体验表达上的不足。最新版本1.2发布于2023年6月，1.3版本即将推出。

ARIA五大黄金法则

1. 优先使用原生元素：如用<a>替代<div role="link">
2. 不改变原生语义：避免将标题元素改为标签页
3. 所有交互必须支持键盘操作
4. 不在可聚焦元素上使用role="presentation"
5. 为交互元素提供明确名称

ARIA分类学

角色(Roles)

• 抽象角色：仅用于本体论，开发者禁止使用
• 分类体系：如listitem必须包含在list父元素中

1
2
3
4
5
6
7

<!-- 错误示范 -->
<h2 role="sectionhead">解剖学与生理学</h2>

<!-- 正确做法 -->
<section aria-labelledby="anatomy">
  <h2 id="anatomy">解剖学与生理学</h2>
</section>

状态与属性

• 状态：描述元素特征（如aria-expanded）
• 属性：提供额外信息（如aria-label）

常见陷阱

1. 冗余声明：无需为原生元素重复声明角色

   1 2	<!-- 冗余 --> <button role="button">保存</button>

2. 错误命名：避免在名称中重复角色类型

   1 2 3 4 5

   <!-- 不当 --> <button aria-label="保存按钮">...</button> <!-- 恰当 --> <button aria-label="保存">...</button>

3. 特殊角色限制：如code、strong等角色禁止设置可访问名称

支持性挑战

ARIA的实际支持取决于三层架构：

1. 操作系统版本
2. 辅助技术及版本
3. 浏览器及版本

建议测试矩阵：

• Windows + NVDA/JAWS（占桌面屏幕阅读器78.2%份额）
• iOS VoiceOver（占移动端70.6%份额）
• macOS VoiceOver（注意其与Windows实现的差异）

实用技巧

CSS整合

1
2
3
4

/* 高亮当前页面导航项 */
nav[aria-label="主导航"] [aria-current="true"] {
  border-bottom: 2px solid white;
}

自动化测试

1
2
3

// Playwright测试示例
const editButton = await page.getByRole('button', { name: "编辑" });
expect(editButton).toHaveAttribute('aria-haspopup', 'true');

关键认知

• ARIA仅向辅助技术暴露信息，不自动实现交互功能
• 动态状态管理是ARIA的核心应用场景
• 过度使用ARIA会增加不可预测性
• ARIA Authoring Practices Guide需谨慎参考

通过理解这些原则，开发者可以更自信地创建真正包容的Web体验，让所有用户都能平等享受数字服务。