ARIA 的本质与定位

ARIA（无障碍富互联网应用）是处理 Web 无障碍性时不可避免的技术。它如同调味料，通过增强 HTML 标记为屏幕阅读器和语音控制软件提供额外信息：

• 交互性：内容可被激活或操作（如跳转链接）

• 用途：元素的预期功能（如收集姓名的文本输入框）

• 状态：内容的当前状态（如可展开/折叠的手风琴面板）

<!-- 示例：带ARIA的静音按钮 --><button aria-pressed="true">Mute</button>

ARIA 的历史脉络

• 诞生背景：2006 年 9 月 26 日发布首个版本，弥补 HTML 在交互体验表达上的不足

• 最新版本：1.2 版（2023 年 6 月），1.3 版即将发布

• 时代特征：设计理念反映 Windows XP 时代的操作系统交互范式

ARIA 五大黄金法则

1. 优先使用原生 HTML 元素

2. 不改变原生元素的语义

3. 所有交互必须支持键盘操作

4. 不在可聚焦元素上使用role="presentation"或aria-hidden="true"
   

5. 交互元素必须具有明确标签

ARIA 技术架构

角色分类系统

• 抽象角色：仅用于本体论分类，开发者禁止使用

• 常规角色：分为 widget、landmark 等类别

• 父子关系：如listitem必须存在于list父元素中

<!-- 错误示范 --><h2 role="sectionhead">Anatomy</h2>
<!-- 正确做法 --><section aria-labelledby="anatomy">  <h2 id="anatomy">Anatomy</h2></section>

状态与属性

• 状态：描述元素的动态特征（如aria-expanded）

• 属性：提供附加信息（如aria-label）

ARIA 声明规范

• 语法：标准的名称/值对属性

• 多声明：单个元素可包含多个 ARIA 属性

• 动态性：多数 ARIA 需根据应用状态动态更新

// 动态切换ARIA状态示例disclosureButton.addEventListener('click', () => {  const expanded = disclosureButton.getAttribute('aria-expanded') === 'true';  disclosureButton.setAttribute('aria-expanded', !expanded);  disclosureContent.hidden = expanded;});

关键注意事项

1. 支持性挑战：并非所有 ARIA 特性都得到辅助技术完全支持

2. 测试矩阵：需考虑操作系统+浏览器+辅助技术的组合验证

3. 常见陷阱：

4. aria-label滥用导致语音控制失效

5. aria-live区域配置复杂

6. ARIA 实践指南(APG)中的示范代码可能不实用

现代开发实践

CSS 与 ARIA 联动

/* 通过ARIA状态控制样式 */nav[aria-label="Main"] [aria-current="true"] {  border-bottom: 2px solid white;}

测试策略

// Playwright测试示例test('编辑菜单应正确标注', async ({ page }) => {  const editButton = await page.getByRole('button', { name: "Edit" });  await expect(editButton).toHaveAttribute('aria-haspopup', 'true');});

浏览器支持现状

• 跨平台差异：Windows 屏幕阅读器(NVDA/JAWS)占 78.2%市场份额

• macOS 局限：VoiceOver 存在诸多实现问题，不建议作为唯一测试环境

• 移动端：iOS VoiceOver 需单独测试验证

核心设计哲学

ARIA 本质是向辅助技术暴露界面交互模式的编程接口。其价值在于：

1. 将现代交互模式映射为传统辅助技术能理解的语义

2. 通过操作系统层级的无障碍 API 桥接不同技术栈

3. 保持残障用户操作体验与常规用户的一致性

"ARIA 如同优雅的翻译官，将现代 Web 的交互语言转换为辅助技术能理解的方言。"更多精彩内容 请关注我的个人公众号 公众号（办公 AI 智能小助手）公众号二维码

办公AI智能小助手