【译】W3C WAI-ARIA最佳实践 -- 表单

复选框

WAI-ARIA支持两种类型的 checkbox：

1. 双态: 最常见的复选框类型，它允许用户在两个状态间切换——选中、未选中.
2. 三态: 这种类型的复选框支持额外的第三种状态 - 部分选中.

三态复选框的一种常见使用场景是在软件安装时，一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且，该组中的每个选项都可以单独使用双态复选框开启或关闭。

• 如果该组中的所有选项都被选中，该三态复选框呈现的整体状态为选中。
• 如果该组中的部分选项被选中，该三态复选框呈现的整体状态为部分选中（partially checked）。
• 如果该组中没有选项被选中，该三态复选框呈现的整体状态为未选中。

用户仅使用一个操作，就可以改变三态复选框组中所有选项的状态：

• 选中整体复选框，可以选中组中的所有选项。
• 取消选中整体复选框，可以取消选中组中的所有选项。
• 并且，在某些实现中，系统可能会记住上次选中的选项，整体状态为部分选中。如果提供了此功能，第三次激活整体复选框会恢复选项组中部分被选中的状态。

示例

• 两种状态的简单复选框举例 : 演示简单的双态复选框。
• 三态复选框示例: 演示如何使用 mixed 的 aria-checked 值制作一个组件。

键盘交互

当复选框拥有焦点时, 按 Space 键来改变复选框的状态

WAI-ARIA角色，状态和属性

• 复选框的角色为 checkbox。
• 复选框具有可访问标签，最好的方式是使用 aria-labelledby 关联可见标签:
  • 将可见的内容放在角色为 checkbox 元素里面。
  • 在角色为 checkbox 的元素上通过 aria-labelledby 属性的值为一个可见的内容。
  • aria-label 属性设置在角色为 checkbox 元素上。
• 选中后，复选框元素状态 aria-checked 设置为 true。
• 如果未选中，它的状态 aria-checked 设置为 false。
• 当部分选中，它的状态 aria-checked 设置为 mixed。
• 如果使用一个可见标签可将一组复选框标识为一个逻辑组，这些复选框应该被包含在一个具有 group 角色的元素中，且该元素的 aria-labelledby 设置为包含标签的元素的ID。
• 如果复选框或复选框组包括额外的相关联静态描述文案，复选框或复选框组的属性 aria-describedby 设置为包含描述元素的ID。

链接

链接 组件提供了对资源的交互索引。目标资源可以是外部的的，也可以是本地的，例如，当前页面内、页面外、应用。

NOTE 作者们强烈建议使用原生语言的链接元素，例如一个具有 href 属性的HTML A 元素。与其他 WAI-ARIA 组件角色一样，应用link角色到一个元素，浏览器不会自动添加标准链接行为，例如导航到链接目标或上下文菜单操作。当使用 link 角色时，为元素提供这些特性是开发者的责任。

示例

链接举例: 用HTML标签 span 和 div 构建链接部件。

键盘交互

• Enter: 执行链接并且将焦点移动到链接目标。
• Shift + F10 (可选地): 打开链接的上下文菜单。

WAI-ARIA 角色，状态和属性

包含链接文本或图形的元素有 link 角色 。

菜单或菜单栏

menu 是一个组件，为用户提供一个选择列表，例如一组操作或功能。菜单一般通过激活 menu button 打开或变为可见，选择菜单中一个会打开子菜单的项目，或激活一个命令，例如Windows中的 Shift + F10 ，来打开上下文的特定菜单。当用户激活菜单中的选项时，菜单通常会关闭，除非是打开子菜单。

持续可见的菜单是 menubar。 菜单栏通常是水平的，通常用以创建类似很多桌面应用中窗口顶部附近的菜单栏，让用户快速访问一组连续的命令。

标识菜单项目会唤起一个对话框的常规做法是在菜单标签后面添加"…"（省略号），例如"另存为 …"。

示例

Navigation Menubar Example：演示提供站点导航的菜单栏。 Editor Menubar Example：在为文本域提供文本格式化命令的菜单栏中的子菜单上演示单选和多选菜单。

键盘交互

以下为键盘行为的假定描述：

