在现代社会中，越来越多的人依赖互联网获取信息和使用各种服务。无障碍网页设计可以让更多的人轻松访问互联网，包括视力障碍、听力障碍、肢体障碍等特殊群体。Web内容无障碍指南(WCAG)为网站开发者提供了指导，而 WAI-ARIA 可以使用角色、状态和属性等机制来扩展Web内容，从而实现更好的可访问性。本文将指导读者如何使用 WAI-ARIA 实现无障碍网页。
WAI-ARIA简介
WAI-ARIA（Web Accessibility Initiative — Accessible Rich Internet Applications Suite）是一组技术规范，主要用于补充HTML的语义信息，来实现更丰富的 Web 应用程序，并帮助开发者构建更容易访问的 Web 应用程序。
WAI-ARIA 定义了三个主要的部分：
- 角色：通过角色属性来定义文档中各个元素的功能类型，比如弹出框、导航链接、Tab选项卡等；
- 属性：通过属性来描述元素的信用状态、完成状态、错误状态等；
- 状态： 通过状态来描述元素的运行状态，比如禁用、选中、展开等。
WAI-ARIA角色
角色属性为元素提供了标准化的功能类型定义，主要包含以下角色：
- widget：页面上的交互式控件，如按钮、滑块、进度条等；
- composite：对其他元素进行组合，并拥有可访问性，如菜单栏、搜索框等；
- document：文档页面，用于结合文本和媒体等内容；
- landmark：对 Web 页面进行地标式标记，如页眉、页脚、内容区等；
示例代码：
-- -------------------- ---- -------
---------
------- -------------------------
----------
---- ----------- ----------------
----
--- ------------------ ------------------------
--- ------------------ ---------------------------
--- ------------------ -----------------------------
-----
------
-----------
-------- ----------------
--------
-------------
---------
---------
-----------
----------
--------
-----------
---------
----------WAI-ARIA属性
通过属性来定义元素的可访问性，主要包括以下内容：
- aria-label：定义元素的文本标记；
- aria-labelledby：与 label 标签配合使用，定义元素的标签文本；
- aria-describedby：定义元素的描述性文本；
- aria-haspopup：定义当前元素是否拥有一个弹出的关联菜单；
- aria-expanded： 定义当前元素的展开状态，常用于菜单等交互元素；
- aria-checked：定义可选元素的选择状态，常用于复选框等元素。
示例代码：
-- -------------------- ---- -------
------ -------------------------
------ ----------- ----------- ---------------- -----------------------------
-- ------------------------------
----
----
------- -------------------- -----------------------------------
--- ------------
--- ------------------ ---------------------
--- ------------------ ---------------------
-----
-----
-----
------ --------------- ----------- ----------------- ---------------------
------ ------------------------WAI-ARIA状态
ARIA还包含一组用于描述元素状态的属性，用于指示元素的动态行为，比如被禁用或者展开状态。
示例代码：
-- -------------------- ---- -------
------- --------------------------------
--- ---------------
--- --------------------
-- ------------ ---------- -------------------- --------------------
-----
--- --------------------
-- ------------ ---------- --------------------- ---------------------
-----
--- --------------------
-- ------------ ---------- --------------------- ---------------------
-----
-----确保可访问性
使用 WAI-ARIA 只是为了向浏览器和辅助技术提供正确的信息，但是这并不是创建可访问页面的做法的全部。确保以下几点将使整个项目可访问性更好：
- 正确的 HTML 标记；
- 清晰、无歧义的文本；
- 准确的语言属性；
- 可访问的图片和媒体文件；
- 无歧义的链接文本；
- 宽松的输入验证和替代方案。
总结
WAI-ARIA提供了一种支持网站开发人员构建无障碍网站的标准化方式。本文介绍了如何使用角色、状态和属性等要素来实现更好的可访问性。作为前端人员，我们应该尽可能地考虑到每一个可能访问我们网站的用户，为他们创造更好的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c30e0968c7c53b0754fa3