当我开始学习ARIA时，希望有人告诉我的事

可访问富互联网应用程序（ARIA）是处理Web可访问性时不可避免的技术。如果你之前没有接触过ARIA，这是个学习新知识的好机会；如果你已经有所了解，本文可能会帮助你更好地理解它甚至学到新内容！

这些是我在开始Web可访问性之旅时希望有人告诉我的所有内容。本文将：

提供处理ARIA概念的心态
揭穿一些常见误解
提供指导思路帮助你更好地理解和使用它

本文不包含的内容

这不是如何使用ARIA构建可访问网站和Web应用程序的配方手册，也不是修复不可访问体验的指南。许多可访问性工作高度依赖上下文，我不了解你的项目或组织的具体需求，因此尝试在这里提供建议可能弊大于利。

相反，请将本文视为"行前须知"指南。我希望为你提供一个处理ARIA的良好心态，并强调在旅程中需要注意的事项。

那么，什么是ARIA？

ARIA是在没有更好的本地HTML元素或属性来传达交互性、目的和状态时所使用的技术。

将其视为洒在标记中的香料以增强功能。向HTML标记添加ARIA是为屏幕阅读器和语音控制软件提供网站或Web应用程序附加信息的一种方式。

交互性意味着内容可以被激活或操作，例如导航到链接目的地
目的意味着某物的用途，例如用于收集某人姓名的文本输入
状态意味着内容当前所处的状态，由状态、属性和值控制，例如可以展开或折叠的手风琴面板

ARIA的历史

ARIA已经存在很长时间，第一个版本发布于2006年9月26日。ARIA的创建是为了在HTML的局限性与使辅助技术理解交互体验的需求之间架起桥梁。

最新版本的ARIA是2023年6月6日发布的1.2版。1.3版预计很快发布。

你可能还会看到它被称为WAI-ARIA，其中WAI代表"Web可访问性倡议"。WAI是W3C的一部分，该组织为Web制定标准。也就是说，我认识的大多数可访问性从业者在书面和口头交流中都称其为"ARIA"，省略了"WAI-“部分。

ARIA的使用规则

ARIA文档中包含五条规则来指导你如何处理它：

尽可能使用本地元素 示例：使用锚元素（<a>）作为链接，而不是带有点击处理程序和链接角色的div
尽可能不调整本地元素的语义 示例：尝试使用标题元素作为选项卡，而不是将标题包装在语义中性的div中
任何交互元素都必须可键盘操作 如果你不能用键盘使用它，它就是不可访问的。句号。
不要在可聚焦元素上使用role="presentation"或aria-hidden="true" 这会使本应交互的内容无法被辅助技术使用
交互元素必须被命名 示例：对按钮元素使用文本字符串"Print”

遵守这五条规则将对你大有帮助。

ARIA的分类法

ARIA有结构化的语法，以角色以及状态和属性为中心。

角色

角色是辅助技术读取然后宣布的内容。许多人将其简称为语义。HTML元素具有隐含角色，这就是为什么锚元素会被屏幕阅读器宣布为链接而无需额外工作的原因。

如果用例需要，隐含角色几乎总是更好使用。回想一下ARIA的第一条规则。这通常是数字可访问性从业者说"只需使用语义HTML"时的意思。

角色有类别，每个类别都有自己的目的。抽象角色类别值得注意，因为它是一个组织超类别，不打算由作者使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- 这不会工作，不要这样做 -->
<h2 role="sectionhead">
  解剖学和生理学
</h2>

<!-- 改为这样做 -->
<section aria-labeledby="anatomy-and-physiology">
  <h2 id="anatomy-and-physiology">
    解剖学和生理学
  </h2>
</section>

状态和属性

状态和属性是ARIA整体分类法的另外两个主要部分。

隐含角色由语义HTML提供，显式角色由ARIA提供。两者都描述了元素是什么。状态以辅助技术可以理解的方式描述该元素的特征。这是通过属性声明及其伴随值完成的。

ARIA状态可以快速或缓慢地改变，这既是人类交互的结果，也是应用程序状态的结果。当状态因人类交互而改变时，它被认为是"非托管状态"。在这里，开发人员必须提供底层JavaScript逻辑来控制交互。

当状态因应用程序（例如操作系统、Web浏览器等）而改变时，这被认为是"托管状态"。在这里，应用程序自动提供底层逻辑。

如何声明ARIA

将ARIA视为HTML属性的扩展，一套名称/值对。有些值是预定义的，而其他值是作者提供的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<!-- 将id值"carrot"应用于div -->
<div id="carrot"></div>