1. 一个水平 menubar 包含数个 menuitem 元素。
2. menubar 中的所有项目都有子菜单，所有子菜单都有很多垂直排列的项目。
3. 一些子菜单中的 menuitem 也有垂直排列的子菜单。

阅读以下内容时，请记住： 1. 可聚焦元素，可能具有 menuitem, menuitemradio , 或 menuitemcheckbox,角色，被成为是菜单项目。 2. 如果行为仅适用于某些类型的项目，例如menuitem 元素，则使用特定的角色名称。 3. 子菜单，也称为弹出菜单，是具有 menu 角色的元素。 4. 除了需要注意的情况外，通过menubutton打开的菜单与从菜单栏打开的菜单表现一致。 + 当 menu 打开，或者当 menubar 接收焦点时，键盘焦点设置在第一个项目上。所有项目都是可聚焦的，如 Keyboard Navigation Inside Components。 + Enter: - 当焦点位于一个具有子菜单的 menuitem 上时，打开子菜单并将焦点放在其子菜单的第一个项目上。 - 否则，激活该项目并关闭菜单。 + Space: - （可选）：当焦点在一个menuitemcheckbox时，更改状态而不关闭菜单。 - （可选）：当焦点位于未选中的menuitemradio上时，不会关闭菜单，选中聚焦的 menuitemradio，并取消选中同一组中的任何其他已选中的 menuitemradio 元素。 - （可选）：当焦点位于一个具有子菜单的menuitem上时，打开子菜单并将焦点放在其子菜单的第一个项目上。 - （可选）：当焦点位于一个没有子菜单的 menuitem 元素时，激活 menuitem 并关闭菜单。 + Down Arrow: - 当焦点在 menubar 里的一个 menuitem 时，打开它的子菜单，并将焦点放在子菜单中的第一个项目上。 - 当焦点在一个menu上，将焦点移动到下一个项目，可选的，从最后一个项目返回到第一个项目。 + Up Arrow: - 当焦点在一个 menu 上时，将焦点移动到上一个项目，可选的，从第一个项目移动到最后一个。 - (可选)：当焦点在menuitem 中一个 menubar上时，打开其子菜单，并将焦点放置在子菜单的最后一个项目上。 + Right Arrow： - 当焦点在一个menubar上，将焦点移动到下一个项目，可选的，从最后一个项目返回到第一个项目。 - 当焦点在 menu 的一个具有子菜单的 menuitem 上时，打开子菜单并将焦点放置在其第一个项目上。 - 当焦点在一个 menu 中的不具有子菜单的项目上时，执行以下3个操作： 1. 关闭子菜单和任何父菜单。 2. 将焦点移动到 menuitem 中的下一个 menubar. 3. （推荐）打开该menuitem 的子菜单但不用将焦点移动到子菜单，或者打开该menuitem的子菜单，并将焦点放置在子菜单的第一个项目上。 请注意，如果没有menubar，例如从一个菜单按钮打开一个菜单，当焦点在一个没有子菜单的项目上时， Right Arrow 不会执行任何操作。 + Left Arrow： - 当焦点在一个menubar上时，将焦点移动到上一个项目，可选的，从第一个项目移动到最后一个。 - 当焦点在菜单中一个项目的子菜单时，关闭子菜单并将焦点返回给父级menuitem。 - 焦点在 menubar 栏中的一个项目的子菜单时，执行以下3个操作： 1. 关闭子菜单。 2. 把焦点移到menuitem中的前一个menubar. 3. （推荐）打开该menuitem的子菜单但不用将焦点移动到子菜单，或者打开该menuitem的子菜单，并将焦点放置在子菜单的第一个项目上。 + Home: 如果不支持光标键循环，则将焦点移动到当前menu或menubar 的第一个子项。 + End: 如果不支持光标键循环，则将焦点移动到当前menu 或menubar 的最后一个子项。 + 对应于可打印字符的任意键（可选）：将焦点移动到当前菜单中标签以可打印字符开头的菜单项。 + Escape: 关闭包含焦点的菜单并将焦点返回到元素或上下文，例如打开菜单的菜单按钮或父级menuitem + Tab: 将焦点移动到Tab序列中的下一个元素，并且如果获得焦点的项目不在 menubar 中，关闭其 menu 和所有打开的父级 menu 容器 + Shift + Tab: 将焦点移动到Tab序列中的上一个元素，并且如果获得焦点的项目不在 menubar 中，关闭其 menu 和所有打开的父级 menu 容器 。

