在网站开发时，我们通常只考虑到了如何让页面呈现更好的视觉效果和更好的用户交互。但是，对于一些视力或听力等存在障碍人士来说，网站的可访问性也是一个非常重要的问题。
为了解决这个问题，W3C（世界万维网联盟）提出了一系列的无障碍技术标准，其中 ARIA（Accessible Rich Internet Applications）就是其中的一项。
ARIA 是什么？
ARIA 是一种无障碍技术标准，全称是“Accessible Rich Internet Applications”。它是一种用于增强 Web 内容可访问性的规范，它为开发人员提供了一组在 Web 应用程序中定义角色、状态、属性的方法。
可以说，ARIA 的主要目标在于改善 Web 应用程序中的可访问性，让更多的人能够在此基础上拥有更好的用户体验。
如何使用 ARIA？
在实际项目中，ARIA 的应用主要体现在对 HTML 标签的扩展和引入。ARIA 规范定义了一组有助于辅助技术的属性和角色，这些属性和角色可以被应用于各种元素中，以提高网站的无障碍性。
ARIA 规范提供了以下几种角色：
- widget 角色：用于表示用户若干相关的交互元素；
- composite 角色：用于表示用户组合操作，多个表单项绑定在一起；
- input 角色：用于表示用户输入的组件，通常作为 widget 角色的子元素；
- landmark 角色：用于表示内容區域的高层次划分，如主要内容、导航区域等；
- document 角色：用于表示整个文档。
接下来，我们就来看几个常用的 ARIA 属性。
role 属性
role 属性是定义元素角色的属性。常常使用 <div> 或 <span> 等元素来承载具有角色的元素。当一个元素具有可交互的表现时，就要加上 role=button。其他常见的角色有：
role=link：表示一个链接；role=tab：表示一个选项卡；role=menuitem：表示菜单项；role=checkbox：表示一个复选框。
<button type="button" role="button" aria-disabled="false">Click me</button>
aria-haspopup 属性
aria-haspopup 属性的作用是告诉辅助技术用户，通过与此元素相关的键盘事件或鼠标单击，会创建出一个菜单或对话框。
<button aria-haspopup="true" aria-expanded="false">More options</button>
aria-label 属性
aria-label 属性的作用是告诉辅助技术，元素的含义和作用。可以给无标签的元素增强可访问性。
<button aria-label="search">🔍</button>
aria-labelledby 属性
aria-labelledby 属性用于通过一个或多个 ID 引用一个元素的标签。这样可以使无标签元素的作用变得更加清晰。
<button aria-labelledby="search-label">🔎</button> <label id="search-label">Search</label>
ARIA 的优点
- 提高网站的可访问性；
- 增加了网站用户群体；
- 使网站可以更好的支持辅助技术；
- 提高网站的可维护性。
总结
ARIA 可以让我们的网站更好的支持辅助技术，提高无障碍性，让更多的人可以更好的享受我们网站所带来的服务。在今后的前端开发中，我们应当多加使用 ARIA 标签，让网站更加普惠和友好。
(完)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f3ec63f6b2d6eab3d250dc