前言
现今，人们越来越关注包容性设计，这需要用无障碍技术来为所有人提供更好的用户体验。因此，理解和应用无障碍技术变得非常重要。
本文将围绕 ARIA（Accessible Rich Internet Applications）展开。ARIA 是一组规范，定义了如何通过角色、状态和属性来增强 HTML、CSS 和 JavaScript 的无障碍性。
希望本文能成为一份 ARIA 开发指南，让您更好的了解和使用 ARIA 技术，从而为全体用户提供优秀的用户体验。
ARIA 角色
ARIA 角色向屏幕阅读器描述了元素的意义和行为。
在不改变 HTML 代码结构的前提下，开发者可以通过定义 ARIA 角色来告诉屏幕阅读器元素的用途和交互方式。当屏幕阅读器遇到某个元素时，它能够根据角色属性读出与该元素相关的必要信息。
以下是一些常用 ARIA 角色：
role="banner"：标识页面中的顶部横幅。这个横幅通常包含发布者的标识和/或页面标题。role="main"：用来标识页面的主内容区域。这个角色只应用在页面的主区域上。role="navigation"：标识包含页面主导航的元素。role="form"：标识包含表单的元素。此角色不包括每个表单元素，而仅仅标识整个表单的容器。role="dialog"：标识一个表示单个会话的文档或应用程序部分，比如一个对话框、提示框等。
你也可以使用 aria-describedby 属性告诉屏幕阅读器更多关于该元素的信息。
下面是一个具备角色和描述信息的范例：
<div class="banner" role="banner" aria-describedby="banner-description"> <p id="banner-description">This is a banner that contains the site title and logo.</p> <h1>The Site Title</h1> <img src="logo.png" alt=""> </div>
ARIA 属性
ARIA 属性用于描述元素的状态和功能。
通过 ARIA 属性，您可以将更多附加信息告诉屏幕阅读器。与角色不同，这些属性用于告诉观众元素的一些状态和行为，例如元素是否展开，是否可编辑等。
下面是一些常用的 ARIA 属性：
aria-expanded：表示元素是否展开的状态。可以是 true 或 false。aria-hidden：指示元素的可见性。可以是 true 或 false。aria-label：用于给元素提供一个描述性标签，以便于屏幕阅读器。aria-disabled：指示元素是否可用。可以是 true 或 false。
以下示例演示了 aria-expanded 属性。
-- -------------------- ---- ------- ------- -------------------- -------------------------- ------------- ------- --------------------- ------------------------- ------------- --- ---------- ------ ---------------------- ------ -------------------------- ------ -------------------------- ------ -------------- ----------- -----
在这个示例中，我们通过 aria-expanded 属性指示了按钮的状态。当 aria-expanded 属性是 true 时，表示菜单是展开状态；当属性值是 false 时，表示菜单是关闭状态。
ARIA 状态
ARIA 状态用于描述元素的状态变化。
您可以使用 ARIA 状态来告诉屏幕阅读器一个元素的状态变化，例如选中状态、滑块值、进度等等。
下面是一些常用的 ARIA 状态：
aria-checked：用于表示可复选元素的选中状态。可以是 true、false 或 mixed。aria-valuemax：用于表示一个数值范围的最大值。aria-valuemin：用于表示一个数值范围的最小值。aria-valuenow：用于表示一个数值范围的当前值，比如滑块的当前值。aria-selected：用于表示选中状态，例如在一个 tab 控件中。
以下示例演示了 aria-checked 属性。
-- -------------------- ---- ------- ------- ------ ---------------- ------ - -------- ------- ------ --------------- -------------------- ------ - -------- ------- ------ --------------- --------------------- ------ - --------
在这个示例中，我们通过 aria-checked 属性指示了每个选项的选中状态。
案例分析
现在让我们将上述 ARIA 技术应用到一个实际的案例中。
考虑一个电商网站，用户需要浏览所有的商品并选择想要的商品。现在假设有个商品列表，并且每个项目都有价格和一个按钮，允许用户将商品添加到购物车。
下面是一个示例，在不支持 JavaScript 的浏览器中，用户无法随意浏览和购买商品。
-- -------------------- ---- -------
----
----
----------- ------
-------------
----------- -- -------------
-----
----
----------- ------
-------------
----------- -- -------------
-----
----
----------- ------
-------------
----------- -- -------------
-----
-----但是，如果我们添加 ARIA 角色、状态和属性，我们可以将这个简陋的网页转变为一个更可访问的网页。
-- -------------------- ---- -------
--- ------------
--- ----------------
----------- ------
-------------
------- ------------- --------------- -- ---------------------
-----
--- ----------------
----------- ------
-------------
------- ------------- --------------- -- ---------------------
-----
--- ----------------
----------- ------
-------------
------- ------------- --------------- -- ---------------------
-----
-----现在我们看到 role="list" 和 role="listitem" 是我们新增的 ARIA 角色，用于为列表和列表项提供语义信息。
我们还添加了一个 aria-label 属性到按钮，使屏幕阅读器更好的理解按钮的用途。
最后，我们将按钮的 role 设置为 button，表示这个元素是一个按钮，以便于屏幕阅读器正确地标识该元素。
总结
ARIA 技术使我们的 Web 内容更具可访问性，能够让所有的用户都更好的使用网站服务。
在实际的开发中，我们可以根据界面的需求选择恰当的 ARIA 角色、状态和属性，来为用户提供更好的用户体验。
希望这篇 ARIA 开发指南可以帮助您更好的理解和使用 ARIA 技术，为尽可能多的人提供优秀的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f8478df6b2d6eab30671e1