面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。
示例
键盘交互
不适用
WAI-ARIA 角色,状态和属性
page
。如果呈现当前页面的元素不是个链接,aria-current
可选。网格 组件是一个容器,能够让用户使用方向导航键,例如 arrow keys
、 Home
和 End
,来浏览其包含的信息和与其包含的元素进行交互。作为提供灵活键盘导航的通用容器小部件,它可以满足各种各样的需求。它可以用于简单的组合复选框或导航链接的集合,也可用于复杂的目的,例如完整功能的电子应用表格。尽管 WAI-ARIA 属性和辅助技术使用"row" 和 "column" 的术语,描述和呈现 grid
角色元素的逻辑结构,但是在元素上使用 grid
角色,并不需要将其视觉呈现实现为表格。
当呈现的内容是表格时,从 grid
和 table 中选择实现模式时,考虑以下因素。
grid
是一个复合小部件,所以它:grid
模式的使用大致可分为两类:展示表格信息(数据表格)和集合其他部件(布局栅格)。尽管数据网格和布局栅格使用相同的ARIA角色、状态和属性,它们内容和目的中的不同是考虑键盘交互设计的重要因素。为了强调这些因素,以下两节分别介绍了数据网格和数据栅格的键盘交互模式。
示例
呈现表格信息的数据网格
grid
可用于显示具有列标题,行标题或两者均有的表格信息。如果表格信息是可编辑的或可交互的, grid
模式特别有用。例如,当数据元素是更多信息的链接时,不是将它们呈现在静态表格中并在页面tab序列中包含所有链接,实现 grid
模式提供给用户更加直观和有效的键盘导航方式,同时缩短了页面的tab序列的长度。 grid
还可以提供诸如单元格内容编辑,选择,剪切,复制和粘贴等功能。
在一个呈现表格数据的 grid
中,每一个单元格都包含一个可聚焦的元素或其单元格本身可聚焦,无论单元格内容是否可编辑或可交互。有一个例外:如果行列的表头单元格没有提供功能,例如排序或过滤,它们不需要可聚焦。一个原因是当用户与 grid
交互时,屏幕阅读器需要处于应用阅读模式,而不是文档阅读模式,这非常重要。在应用阅读模式时,屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。因此,屏幕阅读器用户可能会在不知情的情况下忽略网格中包含的元素,当它们不可聚焦或不用于标记列或行。
数据网格键盘交互
以下键通过在网格的单元格之间移动焦点来提供网格导航。默认情况下,这些键盘命令在网格元素接收到焦点后默认可用。例如,用户将焦点移动具有 Tab 的网格后。
Right Arrow
: 将焦点向右移动一个单元格。如果焦点位于行中最右侧的单元格,则焦点不会移动。Left Arrow
: 将焦点向左移动一个单元格。如果焦点位于行中最左侧的单元格,则焦点不会移动。Down Arrow
: 将焦点往下移动一个单元格。如果焦点位于列中的底部单元格上,则焦点不会移动。Up Arrow
: 将焦点往下移动一个单元格。如果焦点位于列中的顶部单元格上,则焦点不会移动。Page Down
: 以开发者设定的行数移动焦点,一般滚动时,当前可见行集合中的最后一行会变为第一次滚动后可见行中的一行。Page Up
: 移动焦点到开发者设定的行数,一般滚动时,当前可见行集合中的第一行会变为滚动后可见行中的一行。Home
: 将焦点移动到包含焦点所在行的第一个单元格。End
: 将焦点移动到包含焦点所在行的最后一个单元格。Control + Home
: 将焦点移动到第一行中的第一个单元格。Control + End
: 将焦点移动到最后一行的最后一个单元格。NOTE
control + End
),可将焦点移动到DOM中的最后一行,而不是先前可用数据的最后一行。如果网格支持单元格、行、列的选择,一般使用以下的键实现这些功能。
Control + Space
: 选择包含焦点的列。Shift + Space
: 选择包含焦点的行。如果网格包含带有用于选择行的复选框的列,则该键可以用作在焦点不在复选框时勾选框的快捷方式。Control + A
: 选择所有单元格。Shift + Right Arrow
: 向右扩展选择一个单元格。Shift + Left Arrow
: 向左扩展选择一个单元格。Shift + Down Arrow
: 向下扩展选择一个单元格。Shift + Up Arrow
: 向上扩展选择一个单元格。NOTE 有关剪切,复制和粘贴键的分配,请参阅 Key Assignment Conventions for Common Functions。
组合部件的布局栅格
grid
模式可被用于组合一组可交互元素,例如链接、按钮、和复选框。由于整个网格只有一个元素包含在tab序列中,所以使用网格进行分组可以显著减少页面上的tab步骤。如果滚动元素列表会从一个大数据集中动态地加载更多的元素,例如在购物类网站中的推荐产品的连续列表中,该模式尤其有用。如果像这样的列表元素都在tab序列中,键盘用户会被困在列表中。如果组中的任何元素在鼠标悬停时都会出现关联元素, grid
模式用来为用户界面的上下文元素提供键盘访问。
与用于呈现数据的网格不同,用于布局的 grid
不一定具有用于标记行或列的标题单元格,并且可能只包含单个行或单个列。即使有多个行和列,它也可能呈现一个独立、逻辑上相同的元素集合。例如,消息的收件人列表可能是个网格,其每个单元格包含一个代表收件人的链接。网格最初可能只有一行,但是随着收件人的添加,会变为多行。在这样的情况下,网格导航键也需要换行,以便用户可以使用 Right Arrow 和 Down Arrow 来从列表开头阅读到末尾。虽然在布局栅格中这种类型的焦点移动换行非常有用,但是如果在数据网格中使用就会让用户迷失方向,尤其是辅助技术的用户。
因为光标键被用来在 grid
中移动焦点,如果其包含的元素不需要光标键来操作, grid
将会更容器构建和使用。如果一个单元格包含类似listbox的元素,则需要额外的键盘命令来聚焦和激活 listbox,和恢复网格导航功能的命令。支持这个需求的方法在 Editing and Navigating Inside a Cell部分进行描述。
布局栅格的键盘互动
以下键通过在网格的单元格之间移动焦点来提供网格导航。这些键盘命令在 Tab 中的元素接收焦点后默认可用。
Right Arrow
: 将焦点向右移动一个单元格。可选地,如果焦点位于行中最右侧的单元格上,则焦点可能会移动到下一行中的第一个单元格。如果焦点位于网格中的最后一个单元格上,则焦点不会移动。Left Arrow
: 将焦点向左移动一个单元格。可选地,如果焦点位于行中最左侧的单元格上,则焦点可能会移动到上一行中的最后一个单元格。如果焦点位于网格中的第一个单元格上,则焦点不会移动。Down Arrow
: 将焦点向下移动一个单元格。可选地,如果焦点位于列中的底部单元格上,则焦点可能会移动到下一列的顶部单元格。如果焦点位于网格中的最后一个单元格上,则焦点不会移动。Up Arrow
: 将焦点向上移动一个单元格。可选地,如果焦点位于当前列的顶部单元格上,则焦点可能会移动到前一列的最后一个单元格。如果焦点位于网格的第一个单元格上,则焦点不会移动。Page Down
(可选地): 以开发者设定的行数向上移动焦点,一般情况下,当前可见行中的第一行会成为滚动后可见行中的一行。Page Up
(可选地): 将对象移动到作者确定的行数上,通常是滚动的,因此当前可见的行行中的顶行将成为最后一个可见行之一。如果焦点位于网格的第一行,则焦点不会移动。Home
: 将焦点移动到包含焦点的行中的第一个单元格。可选地,如果网格具有单列或每行少于三个单元格,则焦点可以替代地移动到网格中的第一单元格。End
: 将焦点移动到包含焦点的行中的最后一个单元格。可选地,如果网格具有单个列或每行少于三个单元格,则焦点可以替代地移动到网格中的最后一个单元格。Control + Home
(可选地): 将焦点移动到第一行中的第一个单元格。Control + End
(可选地): 将焦点移动到最后一行的最后一个单元格。NOTE
control + End
),可将焦点移动到DOM中的最后一行,而不是后端数据中可用的最后一行。为栅格布局提供需要单元格选择功能,是不常见的。虽然如此,但当确实需要时,这些功能一般使用以下的键:
Control + Space
: 选择包含焦点的列。Shift + Space
: 选择包含焦点的行。如果网格包含用于选择行的复选框的列,当焦点不在复选框上时,可作为选中复选框的快捷键。Control + A
: 选择所有单元格。Shift + Right Arrow
: 向右扩展选择一个单元格。Shift + Left Arrow
: 向左扩展选择一个单元格。Shift + Down Arrow
: 向下扩展选择一个单元格。Shift + Up Arrow
: 向上扩展选择一个单元格。NOTE 有关剪切,复制和粘贴键的分配,请参阅 Key Assignment Conventions for Common Functions。
键盘交互 — 设置焦点和导航单元格内容
本节介绍了数据和布局网格模式共有的键盘交互设计的两个重要方面:
1、选择单元格或单元格内元素接收焦点,来响应网格导航键盘按键事件。 2、启用网格导航键,用来与单元格内元素进行交互。
是否聚焦单元格或其包含的元素
对于辅助技术用户,导航网格时的体验质量很大程度上取决于单元格包含的内容以及设置键盘焦点的位置。例如如果一个单元格包含一个按钮,网格导航键在单元格上放置焦点,而不是按钮上,屏幕阅读器会朗读出按钮的标签,但不会告知用户存在一个按钮。
有两种最佳的单元格设计和聚焦行为组合:
但是组件、文本和图像的任意组合都可能被包含在一个单元格中,不遵循以上两种设置和焦点移动模式的网格,会增加开发者或用户或两者的复杂性。下面样例部分中包含的参考实现,给出了让其他单元格设计尽可能可访问的一些策略,但是使用以上两种模式,才能获得最大程度的无障碍体验。
在单元格内编辑和导航
当使用导航键在单元格间移动焦点,它们不能用来执行像操作组合框或在单元格内移动光标的操作。用户可能需要用于网格导航的键来操作单元格内的元素,如果单元格包含:
以下为禁用和恢复网格导航功能的惯用键盘操作。
Enter
: 禁用网格导航以及:F2
:当网格导航被禁用时,导航行为的常规更改包括:
Escape
: 恢复网格导航。如果正在编辑内容,它也可能会撤消修改。Right Arrow
或者 Down Arrow
: 如果单元格包含多个小组件,将焦点移动到单元格的内下一个小组件,如果焦点在最后一个组件上,可选`地,将焦点返回给第一个小组件,或者,传递按键事件到当前聚焦的组件。Left Arrow
或者 Up Arrow
: 如果单元格包含多个小组件,将焦点移动到单元格的内前一个小组件,如果焦点在最后一个组件上,可选地,将焦点返回给第一个小组件,或者,传递按键事件到当前聚焦的组件。Tab
: 将焦点移动到网格中的下一个组件。可选地,焦点可能会在一个单元格内循环,或在网格内循环。Shift + Tab
: 将焦点移动到网格中的上一个组件。可选地,焦点可能会在一个单元格内循环,或在网格内循环。WAI-ARIA 角色,状态和属性
row
元素的DOM后代,或被row元素拥有,并且具有以下角色之一:true
。aria-readonly
为 true
。如果所有单元格的编辑功能都被禁用,在网格元素上设置 aria-readonly 为 true
。不提供编辑功能的网格在任何元素上都不包含 aria-readonly
属性。grid
角色未应用于HTML table
元素,则应用 aria-rowspan 或 aria-colspan,如 grid and table properties 所述。NOTE
grid
角色的元素是HTML table
元素,那么不必为行和单元格使用ARIA角色,因为HTML元素暗含了ARIA语义。例如,HTMLTR
具有隐含的ARIA角色 row
。一个从HTML table
构建的 网格,包含跨越多行或多列的单元格,必须使用HTML rowspan
和 colspan
属性,不能使用 aria-rowspan
或 aria-colspan
。aria-owns
进行详细说明。工具栏 是一个对控件进行分组的容器,例如,按钮、菜单按钮、或复选框。
当一组控件在视觉上呈现为一个组合,可以使用 toolbar
角色来告知屏幕阅读器用户分组的呈现和目的。组合控件到工具栏,在键盘交互中是一个减少Tab停留数量的有效方式。
优化工具栏小部件的优点:
键盘交互
Shift + tab
反向浏览,若工具栏获取焦点,则将焦点设置在最后一个可聚焦的元素上。)Left Arrow
: 将焦点移动到上一个控件。可选地:焦点从第一个控件移动到最后一个控件上。Right Arrow
: 将焦点移动到下一个控件。可选地:焦点从最后一个控件移动到第一个控件上。Home
(可选地): 将焦点移动到第一个元素。End
(可选地): 将焦点移动到最后一个元素。NOTE
Down Arrow
与 Right Arrow
功能一样。Up Arrow
与 Left Arrow
功能一样。WAI-WRIA 角色、状态和属性
vertical
。其默认值为 horizontal
。译者:李文举(jace li)、 练小习(jiraa)、秧歌(yang)、蒸包(zhengbao)、考拉(cola)
校对:信息无障碍研究会
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。