<!-- 从辅助技术隐藏此段落元素的内容 -->
<p aria-hidden="true">
  辅助技术无法读取此内容
</p>

<!-- 提供可访问名称"Stop"，并传达按钮当前已按下。
     类型属性值为"button"可防止浏览器表单提交 -->
<button 
  aria-label="Stop"
  aria-pressed="true"
  type="button">
  <!-- SVG图标 -->
</button>

其他使用说明：

可以在HTML元素上放置多个ARIA声明
ARIA在HTML元素上声明时的顺序无关紧要
可以放置在元素上的ARIA声明数量没有限制。但要注意，添加的越多，引入的复杂性就越大，而更多的复杂性意味着事情可能中断或无法按预期运行的机会更大
可以在HTML元素上声明ARIA，也可以有其他非ARIA声明，例如class或id。声明顺序在这里也不重要

不是很多ARIA是"硬编码"的

在这种上下文中，“硬编码"意味着直接将静态属性或值声明写入组件、视图或页面。

许多ARIA设计为基于应用程序状态或作为某人操作的响应而动态应用或条件修改。显示和隐藏披露模式就是一个例子：

ARIA的aria-expanded属性在false和true之间切换，以传达披露是处于展开还是折叠状态
HTML的hidden属性有条件地删除或添加，以显示或隐藏披露的完整内容区域

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<div class="disclosure-container">
  <button 
    aria-expanded="false"
    class="disclosure-toggle"
    type="button">
    我们如何保护您的个人信息
  </button>
  <div 
    hidden
    class="disclosure-content">
    <ul>
      <li>快速、准确、彻底且不间断的网络攻击保护</li>
      <li>解决攻击者试图利用的漏洞的修补实践</li>
      <li>数据丢失预防实践有助于确保数据不会落入坏人之手</li>
      <li>供应风险管理实践有助于确保我们的供应商遵守我们的期望</li>
    </ul>
    <p>
      <a href="/security/">了解更多关于我们的安全最佳实践</a>。
    </p>
  </div>
</div>

辅助技术可能支持你的无效ARIA声明

有机会的是，编写不准确的ARIA实际上可以与辅助技术按预期工作。虽然我不建议依靠这个事实来完成工作，但我认为在调试等方面值得提及。

这是因为人们对编写ARIA的熟悉程度范围很广。一些更成熟的辅助技术供应商试图适应这种熟悉度的较低端。这样做是为了更好地使使用其软件的人真正获得他们需要的东西。

aria-label很棘手

aria-label是你将遇到的最常见的ARIA声明之一。它也是最常被误用的之一。

aria-label不能应用于非交互式HTML元素，但经常被这样做。它不能总是被翻译，并且经常被本地化工作忽略。此外，它可能使使用语音控制软件的人操作起来令人沮丧，其中可见标签与底层代码使用的标签不同。

另一个问题是当它覆盖交互元素的预先存在的可访问名称时：

1
2
3
4
5
6


<!-- 不要这样做 -->
<a 
  aria-label="我们的服务"
  href="/services/">
  服务
</a>

这纯粹是违反了WCAG成功标准2.5.3：名称中的标签。

ARIA最终是关于关心人

Web可访问性可以涉及安排医疗预约等重要事项。它也涉及与朋友聊天等有趣的事情。它还用于介于两者之间的每个Web体验。

使用语义HTML——辅以明智的ARIA应用——帮助你实现这些体验。总结一下，ARIA：

已经存在很长时间，其精神反映了它最初创建的时代
有管理的分类法、词汇和使用规则，并以与HTML属性相同的方式声明
主要用于动态更新事物，通过JavaScript控制
对其每个角色都有高度特定的用例
如果编写错误，会静默失败
仅向辅助技术公开某物的存在，并不赋予交互性
需要Web浏览器的输入，也需要操作系统，以便辅助技术使用它
有一系列实际支持，因使用越多而变得复杂
有一些需要注意的事项，即aria-label、ARIA创作实践指南和macOS VoiceOver支持
也可用于视觉样式和编写弹性测试等内容
最好通过使用实际的辅助技术来评估

从一种角度看，ARIA是神秘的，充满误解，并且充满潜在的失误。从另一个角度看，ARIA是一种美丽而优雅的方式，以编程方式传达用户界面的交互性和状态。

我选择第二种观点。归根结底，使用ARIA有助于确保残疾人能够以与其他人相同的方式使用Web体验。

ARIA入门指南：避开常见误区，掌握Web可访问性核心

本文深入解析WAI-ARIA的核心概念、使用规则和常见陷阱，涵盖角色声明、状态管理、浏览器支持差异等关键技术细节，帮助开发者正确实现Web可访问性交互模式。