网络辅助功能 - 从选项卡面板导航到选项卡

Question

我有一个由选项卡布局组成的模式，用于输入一些表单数据。该表格是一个可能很长的无线电组列表。

用户要返回选项卡，目前他们必须通过单选按钮一直按住 Shift+Tab 才能返回选项卡。

我知道 escape 应该关闭模式。从选项卡面板返回到选项卡的预期键盘导航是什么，这样用户就不必通过所有单选按钮切换选项卡？

Answer 1

没有预定义的标准键盘快捷键可以从内容内部返回到选项卡控件。

在本机应用程序中，您可以使用 Ctrl+Tab/Ctrl+Shift+Tab 或 Ctrl+PageDown/Up，有时也可以使用 Ctrl+数字转到下一个/上一个选项卡。 然而，在网络上，这些快捷方式当然已经用于控制浏览器本身的选项卡。您将无法拦截它们供自己使用，即使可以，这也是一个非常糟糕的主意，因为您会阻止用户更改浏览器选项卡。

如果你的模态对话框又大又长，也许你可以考虑修改退出键的行为。 第一次按下时，您将返回选项卡控件，如果您已经位于选项卡控件上，则会关闭对话框。 然后，用户必须按两次转义键才能完全关闭对话框。这是对标准转义行为的改变，但它可能比定义一个全新的键盘快捷键更容易接受，因为它是未知的，或者他们没有在适当的时候获得信息或不记得它，所以没有人会使用它。

更一般地说，这可能表明您的 UI 设计过于复杂，您应该简化它或以不同的方式组织它。 分成不同的对话框（例如每个选项卡一个）怎么样？创建可以展开/折叠的组？等等

可访问性的一个重要部分就是让事情变得简单。如果太复杂而无法轻松完成，也许您应该简化。

Answer 2

Web 应用程序中没有为此操作定义这样的键盘快捷键。 如果您查看 W3 创作实践文档中关于“选项卡”的“键盘交互”部分：

对于选项卡列表：

• Tab

  ：
  • 当焦点移动到选项卡列表中时，将焦点置于活动的

    tab

    元素上。
  • 当选项卡列表包含焦点时，将焦点移动到选项卡列表外部页面选项卡序列中的下一个元素，即选项卡面板，除非选项卡面板内包含有意义内容的第一个元素是可聚焦的。
• 当焦点位于水平选项卡列表中的选项卡元素上时：

  • Left Arrow

    ：将焦点移至上一个选项卡。如果焦点位于第一个选项卡上，则将焦点移至最后一个选项卡。 （可选）激活新聚焦的选项卡（请参阅下面的注释）。

  • Right Arrow

    ：将焦点移至下一个选项卡。如果焦点位于最后一个选项卡元素上，则将焦点移动到第一个选项卡。 （可选）激活新聚焦的选项卡（请参阅下面的注释）。
• 当焦点位于水平或垂直方向的选项卡列表中的选项卡上时：

  • Space or Enter

    ：如果选项卡未在焦点上自动激活，则激活该选项卡。

  • Home

    （可选）：将焦点移至第一个选项卡。 （可选）激活新聚焦的选项卡（请参阅下面的注释）。

  • End

    （可选）：将焦点移至最后一个选项卡。 （可选）激活新聚焦的选项卡（请参阅下面的注释）。

  • Shift + F10

    ：如果选项卡有关联的弹出菜单，则打开该菜单。

  • Delete

    （可选）：如果允许删除，则删除（关闭）当前选项卡元素及其关联的选项卡面板，将焦点设置在已关闭选项卡后面的选项卡上，并可选择激活新聚焦的选项卡。如果删除的选项卡后面没有选项卡，例如，删除的选项卡是从左到右水平选项卡列表中最右侧的选项卡，则将焦点设置在已删除选项卡之前的选项卡上，并可选择激活该选项卡。如果应用程序允许删除所有选项卡，并且用户删除选项卡列表中最后剩余的选项卡，则应用程序会将焦点移动到提供逻辑工作流的另一个元素。作为

    Delete

    的替代方案，或者除了支持

    Delete

    之外，还可以在上下文菜单中使用删除功能。

值得注意的是，您所设想的操作没有任何快捷方式。 您可以从 UX 角度查看QuentinC 的答案，寻找一些替代解决方案。

Answer 3

w3 组织对选项卡模式的建议确实包含一条注释，即当

tablist

将

aria-orientation

设置为

vertical

时，

Down Arrow

可以替换

Alexander Nied的答案

中的Right Arrow功能（聚焦下一个选项卡）并且

Up Arrow

可以替换

Left Arrow

功能（聚焦上一个选项卡）。