ARIA
可访问富互联网应用程序 (ARIA) 是一组 角色 和 属性，它们定义了使 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）对残障人士更易于访问的方法。
ARIA 补充了 HTML，以便通常在应用程序中使用的交互和控件在没有其他机制的情况下可以传递给辅助技术。例如，ARIA 支持可访问的 JavaScript 控件、表单提示和错误消息、实时内容更新等。
在使用 ARIA 之前
警告： 许多这些控件在现代浏览器中都完全支持。如果存在语义正确的 HTML 元素，开发者应优先使用它，而不是使用 ARIA。例如，原生元素具有内置的 键盘可访问性、角色和状态。但是，如果您选择使用 ARIA，您将负责在脚本中模仿等效的浏览器行为。
ARIA 使用的第一条规则是“如果你可以使用一个具有所需语义和行为的原生 HTML 元素或属性，而不是重新利用一个元素并添加 ARIA 角色、状态或属性来使其可访问，那么就这样做。”
注意： 有句俗话说“没有 ARIA 比糟糕的 ARIA 更好。”在 WebAim 对一百万个主页的调查中，他们发现包含 ARIA 的主页平均检测到的错误比不包含 ARIA 的主页多 41%。虽然 ARIA 旨在使网页更易于访问，但如果使用不当，它可能会弊大于利。
这是一个进度条控件的标记
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>
这个进度条是使用一个没有意义的 <div> 构建的。我们包含 ARIA 角色和属性来添加意义。在此示例中，role="progressbar" 属性告知浏览器该元素实际上是一个由 JavaScript 驱动的进度条控件。 aria-valuemin 和 aria-valuemax 属性指定进度条的最小值和最大值，而 aria-valuenow 描述了其当前状态，因此必须通过 JavaScript 保持更新。
除了直接放在标记中之外，还可以使用如下 JavaScript 代码将 ARIA 属性添加到元素并动态更新它们
// Find the progress bar <div> in the DOM.
const progressBar = document.getElementById("percent-loaded");
// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
progressBar.setAttribute("aria-valuenow", percentComplete);
}
所有对非辅助技术用户可用的内容都必须对辅助技术可用。同样，不应包含任何仅针对辅助技术用户而对非辅助技术用户不可用的功能。上述进度条需要进行样式设置，使其看起来像一个进度条。
使用原生的 <progress> 元素会简单得多
<progress id="percent-loaded" value="75" max="100">75 %</progress>
注意： <progress> 元素不允许使用 min 属性；其最小值始终为 0。
支持
与任何其他 Web 技术一样，ARIA 的支持程度也各不相同。支持取决于所使用的操作系统和浏览器，以及与之交互的辅助技术的类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。旧版本的软件可能不支持某些 ARIA 角色，只有部分支持，或者报告其功能不正确。
同样重要的是要认识到，一些依赖辅助技术的用户不愿升级他们的软件，因为担心失去与计算机和浏览器交互的能力。因此，尽可能 使用语义 HTML 元素非常重要，因为语义 HTML 对辅助技术的支持要好得多。
同样重要的是要用实际的辅助技术测试您编写的 ARIA。这是因为浏览器模拟器和模拟器对于测试完整支持并不真正有效。同样，代理辅助技术解决方案不足以完全保证功能。
参考
ARIA 参考是 MDN 上记录的 ARIA 属性和角色的全面列表。
- ARIA 角色
-
ARIA 角色可用于描述 HTML 中不存在的原生元素，或那些已存在但尚未获得广泛浏览器支持的元素。
- ARIA 状态和属性（attributes）
-
ARIA 属性能够修改元素在可访问性树中定义的使其状态和属性。
指南
ARIA 指南是帮助您提高网页功能（如表格、表单和键盘导航）可访问性的资源。
标准化工作
- WAI-ARIA 规范
-
W3C 规范本身。
-
官方最佳实践文档介绍了如何最好地 ARIA-化常用控件和交互。一个极好的资源。
用于脚本控件的 ARIA
视频
以下演讲是理解 ARIA 的好方法