WAI-ARIA支持两种类型的 checkbox:
三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。
用户仅使用一个操作,就可以改变三态复选框组中所有选项的状态:
示例
mixed
的 aria-checked
值制作一个组件。键盘交互
当复选框拥有焦点时, 按 Space 键来改变复选框的状态
WAI-ARIA角色,状态和属性
aria-labelledby
关联可见标签:checkbox
元素里面。checkbox
的元素上通过 aria-labelledby 属性的值为一个可见的内容。checkbox
元素上。true
。false
。mixed
。链接 组件提供了对资源的交互索引。目标资源可以是外部的的,也可以是本地的,例如,当前页面内、页面外、应用。
NOTE 作者们强烈建议使用原生语言的链接元素,例如一个具有
href
属性的HTMLA
元素。与其他 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:在为文本域提供文本格式化命令的菜单栏中的子菜单上演示单选和多选菜单。
键盘交互
以下为键盘行为的假定描述:
menubar
包含数个 menuitem 元素。menubar
中的所有项目都有子菜单,所有子菜单都有很多垂直排列的项目。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角色,状态和属性
menuitem
被认为是一个父级。一个子菜单的菜单元素被它的父级 menuitem
包含或拥有。menu
的aria-haspopup 设置为 true
。tabindex
设置为-1
, 除了菜单栏中的第一个项目的 tabindex
设置为 0
。true
.true
.vertical
. 菜单栏的 aria-orientation
属性的默认值是 horizontal
。horizontal
. 。菜单栏的 aria-orientation
属性的默认值是 vertical
。NOTE 如果在菜单容器上设置aria-owns ,来包含不是该容器DOM子元素的元素,那么这些元素将按照它们被引用的顺序出现在读取顺序中,并且在所有DOM子元素之后。管理焦点的脚本需要确保视觉焦点顺序与此辅助技术阅读顺序相匹配。
菜单按钮是一个可以打开 menu 的 button 。它的样式通常与典型按钮一样,且带有一个向下的箭头或三角,来提示用户激活按钮会展开一个菜单。
示例
a
创建的菜单按钮,展开是一个表现为链接的项目菜单。element.focus()
进行管理的。键盘交互
Enter
: 打开菜单并将焦点置于第一个菜单项上。Space
: 打开菜单并将焦点置于第一个菜单项上。Down Arrow
: 打开菜单并将焦点置于第一个菜单项。Up Arrow
: 打开菜单并将焦点置于最后一个菜单项。WAI-ARIA角色,状态和属性
button
角色的元素,其 aria-haspopup 属性为 menu
或 true
。button
角色的元素的 aria-expanded 属性设置为 true
。 当菜单收起时, 建议不设置 aria-expanded
属性。如果当菜单收起时,设置了 aria-expanded
属性,其值应该为 false
。button
角色的元素,其 aria-controls 属性具有特定的值,用来指向具有 menu
角色的元素。单选按钮组,是一个可选中按钮的组合,被称为单选按钮,且在该组合中,只有一个按钮处于选中状态。
示例
键盘交互
Space
: 如果该按钮还没有被选中,则选中当前聚焦的单选按钮。Right Arrow
和 Down Arrow
: 移动焦点到组合中的下一个单选按钮,取消选中先前聚焦的按钮,并且选中新聚焦的按钮。如果焦点在最后一个按钮上,焦点移动到第一个按钮。Left Arrow
和 Up Arrow
: 移动焦点到组合中的上一个单选按钮,取消选中先前聚焦的按钮,并选中新聚焦的按钮。如果焦点在第一个按钮上,焦点移动到最后一个按钮。NOTE 上文所述的初始聚焦行为,与一些浏览器为原生HTML按钮组所提供的行为略有不同。在某些浏览器中,如果没有选中任何一个单选按钮,使用
Shift+ Tab
将焦点移动到单选按钮组,焦点将会被放置在最后一个单选按钮,而不是第一个单选按钮。
WAI-ARIA 角色,状态和属性
radio
元素的 aria-checked 将被设置为 true
。 如果没有被选中,aria-checked 设置为 false
。radio
元素由其内容标记,使用 aria-labelledby,索引一个可见标签,或使用 aria-label 指定一个标签。radiogroup
使用 aria-labelledby
索引一个可见标签,或者使用 aria-label
指定一个标签。radiogroup
元素或 radio
元素使用 aria-describedby 属性索引。滑块是供用户从给定范围内选择值的输入控件。滑块通常有个拖动拇指,可以沿着条或轨道移动来改变滑块的值。
示例
aria-orientation
和 aria-valuetext
。键盘交互
Right Arrow
: 按一定量增加滑块的值;Up Arrow
: 按一定量增加滑块的值;Left Arrow
: 按一定量减小滑块的值;Down Arrow
: 按一定量减小滑块的值;Home
: 将滑块设置为其范围内的最小值;End
: 将滑块设置为其范围内的最大值;Page Up
(可选地): 大幅度增加滑块的值(比 Up Arrow
增加的值大)。Page Down
(可选地): 大幅度减小滑块的值(比 Down Arrow
减小的值大)。NOTE
WAI-WRIA 角色、状态和属性
aria-valuenow
的值对用户不友好,例如周几一般使用数字呈现,将 aria-valuetext 属性设置为一个字符串,这样滑块值更易理解,例如 "Monday"。vertical
。滑块的 aria-orientation
的默认值是 horizontal
。按钮 是一个组件,能够让用户触发一个操作或事件,例如提交一个表单、打开一个对话框、取消操作、或执行删除操作。告知用户一个按钮会打开对话框的惯用方法是将“...”(省略号)添加到按钮上,例如“另存为...”
除了常规按钮组件外,WAI-ARIA还支持其他2种按钮类型:
true
,来指示声音被静音。重要提示:按钮状态改变时,其标签不改变。在此示例中,当按下状态为 true
时,其标签仍为“静音”,这样屏幕阅读器就会像这样朗读:“静音” 切换按钮“已按下”。或者,如果设计文档要求按钮标签从“静音”变为“取消静音”,则不需要设置 aria-pressed
属性。true
或者 menu
时,该按钮会被辅助技术视为一个菜单按钮。注意 按钮执行的动作类型与链接的功能截然不同(参见 链接模式 )。组件的外观和角色与其提供的功能相匹配,这非常重要。但是,偶尔某些元素会有链接的视觉样式,却执行按钮的操作。在这种情况下,为元素添加
button
角色,可以帮助辅助技术用户理解元素的功能。但是,更好的解决方案是调整其视觉设计,以匹配其功能和ARIA角色。
当按钮有焦点时:
Space
:激活按钮Enter
:激活按钮Alt+U
分配给“向上”按钮,该按钮会将当前聚焦的列表项目移动到列表中的较高位置,当焦点在列表中时,按 Alt+U
将焦点移出列表。button
有一个可访问的标签true
。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
的调节幅度减小值。NOTE
contenteditable
HTML属性的元素支持文本编辑功能。WAI-WRIA 角色、状态和属性
aria-valuenow
的值用户不好理解,例如周几一般使用数字呈现,可以将spinbutton元素的 aria-valuetext 属性设置为一个字符串,让数值选择按钮的值更好理解,例如 "Monday"。译者:李文举(jace li)、 练小习(jiraa)、秧歌(yang)、蒸包(zhengbao)、考拉(cola)
校对:信息无障碍研究会
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。