前言
WAI-ARIA最佳实践是开发实践中极具指导意义的一篇文档，对每个常见组件或控件的使用情景和交互细节都做了详细说明，团队小伙伴们选取了其中最重要的部分进行了翻译，包括布局、表单和常用组件三篇。今日早读文章由腾讯云5位前端童鞋翻译投稿分享。
@练小习，腾讯高级工程师，前端手艺人。
@秧歌，前端爱好者，关注前端无障碍优化。
@蒸包，腾讯云前端开发。爱好: 养猫
@考拉，前端开发，喜欢新玩意，有机会可以交流一下。
@信息无障碍研究会，中国最早专注于信息无障碍的专业机构，组建了国内首支信息无障碍专家团队，为企业提供专业咨询服务。
正文从这开始～
面包屑
面包屑包含当前页面的父页面的链接列表，该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。
示例
面包屑设计模式示例
键盘交互
不适用
WAI-ARIA 角色，状态和属性
面包屑路径被包含在导航界标区域内。
navigation界标区域使用 aria-label 或 aria-labelledby 标记。
当前页面的链接的 aria-current 属性设置为
page。如果呈现当前页面的元素不是个链接，aria-current可选。
网格：交互式表格数据和布局容器
网格 组件是一个容器，能够让用户使用方向导航键，例如 arrow keys、 Home 和 End，来浏览其包含的信息和与其包含的元素进行交互。作为提供灵活键盘导航的通用容器小部件，它可以满足各种各样的需求。它可以用于简单的组合复选框或导航链接的集合，也可用于复杂的目的，例如完整功能的电子应用表格。尽管 WAI-ARIA 属性和辅助技术使用”row” 和 “column” 的术语，描述和呈现 grid 角色元素的逻辑结构，但是在元素上使用 grid 角色，并不需要将其视觉呈现实现为表格。
当呈现的内容是表格时，从 grid 和 table 中选择实现模式时，考虑以下因素。
grid是一个复合小部件，所以它：始终包含多个可聚焦元素。
在页面Tab序列中只有一个可聚焦元素。
需要作者提供 manages focus movement inside it 的代码。
Table中的所有可聚焦元素均被包含在页面Tab序列中。
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
当使用以上网格导航键移动焦点时，根据单元格内容，在单元格内元素或网格单元格上设置焦点。 请参阅 Whether to Focus on a Cell or an Element Inside It。
当使用导航键在单元格间移动焦点，例如光标键，它们不能用于某些操作，例如操作组合框或在单元格内移动编辑光标。如果需要此功能，请参阅 Editing and Navigating Inside a Cell。
如果导航功能可以动态地向DOM添加更多的行或列，则将焦点移动到网格的开头或结尾的键盘事件（例如
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
当使用以上网格键移动焦点时，根据单元格内容，决定焦点是否设置在单元格内的元素上或网格单元格上。 请参阅 Whether to Focus on a Cell or an Element Inside It.
当使用导航键在单元格间移动焦点时，它们不可用于类似操作组合框或在单元格内移动输入光标等的事情。如果需要此功能，请参阅Editing and Navigating Inside a Cell。
如果导航功能可以动态地向DOM中添加更多的行或列，则移动焦点到网格的开头或结尾的键盘事件（例如
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: 禁用网格导航以及：如果单元格包含可编辑内容，将焦点放置在输入框中，例如 textbox。如果输入框是个单行文本框，连续按 Enter ，会重置网格导航功能，或移动焦点到附近单元格的输入框中。
如果单元格包含一个或多个组件，将焦点放置在第一个组件上。
F2:如果单元格包含可编辑的内容，则会将焦点放在输入字段中，例如 textbox。随后按下 F2 恢复网格导航功能。
如果单元格包含一个或多个组件，将焦点放置在第一个组件上。随后按下 F2 恢复网格导航功能。
字母数字键: 如果单元格包含可编辑的内容，则会将焦点放在输入框中，例如 textbox。
当网格导航被禁用时，导航行为的常规更改包括：
Escape: 恢复网格导航。如果正在编辑内容，它也可能会撤消修改。Right Arrow或者Down Arrow: 如果单元格包含多个小组件，将焦点移动到单元格的内下一个小组件，如果焦点在最后一个组件上，可选`地，将焦点返回给第一个小组件，或者，传递按键事件到当前聚焦的组件。Left Arrow或者Up Arrow: 如果单元格包含多个小组件，将焦点移动到单元格的内前一个小组件，如果焦点在最后一个组件上，可选地，将焦点返回给第一个小组件，或者，传递按键事件到当前聚焦的组件。Tab: 将焦点移动到网格中的下一个组件。可选地，焦点可能会在一个单元格内循环，或在网格内循环。Shift + Tab: 将焦点移动到网格中的上一个组件。可选地，焦点可能会在一个单元格内循环，或在网格内循环。
WAI-ARIA 角色，状态和属性
网格容器具有角色 grid。
每个行容器都具有 row 角色，并且是 grid 元素或 rowgroup 角色元素的后代，或被其拥有。
每个单元格是
row元素的DOM后代，或被row元素拥有，并且具有以下角色之一：columnheader 如果单元格包含标题或列的标题信息。
rowheader 如果单元格包含标题或行的标题信息。
gridcell 如果单元格不包含列或行的标题信息。
如果在用户界面中有一个元素是网格的标签，在网格元素上设置 aria-labelledby 属性，该属性的值指向该标签元素。否则，使用 aria-label为网格元素指定一个标签。
如果网格具有一个说明或描述，在网格元素上设置 aria-describedby 属性，其值指向包含描述的元素。
如果网格提供排序功能，则在头部单元格上为 aria-sort 属性设置合适的值，来对行或列进行排序，如 grid and table properties 部分所述。
如果网格支持选择，当单元格或行被选择时，被选择元素的 aria-selected 设置为
true。如果网格提供内容编辑功能，并且包含在某些条件下禁用编辑功能的单元格，在编辑功能被禁用时，设置
aria-readonly为true。如果所有单元格的编辑功能都被禁用，在网格元素上设置 aria-readonly 为true。不提供编辑功能的网格在任何元素上都不包含aria-readonly属性。如果存在某些行或列在DOM中被隐藏或不存在的情况，例如当滚动时自动加载数据，或者网格提供了隐藏行或列的功能，使用以下属性，如grid and table properties 所述。
aria-colcount 或 aria-rowcount 分别设置为列或行的总数。
aria-colindex 或 aria-rowindex 设置为单元格在行或列中的位置。
如果网格包含跨多行或多列的单元格，并且如果
grid角色未应用于HTMLtable元素，则应用 aria-rowspan 或 aria-colspan，如 grid and table properties 所述。
NOTE
如果具有
grid角色的元素是HTMLtable元素，那么不必为行和单元格使用ARIA角色，因为HTML元素暗含了ARIA语义。例如，HTMLTR具有隐含的ARIA角色row。一个从HTMLtable构建的 网格，包含跨越多行或多列的单元格，必须使用HTMLrowspan和colspan属性，不能使用aria-rowspan或aria-colspan。如果通过aria-owns属性将行或列包含在网格中，它们将在网格元素的DOM后代之后呈现给辅助技术，除非DOM后代也被包含在给 aria-owns 属性中。请参阅使用
aria-owns进行详细说明。
工具栏
工具栏 是一个对控件进行分组的容器，例如，按钮、菜单按钮、或复选框。
当一组控件在视觉上呈现为一个组合，可以使用 toolbar 角色来告知屏幕阅读器用户分组的呈现和目的。组合控件到工具栏，在键盘交互中是一个减少Tab停留数量的有效方式。
优化工具栏小部件的优点：
实现焦点管理，这样在Tab顺序中只包含一个toolbar站点，使用光标键可以在toolbar的控件间移动焦点。
避免在工具栏中包含需要光标键操作的控件，例如文本框或单选按钮。如果必须使用，只能包含一个这样的控件且让其作为最后一个元素。
当且仅当组合中包含三个或三个以上的控件时，才能使用工具栏作为分组元素。
键盘交互
当工具栏获取焦点时，焦点被设置在第一个可用控件上。或者，如果工具栏先前已获取过焦点，则焦点被设置在工具栏中最后一个被聚焦的元素上。（译者注：一般情况下，屏幕阅读器用户会使用Tab快速浏览页面上的内容，顺序为从上到下、从左到右，此时，若工具栏获取焦点，则将焦点设置在第一个可聚焦的元素上，若使用
Shift + tab反向浏览，若工具栏获取焦点，则将焦点设置在最后一个可聚焦的元素上。）水平工具栏(默认)：
Left Arrow: 将焦点移动到上一个控件。可选地：焦点从第一个控件移动到最后一个控件上。Right Arrow: 将焦点移动到下一个控件。可选地：焦点从最后一个控件移动到第一个控件上。Home(可选地): 将焦点移动到第一个元素。End(可选地): 将焦点移动到最后一个元素。
NOTE
如果工具栏中的项目垂直排列：
Down Arrow与Right Arrow功能一样。Up Arrow与Left Arrow功能一样。般来说，使用键盘进行导航时，不可用元素不可聚焦。但是，在某些需要发现功能的场景中，如果不可用元素可聚焦，可以帮助屏幕阅读器用户发现这些功能的存在。相关指导信息，请参阅 Focusability of disabled controls。
在应用程序中，快速访问工具栏非常重要，例如，从编辑器的文本区域快速访问到编辑器的工具栏，建议使用文档快捷键，从相关上下文中移动焦点到对应工具栏。
WAI-WRIA 角色、状态和属性
用于工具栏容器的元素设置role为 toolbar。
如果工具栏有可视的标签，它被工具栏元素上的 aria-labelledby 引用。否则，工具栏元素具有由 aria-label提供的标签。
如果工具栏控件是垂直排列的，工具栏元素应该设置 aria-orientation 为
vertical。其默认值为horizontal。
关于本文
译者：@李文举、@练小习、@秧歌、@蒸包、@考拉
译文：
https://cloud.tencent.com/developer/article/1138992
作者：@W3C
原文：
https://www.w3.org/TR/wai-aria-practices-1.1/
最后，为你推荐