随着现代浏览器和移动设备的普及，越来越多的人开始使用互联网和相关应用程序。随之而来的是对一个受众群体的要求，这个群体可能有视力、听力、肢体等的障碍，他们需要使用辅助技术来访问网络内容。因此，无障碍性已经成为设计和开发网站应用的重要因素，让更多的用户可以获得平等的访问体验。
在前端开发中，ARIA 属性和 WAI-ARIA 规范是无障碍技术中应用最广泛的一部分，由于它们能够为无障碍辅助技术提供重要的信息，从而帮助人们更好地了解页面结构和内容。本文将探讨如何使用 ARIA 属性和 WAI-ARIA 规范，制定有用的无障碍标签，提高网站的无障碍性。
ARIA 属性是什么？
ARIA 全称为“Accessible Rich Internet Applications”，其中 “Accessible” 意为“无障碍的”，“Rich Internet Applications” 意为“丰富的网络应用程序”。ARIA 属性是一种用于描述有意义信息的 HTML 标记和 JavaScript API，这些信息有助于屏幕阅读器直观地显示页面结构和内容，让使用辅助技术的用户获得更好的访问体验。
ARIA 属性可以将 HTML 标签的“角色”（Role）、“状态”（State）和“属性”（Property）增强，同时为无障碍辅助技术提供重要的信息。有许多不同的 ARIA 属性可以使用，例如：role、aria-hidden、aria-labelledby、aria-live、aria-pressed 等，每个属性都有其独特的用途和功能。下面将详细讨论其中最常用的几个 ARIA 属性。
role 属性
role 属性是定义元素角色的标准 ARIA 属性，它指示了元素的作用和功能。这个属性的取值可以是预定义的角色（如按钮、表格、文本框等）或自定义的角色，例如：
<div role="banner">...</div>
上面的代码用 role 属性指定了 div 元素的角色为“banner”，通常用于站点的页眉部分，辅助技术可以根据这个信息来确认该元素是页眉，以便更好地阅读和浏览网页。
aria-hidden 属性
aria-hidden 属性是定义元素是否应被屏幕阅读器忽略的标准 ARIA 属性。当设置为 true 时，表示元素内容对于屏幕阅读器是不可见的，例如：
<div aria-hidden="true">...</div>
这个代码将 div 元素的内容标记为不可见，但是可以通过 CSS 来确定它的样式和位置信息。这个属性通常用于重复的内容（如面包屑导航、图标等），避免这些无意义的内容干扰用户的阅读和浏览。
aria-labelledby 属性
aria-labelledby 属性是定义与元素相关的标签的标准 ARIA 属性，通常用于描述对象的名称或标题。这个属性的取值可以是一个或多个 ID，它们指定了描述元素的文本组件的 ID。例如：
<button aria-labelledby="btn1-label btn1-desc">...</button> <div id="btn1-label">Save</div> <div id="btn1-desc">Save your changes to the document.</div>
在上面的代码中，button 元素使用 aria-labelledby 属性，它引用了 btn1-label 和 btn1-desc 元素的 ID，这两个元素分别代表“Save”和“Save your changes to the document。”。这个属性可以帮助屏幕阅读器更好地描述按钮的作用和功能，并提供与按钮有关的文本信息。
aria-live 属性
aria-live 属性是定义元素内容的实时性的标准 ARIA 属性。这个属性分为以下几个值：
off：默认值，表示元素内容不会更新。polite：表示元素内容会更新，但是不会打断当前的屏幕阅读。assertive：表示元素内容会更新，会打断当前的屏幕阅读。
例如：
<div aria-live="polite">Loading...</div>
在上面的代码中，div 元素的 aria-live 属性被设置为“polite”，表示内容正在加载，但是不会打断当前的屏幕阅读，通常用于加载或更新内容时，向屏幕阅读器提供反馈信息。
aria-pressed 属性
aria-pressed 属性是定义元素的“按压状态”的标准 ARIA 属性。这个属性通常用于指示按钮或开关是否处于按下的状态。默认值为 false（未按下），而值为 true（已按下），例如：
<button aria-pressed="false">...</button>
在上面的代码中，button 元素的 aria-pressed 属性被设置为“false”，表示它未被按下。这个属性通常用于界面元素中的特定操作，例如播放/暂停、展开/合并、选中/未选中等。
WAI-ARIA 规范是什么？
WAI-ARIA 全称为“Web Accessibility Initiative - Accessible Rich Internet Applications”，其中的“Web Accessibility Initiative”是万维网联盟（W3C）推广无障碍技术的倡议，而“Accessible Rich Internet Applications”则是为丰富的互联网应用和动态界面提供无障碍性解决方案的规范。WAI-ARIA 规范提供了一种有效的方法来为网页和应用程序提供无障碍性支持。
WAI-ARIA 规范定义了一组新的概念和角色，可以被应用于 HTML 标记和自定义组件，从而提供更好的无障碍支持。它包括以下几个部分：
- Roles：定义了各种网页元素的作用和功能，如按钮、列表、进度条等。
- States：定义了网页元素的状态，如是否可编辑、是否可拖动、是否可扩展等。
- Properties：定义了网页元素的属性，如值、最小值、最大值、是否必填等。
在使用 WAI-ARIA 规范时，应该首先使用 HTML 标记和支持的功能，然后再使用 ARIA 属性和 WAI-ARIA 规范来传达更多细节和信息。下面将介绍 WAI-ARIA 中最常用的一些角色。
button 角色
button 角色定义了一个按钮的作用和功能。在使用 button 角色时，必须将它与 role="button" 属性一起使用，例如：
<div role="button" tabindex="0">Click me!</div>
在上面的代码中，role 属性指定了元素的角色为“button”，而 tabindex 属性为按钮添加了键盘焦点可以访问的功能。
checkbox 角色
checkbox 角色定义了一个复选框的作用和功能。在使用 checkbox 角色时，必须将它与 role="checkbox" 属性一起使用，例如：
<div role="checkbox" tabindex="0" aria-checked="false">...</div>
在上面的代码中，role 属性指定了元素的角色为“checkbox”，而 aria-checked 属性为复选框添加了选中和未选中的状态。
combobox 角色
combobox 角色定义了一个下拉菜单的作用和功能。在使用 combobox 角色时，必须将它与 role="combobox" 属性一起使用，例如：
<div role="combobox" tabindex="0" aria-controls="listbox" aria-expanded="false">...</div> <div id="listbox" role="listbox">...</div>
在上面的代码中，role 属性指定了元素的角色为“combobox”，而 aria-controls 属性指定了下拉菜单的 ID，aria-expanded 属性指定了下拉菜单的状态。
listbox 角色
listbox 角色定义了一个列表框的作用和功能。在使用 listbox 角色时，必须将它与 role="listbox" 属性一起使用，例如：
<div role="listbox" tabindex="0" aria-activedescendant="item1">...</div> <ul> <li id="item1" role="option">Item 1</li> <li id="item2" role="option">Item 2</li> <li id="item3" role="option">Item 3</li> </ul>
在上面的代码中，role 属性指定了元素的角色为“listbox”，而 aria-activedescendant 属性指定了列表框中当前处于活动状态（被选中）的选项的 ID。
如何制定有用的无障碍标签？
无障碍标签可以帮助辅助技术更好地阅读和浏览网页，给用户提供更好的访问体验，而正确使用 ARIA 属性和 WAI-ARIA 规范则是制定有用的无障碍标签的关键。
下面是一些制定有用的无障碍标签的建议：
- 使用语义化的 HTML 标记。语义化 HTML 标记可以提供网页元素的意义和作用，对于辅助技术是十分重要的。
- 在需要的情况下，使用 ARIA 属性来增强标记。ARIA 属性可以为不适合使用语义化 HTML 标记的元素提供上下文信息。
- 使用 WAI-ARIA 规范中定义的角色、状态和属性。WAI-ARIA 规范提供了一系列有用的属性，可以增强网页元素的无障碍性。
- 提供有用的文本信息。给网页元素添加合适的文本描述，让辅助技术用户更好地理解页面内容。
- 测试你的标签。使用屏幕阅读器和其他无障碍技术来测试你的网页，并确保它们能够正确地读取和显示标签和内容。
下面是一个示例代码，演示如何制定有用的无障碍标签：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无障碍标签示例</title>
</head>
<body>
<form>
<div>
<label for="name">名字：</label>
<input type="text" id="name" name="name" required>
</div>
<div role="group" aria-labelledby="gender-label">
<span id="gender-label">性别：</span>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
<div>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="100" required>
</div>
<div>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" minlength="8" required>
</div>
<div>
<label for="confirm-password">确认密码：</label>
<input type="password" id="confirm-password" name="confirm-password" minlength="8" required>
</div>
<button type="submit">提交</button>
</form>
</body>
</html>在上面的示例代码中，使用了语义化 HTML 标记，并使用 label 元素为表单元素提供文本描述。在性别单选框的部分，使用了 group 角色为选项提供了更好的上下文信息。在提交按钮上没有使用 role 属性或 WAI-ARIA 规范，因为按钮的作用和功能在语义化 HTML 标记中已经明确表示。最后，在所有表单元素中添加了 required 属性，这可以帮助辅助技术用户更好地理解这些元素的必填性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c812cee46428fe9ee07458