键盘导航

概述

许多人浏览数字内容主要或完全使用键盘，而不是鼠标或滑动手势。这包括依赖屏幕阅读器的视力受限的人，以及运动功能受限的人。

您的数字内容的所有功能必须仅通过键盘访问。这包括标准内容导航、使用菜单选项和填写表单。如果某些功能无法通过键盘访问，则某些用户将无法使用部分数字内容。

指导方针

焦点顺序和表索引

• 所有交互式内容必须可以使用键盘访问。这包括链接、按钮、表单和图像轮播等可控元素。它不包括图像、标题和标准文本。
• 元素以逻辑阅读顺序接收焦点。这通常是从左到右，从上到下，但如果有人以不同的顺序合理地阅读该内容，则可能略有不同。
• 可以使用tabindex属性显式地允许项以键盘为焦点。
• 对焦顺序计算如下：
  • 首先：按升序循环遍历页上tabindex大于0的所有元素。具有重复tabindex值的项会根据它们在DOM中的顺序高亮显示。这允许您覆盖默认的选项卡顺序，并且在CSS使某些页面元素呈现在DOM之外的情况下可能是合适的。过度使用正tabindex值会造成可维护性问题，应该谨慎使用。
  • 接下来：关注所有其他交互项，包括tabindex=0的项，根据它们在DOM中的位置。

视觉焦点

• 具有活动焦点的元素应该有一个视觉指示器，以便用户知道它们在页面上的位置。
• 只要可能，这个视觉指示器应该与页面上的所有元素保持一致。例如，当所有元素收到焦点时，给它们一个大的黑色矩形边框。
  • 当默认焦点样式不明显时，提供备份自定义焦点样式。如果按钮的默认非活动状态带有黑色边框，则在焦点上添加额外的黑色边框是不够明显的。

维护状态

• 如果内容的状态发生了变化，比如打开了一个对话框，那么键盘焦点应该澳门金沙娱乐城app到该对话框中的第一个元素上。关闭该框将使键盘焦点返回到状态改变之前的位置。
• 用户改变焦点不应该导致新页面打开（对话框和弹出窗口都可以）、提交表单或页面内容以实质性或不可逆转的方式改变。
• 不应该有任何“键盘陷阱”、窗口、选项或其他状态，用户在不重新加载页面的情况下无法退出当前的选择。

如何测试

键盘导航可以手动完成，不需要任何特殊工具。键盘导航器使用以下键在页面中导航：

• 选项卡，在内容中向前移动。
• Shift-Tab键，在内容中向后移动。
• 输入，以激活当前元素。
• Escape，退出任何打开的提示或对话框。
• 箭头，特别是在导航下拉菜单时，以及某些类型的表格内容（如电子表格）时。
• 不太常见的是，空格键被用作选择项的替代选项，特别是在表单中。

通过Tab键浏览页面上的所有元素，然后将Tab键移回到顶部。验证每个交互元素都是可访问的，项目以逻辑阅读顺序接收焦点，每个项目都有一致的视觉焦点指示器。

选择交互式项目，并验证它们的行为与您用鼠标单击它们的行为相同。

打开菜单或对话框（如果适用），并验证您能够使用escape键退出它们。验证这些操作不会实质上改变页面的状态。