NOTE 1. 禁用的菜单项是可聚焦的，但无法激活。 2. 菜单中的separator不可聚焦或交互。 3. 作为上下文操作的结果，如果一个菜单被打开或菜单栏获得焦点， Escape 或 Enter 可能会将焦点返回到调用的上下文。例如，当在编辑文本时按下快捷键时，一个富文本编辑器的菜单栏可能会获得焦点，例如alt + F10。在这种情况下，点击Escape 或从菜单中激活一个命令可能会将焦点返回给编辑器。 4. 尽管建议开发者不要这样做，但还是有一些导航菜单栏的实现，其menuitem 元素既能执行功能又能打开子菜单。在这种实现中， enter 和 Space 执行导航功能，例如，加载新内容，而Down Arrow则在水平menuitem中打开与其相关联的子菜单 5. 当menubar中的项目垂直排列，menu容器中的项目水平排列时： A. Down Arrow 执行 Right Arrow 如上所述的表现，反之亦然。 B. Up Arrow 执行 Left Arrow 如上所述的表现，反之亦然。

WAI-ARIA角色，状态和属性

• 菜单是呈现选项的容器。作为菜单的元素具有menu 或 menubar 角色。
• 包含在菜单中的项目是包含menu或menubar的子元素，并且具有一下任意角色：
  • menuitem
  • menuitemcheckbox
  • menuitemradio
