可访问的 Web 应用程序和组件概述

大多数 JavaScript 库提供了一组客户端小部件库，这些库模拟熟悉桌面界面的行为。滑块、菜单栏、文件列表视图等等都可以通过 JavaScript、CSS 和 HTML 的组合来构建。由于 HTML4 规范没有提供语义上描述这些类型小部件的内置标签，因此开发人员通常采用通用元素，例如 <div> 和 <span>。虽然这会生成看起来像桌面对应物的组件，但标记中通常没有足够的语义信息供辅助技术使用。

问题

网页上的动态内容对于无法查看屏幕的用户来说可能尤其成问题。股票行情走势图、实时 Twitter 馈送更新、进度指示器以及类似内容以辅助技术 (AT) 可能意识不到的方式修改 DOM。这就是 ARIA 的用武之地。

示例 1：没有 ARIA 标签的选项卡小部件标记。标记中没有信息来描述小部件的形式和功能。

html
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
<ol>
  <li id="ch1Tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <div id="ch1Panel">Chapter 1 content goes here</div>
  <div id="ch2Panel">Chapter 2 content goes here</div>
  <div id="quizPanel">Quiz content goes here</div>
</div>

示例 2：选项卡小部件的视觉样式。用户可能在视觉上识别它，但没有辅助技术可以识别的机器可读语义。 选项卡小部件的屏幕截图

ARIA

ARIA 使开发人员能够通过向标记添加特殊属性来更详细地描述他们的组件。ARIA 旨在弥合标准 HTML 标签与动态 Web 应用程序中常见的桌面样式控件之间的差距，它提供了角色和状态来描述大多数熟悉 UI 小部件的行为。

警告： 其中许多是在浏览器没有完全支持现代 HTML 功能时添加的。开发人员应该始终优先使用正确的语义 HTML 元素而不是使用 ARIA。

ARIA 规范分为三种类型的属性：角色、状态和属性。角色描述了 HTML 4 中没有的其他小部件，例如滑块、菜单栏、选项卡和对话框。属性描述了这些小部件的特征，例如它们是否可拖动、是否具有必需元素或是否与弹出窗口相关联。状态描述了元素的当前交互状态，告知辅助技术它是否繁忙、禁用、选中或隐藏。

ARIA 属性由浏览器自动解释并转换为操作系统的本机无障碍 API。因此，具有 role="slider" 的元素将以与操作系统的本机滑块相同的方式进行控制。

这提供了比上一代 Web 应用程序更一致的用户体验，因为辅助技术用户可以使用他们在使用基于 Web 的应用程序时使用桌面应用程序的所有知识。

示例 3：添加 ARIA 属性的选项卡小部件标记。

html
<!-- Now *these* are Tabs! -->
<!-- We've added role attributes to describe the tab list and each tab. -->
<ol role="tablist">
  <li id="ch1Tab" role="tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab" role="tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab" role="tab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">
    Chapter 1 content goes here
  </div>
  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">
    Chapter 2 content goes here
  </div>
  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
    Quiz content goes here
  </div>
</div>

ARIA 在所有主要浏览器和许多辅助技术中得到了很好的支持。

表示性更改

动态表示性更改包括使用 CSS 更改内容的外观（例如，在无效数据周围添加红色边框，或更改选中复选框的背景颜色），以及显示或隐藏内容。

状态更改

ARIA 提供了用于声明 UI 小部件当前状态的属性。示例包括（但肯定不限于）

aria-checked

指示复选框或单选按钮的状态。

aria-disabled

指示元素可见但不可编辑或不可操作。

aria-grabbed

指示拖放操作中对象的“已抓取”状态。

（有关 ARIA 状态的完整列表，请查阅 ARIA 状态和属性列表。）

开发人员应使用 ARIA 状态来指示 UI 小部件元素的状态，并使用 CSS 属性选择器根据状态更改来更改视觉外观（而不是使用脚本更改元素上的类名）。

可见性更改

