什么是无障碍？
无障碍（Accessibility），也称为辅助功能（Assistive Technology），是指一种可以帮助人们在日常生活中独立完成各种任务的技术。它涉及到视力、听力、认知、运动等多个方面，主要是为了让生活中的人们能够更加自主、自由地使用各种设备和服务，从而提高他们的生活质量。
ARIA 是什么？
ARIA (Accessible Rich Internet Applications)，是一种用于在 HTML 和 XML 等文档中增加“额外信息”的技术。通过 ARIA，网页的能够提供更多有关网页功能、结构和交互行为的信息，这样就可以让使用助听器、屏幕阅读器等辅助技术的人们更加容易地使用网页。
如何使用 ARIA？
使用 ARIA 主要包括以下几个方面。
1. 标识一个元素的角色
为了让使用辅助技术的人们更容易理解网页结构和交互行为，我们可以使用 ARIA 角色属性来标识一个元素的角色。ARIA 角色有很多，包括 button、menu、tab、tree、grid 等。
<button role="button">确认</button>
2. 标识一个元素的状态和属性
除了标识元素的角色，我们还可以使用 ARIA 状态和属性来表达元素的状态和特性。例如，aria-hidden 属性可以表示某个元素是否可见，aria-disabled 属性可以表示某个元素是否可用。
<div aria-hidden="true">这是一个不可见的元素</div> <button aria-disabled="true">已禁用的按钮</button>
3. 标识两个元素之间的关系
在网页中，有时候多个元素之间存在联系和关联，如上下文关系、父子关系、前后关系等。为了让使用辅助技术的人们更好地理解这些关系，我们可以使用 ARIA 属性来标识两个元素之间的关系。
<label id="username-label" for="username-input">用户名：</label> <input id="username-input" aria-labelledby="username-label">
上面的代码中，label 元素的 id 属性为“username-label”，input 元素的 aria-labelledby 属性为“username-label”，这样就表明了 label 元素和 input 元素之间的父子关系和上下文关系。
总结
在撰写网页时，使用 ARIA 技术可以帮助我们更好地实现无障碍网页。通过准确的使用 ARIA 角色、状态和属性，我们可以让使用助听器、屏幕阅读器等辅助技术的人们更加容易地使用和访问我们的网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64571d91968c7c53b09f317e