ARIA（Accessible Rich Internet Applications）是一种 Web 技术，旨在通过为 Web 内容添加语义信息，提高网站、应用程序和文档的无障碍性。 本文将介绍如何使用 ARIA 实现无障碍文档。
ARIA 的基本概念
ARIA 是一种为 Web 内容添加语义信息的技术。语义信息使得屏幕阅读器和其他辅助技术能够更好地理解页面结构并提供意义更加清晰的信息。ARIA 属性有三个主要类别：
- Role 属性：标识 HTML 元素的角色
- State 属性：使用布尔值、数值和字符串等描述 UI 控件的状态
- Property 属性：描述 UI 控件的特定性质
ARIA 属性可以应用于任何 HTML 元素，但是最有用的情况是在非标准元素上使用 ARIA 属性，例如自定义组件。
使用 ARIA 属性改进文档的可访问性
- 使用 aria-label 属性添加标记
在 HTML 元素中添加 aria-label 属性可以为元素添加标记，描述元素的功能或内容。例如：
<button aria-label="点击播放视频">播放</button>
该按钮将会被屏幕阅读器和其他辅助技术识别为“点击播放视频”的按钮。这对于那些视觉上无法识别图标或按钮文本的人非常有用。
- 使用 aria-labelledby 属性关联标记
使用 aria-labelledby 属性可以为一个元素建立一个标签的关系。例如，在 HTML 中有一个输入框和一个标签：
<label for="input">姓名</label> <input type="text" id="input" name="name" />
使用 aria-labelledby 属性可以将这两个元素联系起来。
<input type="text" id="input" name="name" aria-labelledby="label" /> <label id="label">姓名</label>
这样，屏幕阅读器将首先读取标签文本 “姓名” ，然后读取输入框的内容。
- 使用 aria-describedby 属性扩展提示文本
如果您需要添加提示文本，可以使用 aria-describedby 属性将描述性文本添加到元素上。例如：
<div id="description">这是一个很重要的信息</div> <button aria-describedby="description">提交</button>
这可以使那些需要更多上下文信息的听觉用户更容易理解元素的意义。
示例代码
下面是一个实例代码，演示如何使用 ARIA 属性来提高无障碍的 web 文档：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ----------
-------
------
---- ------------
-----------------
-------- --------------------------------------------
------------------
-------- --------------------------------------------
---------------
------- -------------------------------
---- ---------------------------------
------- ------------------------------------------
------
-------
-------总结
ARIA 是一种通过向 Web 内容添加语义信息来提高无障碍性的技术。在 Web 应用程序和文档中使用 ARIA 属性，可以让屏幕阅读器和其他辅助技术更好地理解页面的结构和内容。这不仅对视觉受损人士有帮助，还能够使 Web 内容更加易于使用和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459afc3968c7c53b0bca433