当内容可见性发生变化（例如，元素被隐藏或显示）时，开发人员应更改**aria-hidden**属性值。上面描述的技术应用于声明 CSS，以使用display:none在视觉上隐藏元素。

这是一个使用**aria-hidden**控制工具提示可见性的工具提示示例。该示例显示了一个简单的 Web 表单，其中包含与条目字段关联的说明的工具提示。

html
<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input
    type="text"
    id="first"
    name="first"
    size="20"
    aria-labelledby="tp1-label"
    aria-describedby="tp1"
    aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
    Your first name is optional
  </div>
</div>

以下代码显示了此标记的 CSS。请注意，没有使用自定义类名，只有**aria-hidden**属性的状态。

css
div.tooltip[aria-hidden="true"] {
  display: none;
}

更新**aria-hidden**属性的 JavaScript 具有以下代码所示的形式。请注意，脚本只更新**aria-hidden**属性；它不需要添加或删除自定义类名。

js
function showTip(el) {
  el.setAttribute("aria-hidden", "false");
}

角色更改

ARIA 允许开发人员为一个元素声明语义角色，否则该元素将提供不正确或没有语义。元素的**role**不应该改变。相反，删除原始元素，并用具有新**role**的元素替换它。

例如，考虑一个“内联编辑”小部件：一个允许用户就地编辑文本片段的组件，而无需切换上下文。此组件具有“查看”模式，在这种模式下，文本不可编辑，但可激活，以及“编辑”模式，在这种模式下，文本可编辑。开发人员可能想尝试使用只读文本<input>元素来实现“查看”模式，并将它的 ARIA **role**设置为button，然后通过使元素可写并将**role**属性从“编辑”模式中删除来切换到“编辑”模式（因为<input>元素有自己的角色语义）。

不要这样做。相反，使用完全不同的元素来实现“查看”模式，例如具有**role**为button的<div>或<span>，以及使用文本<input>元素来实现“编辑”模式。

异步内容更改

注意：正在建设中。另请参阅实时区域

键盘导航

开发人员在创建自定义小部件时，往往会忽略对键盘的支持。为了让各种用户都能访问，Web 应用程序或小部件的所有功能也应该可以通过键盘控制，而不需要鼠标。在实践中，这通常需要遵循桌面上的类似小部件支持的约定，充分利用 Tab、Enter、Spacebar 和箭头键。

传统上，Web 上的键盘导航仅限于 Tab 键。用户按下 Tab 键以按线性顺序聚焦页面上的每个链接、按钮或表单，使用 Shift-Tab 键向后导航。这是一种一维导航方式——向前和向后，一次一个元素。在比较密集的页面上，仅使用键盘的用户通常需要按下 Tab 键数十次才能访问所需的区域。在 Web 上实现桌面风格的键盘约定有可能显著加快许多用户的导航速度。

以下是 ARIA 启用 Web 应用程序中键盘导航应如何工作的摘要

  • Tab 键应该将焦点放在小部件的整体上。例如，将 Tab 键聚焦到菜单栏**不应该**将焦点放在菜单的第一个元素上。
  • 箭头键应该允许在小部件内进行选择或导航。例如，使用向左和向右箭头键应该将焦点移到上一个和下一个菜单项。
  • 当小部件不在表单内时，Enter 和 Spacebar 键都应该选择或激活控件。
  • 在表单内，Spacebar 键应该选择或激活控件，而 Enter 键应该提交表单的默认操作。
  • 如果有疑问，请模仿您正在创建的控件的标准桌面行为。

因此，对于上面的选项卡小部件示例，用户应该能够使用 Tab 和 Shift-Tab 键在小部件的容器（我们标记中的<ol>）内进出。一旦键盘焦点在容器内，箭头键应该允许用户在每个选项卡（<li>元素）之间导航。从这里开始，约定因平台而异。在 Windows 上，当用户按下箭头键时，下一个选项卡应该自动被激活。在 macOS 上，用户可以按下 Enter 或 Spacebar 激活下一个选项卡。关于创建键盘可导航 JavaScript 小部件的深入教程描述了如何使用 JavaScript 实现此行为。

另请参阅