Skip to content

Latest commit

 

History

History
98 lines (67 loc) · 6.14 KB

index.md

File metadata and controls

98 lines (67 loc) · 6.14 KB
Raw
title slug
ARIA
Web/Accessibility/ARIA

{{AccessibilitySidebar}}

无障碍富互联网应用（Accessible Rich Internet Applications，ARIA）是一组角色和属性，用于定义使残障人士更易于访问 web 内容和 web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。

它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持无障碍 JavaScript 小部件、表单提示和错误消息、实时内容更新等。

Warning

许多这些小部件在现代浏览器中都已经完全支持。如果有正确语义的 HTML 元素存在的话，开发人员应该更喜欢使用这样的元素而不是使用 ARIA。例如，原生元素具有内置的键盘无障碍、角色和状态。但是，如果你选择使用 ARIA，则你有责任在脚本中模仿等效的浏览器行为。

使用 ARIA 的第一规则是“如果你能够使用原生的 HTML 元素或属性，并且有你需要但已经建立在里面的语义和行为，而不是重新调整元素的用途并添加 ARIA 角色、状态或者属性来使它更加无障碍，那么你就应该如此。”

Note

有个说法叫做“ARIA 宁缺毋滥”。在 WebAim 对超过 100 万个主页的调查中，他们发现，有 ARIA 存在的主页比那些没有 ARIA 的，多检测出了平均 41% 的错误。尽管 ARIA 是为了使网页更加无障碍而设计的，但是如果使用不当，可能适得其反。

这是进度条小部件的标记：

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

这个进度条是使用 {{HTMLElement("div")}} 构建的，没有任何意义。我们加入 ARIA 角色和属性以添加意义。在这个例子中，role="progressbar" 属性告知浏览器，这个元素实际上是一个由 JavaScript 驱动的进度条小部件。aria-valuemin 和 aria-valuemax 属性指定进度条的最小值和最大值，aria-valuenow 描述进度条的当前状态，因此必须使用 JavaScript 保持更新。

除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示：

// 在 DOM 中，寻找进度条 <div>。
var progressBar = document.getElementById("percent-loaded");

// 设置其 ARIA 属性和状态，
// 这样辅助技术知道它是哪一种部件。
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// 创建可以在任何时候调用的函数，
// 以更新进度条的值。
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

所有对非辅助技术的可用的内容都应该对辅助技术可用。类似地，不应包含针对辅助技术用户使用但对于不使用辅助技术的用户无法访问的任何特性。这个进度条需要有相应的样式，从而看起来像进度条。

如果使用原生的 {{HTMLElement('progress')}} 元素，则会简单得多：

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

备注： {{HTMLElement('progress')}} 元素不允许 min 属性，最小值永远为 0。

Note

HTML 地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。

支持

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

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

使用实际辅助技术测试你编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。

参考

  • ARIA 角色
    • : 包含了 MDN 中讨论的所有 WAI-ARIA 角色的参考页面。
  • ARIA 状态和属性
    • : 包含了 MDN 中讨论的所有 WAI-ARIA 状态和属性的参考页面。

标准化工作

脚本小部件的 ARIA

  • 编写可通过键盘导航的 JavaScript 小部件
    • : {{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果你使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保你的小部件可通过键盘访问。
  • 实时区域
    • : 实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。

视频

以下演讲是了解 ARIA 的好方法：

ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson