ARIA

可访问的富互联网应用程序(ARIA)是一组角色和属性，用于定义如何使 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）更容易被残疾人访问。

它补充了 HTML，以便在没有其他机制的情况下，将应用程序中常用的交互和部件传递给辅助技术。例如，ARIA 使可访问的 JavaScript 部件、表单提示和错误消息、实时内容更新等成为可能。

警告：许多此类部件在现代浏览器中得到完全支持。如果存在这样的元素，开发人员应优先使用正确的语义 HTML 元素而不是使用 ARIA。例如，原生元素具有内置的键盘可访问性、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模拟等效的浏览器行为。

ARIA 的第一条规则是“如果您可以使用具有您所需语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么请这样做。”

注意：俗话说“没有 ARIA 比糟糕的 ARIA 更好”。在WebAim 对超过一百万个主页的调查中，他们发现使用 ARIA 的主页检测到的错误平均比未使用 ARIA 的主页多 41%。虽然 ARIA 旨在使网页更容易访问，但如果使用不当，它可能会弊大于利。

以下是进度条部件的标记

html

<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>元素会简单得多

html

<progress id="percent-loaded" value="75" max="100">75 %</progress>

注意：<progress>元素不允许使用min属性；其最小值始终为0。

注意：HTML 地标元素（<main>、<header>、<nav>等）具有内置的隐式 ARIA 角色，因此无需重复它们。

支持

与任何其他 Web 技术一样，ARIA 的支持程度也各不相同。支持基于正在使用的操作系统和浏览器，以及与其交互的辅助技术的类型。此外，操作系统的版本、浏览器和辅助技术也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色，或者仅提供部分支持，或者错误地报告其功能。

同样重要的是要承认，一些依赖辅助技术的人不愿升级他们的软件，因为他们担心会失去与计算机和浏览器交互的能力。因此，尽可能使用语义 HTML 元素非常重要，因为语义 HTML 对辅助技术的支持要好得多。

使用实际的辅助技术测试您编写的 ARIA 也很重要。这是因为浏览器模拟器和仿真器在测试全面支持方面并不真正有效。类似地，代理辅助技术解决方案不足以完全保证功能。

参考

ARIA 角色: 涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。
ARIA 状态和属性: 涵盖 MDN 上讨论的所有 WAI-ARIA 状态和属性的参考页面。

标准化工作

WAI-ARIA 规范: W3C 规范本身。
WAI-ARIA 编撰实践: 官方最佳实践文档说明如何最好地将 ARIA 应用于常见的窗口小部件和交互。一个极好的资源。

用于脚本化部件的 ARIA

编写可键盘导航的 JavaScript 窗口小部件: 内置元素，如 <input>、<button> 等，具有内置的键盘可访问性。如果您使用 <div> 和 ARIA 模拟这些元素，则必须确保您的窗口小部件可通过键盘访问。
活动区域: 活动区域向屏幕阅读器提供有关如何处理页面内容更改的建议。

视频

以下演讲是了解 ARIA 的绝佳方式

ARIA、辅助功能 API 和像你一样在乎的编码！– Léonie Watson