随着 Web 技术的发展，Web 站点的访问人群越来越广，包括视力障碍、听力障碍、智力障碍和身体障碍等。这种多样的访问人群使得我们需要更好地为他们提供服务。因为现在的 Web 应用程序常常需要支持这样的访问者，我们就需要考虑如何让 Web 应用程序更加无障碍友好。WAI-ARIA 是一项支持无障碍 Web 技术的标准。本文将介绍 WAI-ARIA 的基础知识，并展示如何使用 WAI-ARIA 技术来增强 Web 网站的无障碍性。
WAI-ARIA 简介
WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications)，是一个以 W3C 规范为基础开发的标准，它为可访问的 Web 应用程序提供了一种解决方案，这种解决方案涉及到协助技术、键盘操作和表单交互等一些列的无障碍方面。通过使用 WAI-ARIA 技术，我们可以为那些使用辅助技术访问 Web 应用程序的人们提供更好的访问条件。
WAI-ARIA 角色和状态
WAI-ARIA 规范有两个重要的概念：角色和状态。角色指的是元素的类型，例如菜单、按钮、对话框，其中一个元素可以扮演多个角色，状态指元素的当前状态，例如元素是否禁用、是否展开等等。
WAI-ARIA 角色
- article，代表一篇文章，和文档、博客和其他允许用户交互和更新的页面相关。
- button，代表一个可以被点击的按钮。
- checkbox，代表一个可以被选中或者取消选中的复选框。
- dialog，代表一个将允许用户交互的对话框。
- grid，代表一个带有行和列的表格。
- listbox，代表一个包含固定数量的条目选择列表。
- menu，代表一组让用户从多个选项中选择的菜单列表。
- progressbar，代表一个用于表示进度百分比的进度条。
WAI-ARIA 状态
- aria-checked，代表元素的选择状态，可以是 true、false 或者 mixed。
- aria-disabled，表示元素是否启用（或者禁用）。
- aria-expanded，表示元素的展开或者折叠状态。
- aria-hidden，表示元素是否应该被屏蔽，不可访问，例如在模态事件中，设置为 true 可以屏蔽背景元素。
- aria-selected，表示元素是否选中。
WAI-ARIA 技术实现
下面我将通过实例来展示如何使用 WAI-ARIA 技术来增强 Web 网站的无障碍性。
为表格增加 WAI-ARIA 角色
-- -------------------- ---- -------
------ ------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
----
--- ----------------------
--- -----------------------
--- -------------------------
--- -----------------------
-----
----
--- ----------------------
--- -----------------------
--- -------------------------
--- -----------------------
-----
--------
--------对于表格，我们可以将其角色设为 grid，列和行格子的角色分别设为 gridcell。
为分页条增加 WAI-ARIA 角色和状态
-- -------------------- ---- -------
---- ------------------
--- ----------- ----------------
--- ----------------
-- -------------- ------------- ----------------------
-----
--- ----------------
-- -------------- ------------- ----------------------
-----
--- ----------------
-- -------------- ------------- ----------------------
-----
-----
------分页条的角色可以设置为 navigation，每个按钮则需要设为 button。而其状态则可以通过 aria-label 属性传递页面信息。
为单选框组增加 WAI-ARIA 角色和状态
<div role="radiogroup" aria-label="性别">
<label role="radio" aria-checked="true">
<input type="radio" name="gender" value="male">男
</label>
<label role="radio" aria-checked="false">
<input type="radio" name="gender" value="female">女
</label>
</div>对于单选框组，我们可以将其角色设为 radiogroup，每个单选框的角色是 radio。对于 aria-checked 属性，在题目中我们可以将其设为 true 或 false。
总结
WAI-ARIA 技术可以使得 Web 网站变的更加无障碍友好，通过使用相关的角色和状态属性，可以为一些辅助技术（如屏幕阅读器等）提供更好的访问体验。因此，为 Web 网站增强 WAI-ARIA 技术的应用是非常重要的。希望本篇文章对大家的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ace741add4f0e0ff67939c