• 如果激活一个 menuitem 会打开一个子菜单，那么该 menuitem 被认为是一个父级。一个子菜单的菜单元素被它的父级 menuitem 包含或拥有。
• 父级menu的aria-haspopup 设置为 true。
• 以下方法可被用于让脚本能够在菜单的项目间移动焦点，如 Keyboard Navigation Inside Components:
  • 菜单容器的 `tabindex 设置为 -1 或 0 并将 aria-activedescendant 设置为聚焦项目的ID。
  • 菜单中的每个项目的 tabindex 设置为-1, 除了菜单栏中的第一个项目的 tabindex 设置为 0。
• 当 menuitemcheckbox 或 menuitemradio 选中时， aria-checked 设置为 true.
• 当菜单项目不可用时，aria-disabled 设置为 true.
• 可以通过在组之间放置具有 separator 角色的元素来将菜单中的项目分成组。例如，当菜单包含一组 menuitemradio 项目时，应使用此技术。
• 所有 separators 应有与其方向一致的 aria-orientation 值。
• 如果一个菜单栏是垂直方向的，它的aria-orientation 值设为 vertical. 菜单栏的 aria-orientation 属性的默认值是 horizontal。
• 如果一个菜单是水平方向的，它的 aria-orientation 值设为 horizontal. 。菜单栏的 aria-orientation 属性的默认值是 vertical。

NOTE 如果在菜单容器上设置aria-owns ，来包含不是该容器DOM子元素的元素，那么这些元素将按照它们被引用的顺序出现在读取顺序中，并且在所有DOM子元素之后。管理焦点的脚本需要确保视觉焦点顺序与此辅助技术阅读顺序相匹配。

菜单按钮

菜单按钮是一个可以打开 menu 的 button 。它的样式通常与典型按钮一样，且带有一个向下的箭头或三角，来提示用户激活按钮会展开一个菜单。

示例

• 导航菜单按钮: 由HTML元素 a 创建的菜单按钮，展开是一个表现为链接的项目菜单。
• 使用element.focus()的操作菜单的按钮示例: 打开菜单上的高亮选项卡的按钮是通过HTML中的 button 元素创建的，而菜单中的焦点是通过element.focus() 进行管理的。
• 使用aria-activedescendant的操作菜单按钮示例:一个打开菜单上的高亮选项卡的按钮，通常用aria-activedescendant进行管理。

键盘交互

• 按钮拥有焦点时:
  • Enter: 打开菜单并将焦点置于第一个菜单项上。
  • Space: 打开菜单并将焦点置于第一个菜单项上。
  • (可选地) Down Arrow: 打开菜单并将焦点置于第一个菜单项。
  • (可选地) Up Arrow: 打开菜单并将焦点置于最后一个菜单项。
• 菜单打开后需要的键盘交互参照 Menu or Menu bar。

WAI-ARIA角色，状态和属性

• 打开菜单的元素具有 button 角色。
• 具有 button 角色的元素，其 aria-haspopup 属性为 menu 或 true。
• 当菜单展开时, 有 button 角色的元素的 aria-expanded 属性设置为 true。 当菜单收起时, 建议不设置 aria-expanded 属性。如果当菜单收起时，设置了 aria-expanded 属性，其值应该为 false。
• 通过激活按钮展开的包含菜单项的元素，具有 menu 角色.
• 可选的，具有 button 角色的元素，其 aria-controls 属性具有特定的值，用来指向具有 menu 角色的元素。
• 在 Menu or Menu bar 中介绍了菜单元素所需的附加角色，状态和属性。

单选按钮组

单选按钮组，是一个可选中按钮的组合，被称为单选按钮，且在该组合中，只有一个按钮处于选中状态。

示例

• 单选按钮组示例使用动态tabindex
• 单选按钮组示例使用aria-activedescendant管理焦点

键盘交互

• 在单选按钮组获取焦点时:
  • 如果有一个单选按钮被选中，那么焦点设置在这个按钮上。
  • 如果没有被选中的单选按钮，那么将焦点设置在第一个单选按钮上。
• Space: 如果该按钮还没有被选中，则选中当前聚焦的单选按钮。
• Right Arrow 和 Down Arrow: 移动焦点到组合中的下一个单选按钮，取消选中先前聚焦的按钮，并且选中新聚焦的按钮。如果焦点在最后一个按钮上，焦点移动到第一个按钮。
• Left Arrow 和 Up Arrow: 移动焦点到组合中的上一个单选按钮，取消选中先前聚焦的按钮，并选中新聚焦的按钮。如果焦点在第一个按钮上，焦点移动到最后一个按钮。

NOTE 上文所述的初始聚焦行为，与一些浏览器为原生HTML按钮组所提供的行为略有不同。在某些浏览器中，如果没有选中任何一个单选按钮，使用 Shift+ Tab 将焦点移动到单选按钮组，焦点将会被放置在最后一个单选按钮，而不是第一个单选按钮。

WAI-ARIA 角色，状态和属性

• 单选按钮被具有 radiogroup 角色的元素包含或拥有。
• 每个单选按钮的role值都为 radio 。
• 如果一个单选按钮被选中，那么该 radio 元素的 aria-checked 将被设置为 true。 如果没有被选中，aria-checked 设置为 false。
• 每一个 radio 元素由其内容标记，使用 aria-labelledby，索引一个可见标签，或使用 aria-label 指定一个标签。
• radiogroup 使用 aria-labelledby 索引一个可见标签，或者使用 aria-label 指定一个标签。
• 如果元素提供了单选按钮组或每个单选按钮的额外信息，这些元素被 radiogroup 元素或 radio 元素使用 aria-describedby 属性索引。

滑块

滑块是供用户从给定范围内选择值的输入控件。滑块通常有个拖动拇指，可以沿着条或轨道移动来改变滑块的值。

示例

• 水平滑块示例: 演示使用三个水平对齐的滑块来制作颜色选择器。
• 具有 aria-orientation and aria-valuetext 属性的滑块示例 : 三个恒温控制滑块，使用 aria-orientation 和 aria-valuetext。

键盘交互

• Right Arrow: 按一定量增加滑块的值；
• Up Arrow: 按一定量增加滑块的值；
• Left Arrow: 按一定量减小滑块的值；
• Down Arrow: 按一定量减小滑块的值；
• Home: 将滑块设置为其范围内的最小值；
• End: 将滑块设置为其范围内的最大值；
• Page Up (可选地): 大幅度增加滑块的值（比 Up Arrow 增加的值大）。
• Page Down (可选地): 大幅度减小滑块的值（比 Down Arrow 减小的值大）。

NOTE

1. 焦点放在滑块上(鼠标用户可以移动的视觉对象，也称为thumb组件)。
2. 在某些场景下，反转上面指定值变化的方向(例如： Up Arrow 减小滑块的值)，可以创建更直观的体验 （译者注：可以理解为滑块为纵向方向排列）

WAI-WRIA 角色、状态和属性

• 每个可聚焦滑块拇指元素具有 slider 角色。
• 每个滑块元素的 aria-valuenow 属性设置为滑块当前的十进制值。
• 每个滑块元素的 aria-valuemin 属性设置为滑块十进制的最小允许值。
• 每个滑块元素的 aria-valuemax 属性设置为滑块十进制的最大允许值。
• 当另一个滑块的范围（如最小值或者最大值）依赖另一个滑块的当前值，当前值改变的时候依赖滑块的 aria-valuemin 或 aria-valuemax 也要更新。
• 如果 aria-valuenow 的值对用户不友好，例如周几一般使用数字呈现，将 aria-valuetext 属性设置为一个字符串，这样滑块值更易理解，例如 "Monday"。
• 如果滑块具有可视的标签，那么滑块元素通过 aria-labelledby 引用，否则滑块元素上设置 aria-label 标签。
• 如果滑块是垂直方向的，则把 aria-orientation 设置为 vertical。滑块的 aria-orientation 的默认值是 horizontal。

button-按钮

按钮 是一个组件，能够让用户触发一个操作或事件，例如提交一个表单、打开一个对话框、取消操作、或执行删除操作。告知用户一个按钮会打开对话框的惯用方法是将“...”（省略号）添加到按钮上，例如“另存为...”

除了常规按钮组件外，WAI-ARIA还支持其他2种按钮类型：

• 切换按钮：可以关闭（未按下）或打开（按下）的双状态按钮。为了告知辅助技术该按钮是个切换按钮，需要为其指定属性 aria-pressed 的值。例如，音频播放器中被标记为静音的按钮可以通过设置其按下状态为 true，来指示声音被静音。重要提示：按钮状态改变时，其标签不改变。在此示例中，当按下状态为 true 时，其标签仍为“静音”，这样屏幕阅读器就会像这样朗读：“静音” 切换按钮“已按下”。或者，如果设计文档要求按钮标签从“静音”变为“取消静音”，则不需要设置 aria-pressed 属性。
• 菜单按钮：如 菜单按钮模式 所述，当其 aria-haspopup 属性设置为 true 或者 menu 时，该按钮会被辅助技术视为一个菜单按钮。

注意 按钮执行的动作类型与链接的功能截然不同（参见 链接模式 ）。组件的外观和角色与其提供的功能相匹配，这非常重要。但是，偶尔某些元素会有链接的视觉样式，却执行按钮的操作。在这种情况下，为元素添加 button 角色，可以帮助辅助技术用户理解元素的功能。但是，更好的解决方案是调整其视觉设计，以匹配其功能和ARIA角色。

键盘互动

当按钮有焦点时：

• Space：激活按钮
• Enter：激活按钮
• 按钮激活后，根据按钮的操作类型设置焦点。例如：
  • 如果激活按钮打开一个对话框，焦点将移动到对话框内。（见 对话模式）
  • 如果激活按钮会关闭一个对话框，焦点通常会返回到打开该对话框的按钮上，除非该对话框执行的功能会遵从上下文的逻辑，去到一个不同的元素。例如，激活对话框中的取消按钮将焦点返回到打开对话框的按钮。但是，如果对话框是确认删除其来自页面的操作，焦点将会根据逻辑移动到一个新的上下文。
  • 如果激活按钮不会关闭当前上下文，按钮激活后，焦点仍停留在该按钮上，例如，一个应用或重新计算的按钮。
  • 如果按钮操作会导致上下文变更，例如，转到向导中的下一步，或添加其他搜索条件，此时，可以将焦点移动到新操作的起点。
  • 如果使用快捷键激活按钮，焦点通常保留在激活快捷键的上下文中。例如，如果把快捷键 Alt+U 分配给“向上”按钮，该按钮会将当前聚焦的列表项目移动到列表中的较高位置，当焦点在列表中时，按 Alt+U 将焦点移出列表。

WAI-ARIA角色，状态和属性

• 按钮具有的角色 button。
• button 有一个可访问的标签
• 默认情况下，可访问名称是从按钮元素内部的所有内容计算得来。但是，无障碍名称也可以使用 aria-describedby 或 aria-label 提供。
• 如果按钮有功能描述，则将按钮元素的 aria-describedby 的值设置为包含描述的元素的ID。
• 当与按钮相关联的动作不可用时，该按钮的 aria-disabled 设置为 true。
• 如果按钮是一个切换按钮，则其具有 aira-pressed 状态属性。当按钮被打开时，该状态属性的值为 true，当被关闭时，该状态属性的值为false。

示例

按钮示例：将可点击的HTML div 和 span 元素作为可访问命令和切换按钮的示例。

数值调节按钮

数值调节按钮是个将值限定在离散数值集合或范围的输入组件。例如，在一个设置闹钟的部件中，一个数值调节按钮允许用户在0-59间选择分钟。

数值调节按钮通常有三个组件，包含一个显示当前值的文本框，一个增加按钮，一个减小按钮。一般来说，文本框是唯一可聚焦组件，因为增加和减小功能可使用光标键访问，一般来说，文本框还允许用户直接编辑其值。

如果数值范围很大，数值调节按钮支持以较小和较大的幅度调节其值。例如，在闹钟示例中，用户可以使用 Up Arrow 和 Down Arrow 以1分钟的步幅改变值，并且可以使用 Page Up 和 Page Down 以10分钟的步幅改变值。

示例

与数值调节按钮相关的动态都记录于 issue 125.

键盘交互

• Up Arrow: 递增。
• Down Arrow: 递减。
• Home: 如果数值调节按钮具有最小值，则设置数值调节按钮的值为最小值。
• End: 如果数值调节按钮具有最大值，则设置数值调节按钮的值为最大值。
• Page Up (可选地): 以大于 Up Arrow 的调节幅度增加值。
• Page Down (可选地): 以大于 Down Arrow 的调节幅度减小值。
• 如果数值编辑按钮的文本框允许直接编辑其值，支持以下键。
  • 适用于设备平台的标准单行文本编辑键（请参阅下面的注释）。
  • 可打印字符: 在文本框中输入字符。注意，许多实现仅允许某些字符作为值的一部分，并防止输入任何其他字符。 例如，小时和分钟的数值调节只允许从0到59的整数值，冒号'：'以及字母'AM'和'PM'。 任何其他字符输入不会更改文本字段的内容和按钮的值。

NOTE

1. 操作过程中焦点仍在文本字段上。
2. 适用于设备平台的标准单行文本编辑键：
   1. 包括输入键，光标移动，选择和文本操作。
   2. 用于编辑功能的标准键分配依赖于操作系统。
   3. 提供文本编辑功能的最强大的方法需要依靠浏览器，浏览器为HTML文本输入类型的组件和具有 contenteditable HTML属性的元素支持文本编辑功能。
   4. 重要: 确保JavaScript不会干扰浏览器提供的文本编辑功能，方法是捕获用于执行它们的事件。

WAI-WRIA 角色、状态和属性

• 作为数值调节按钮的可聚焦元素具有 spinbutton 角色。一般来说，是支持文本输入的元素。
• spinbutton元素的 aria-valuenow 属性用十进制值，表示当前值。
• 如果它具有已知的最小值，spinbutton元素的 aria-valuemin 属性设置为十进制值，表示数值调节按钮的最小允许值。
• 如果它具有确定的最大值，spinbutton元素的 aria-valuemax 属性设置为十进制值，表示数值调节按钮的最大允许值。
• 如果 aria-valuenow 的值用户不好理解，例如周几一般使用数字呈现，可以将spinbutton元素的 aria-valuetext 属性设置为一个字符串，让数值选择按钮的值更好理解，例如 "Monday"。
• 如果spinbutton具有一个可见标签，在spinbutton元素上使用 aria-labelledby 索引，否则，使用 aria-label 属性为spinbutton元素提供一个标签。

译者：李文举（jace li）、 练小习（jiraa）、秧歌（yang）、蒸包（zhengbao）、考拉（cola）

校对：信息无障碍研究会