Web可访问性 - 从TABPANEL导航到选项卡

发布于 2025-02-09 00:18:53 字数 163 浏览 2 评论 0原文

我有一个由选项卡布局组成的模式，可以输入一些表单数据。该形式是可以长时间长的放射线群的列表。

为了使用户返回选项卡，目前必须通过无线电按钮将其整个偏移+选项卡返回到选项卡。

我知道逃脱应该关闭模态。从选项卡面板返回选项卡的预期键盘导航是什么，因此用户不必通过所有无线电按钮移动选项卡？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月染过的梦 2025-02-16 00:18:53

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

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

如果您的模态对话框如此之大，那么也许您可以考虑修改逃生键的行为。
在第一次按下，您可以返回到选项卡控件上，如果您已经在选项卡控件上区域区域，则关闭对话框。
然后，用户应将逃生端两次按以完全关闭对话框。这与标准逃生行为相比，这可能是可以接受的，而不是定义一个全新的键盘快捷键，因为它是未知的，因为它是未知的，或者他们在适当的时刻没有获得信息或不记得的信息。

更一般而言，这也许是您的UI设计太复杂的迹象，您应该简化或组织不同。
将分开的对话框分开（例如，每个选项卡一个）呢？制作可以扩展/崩溃的小组？等等。

可访问性的很大一部分也就是使事情变得简单。如果它太复杂了，无法访问，也许您应该简化。

回复收藏 0 原文

黄昏下泛黄的笔记 2025-02-16 00:18:53

Web应用程序中没有针对此操作定义的键盘快捷键。如果您看一下“键盘互动” “标签”上的文档：

对于标签列表：
选项卡：
当焦点移入选项卡列表时，位置专注于活动选项卡元素。
当选项卡列表包含焦点时，将焦点移至小组外部的页面选项卡序列中的下一个元素，除非第一个包含TabPanel中有意义的内容的第一个元素是可聚焦的，否则是TabPanel。
当焦点放在水平选项卡列表中的选项卡元素上时：
左箭头：将重点移至上一个选项卡。如果焦点是第一个选项卡，则将焦点移到最后一个选项卡。可选地激活新聚焦的选项卡（请参见下面的注释）。
右箭头：将重点移至下一个选项卡。如果焦点是最后一个选项卡元素，则将焦点移至第一个选项卡。可选地激活新聚焦的选项卡（请参见下面的注释）。
当焦点放在具有水平或垂直方向的小表中的选项卡上时：
空间或输入：如果未在焦点上自动激活该选项卡。
主页（可选）：将重点移至第一个选项卡。可选地激活新聚焦的选项卡（请参见下面的注释）。
结束（可选）：将重点移至最后一个选项卡。可选地激活新聚焦的选项卡（请参见下面的注释）。
shift + f10：如果选项卡具有关联的弹出菜单，请打开菜单。
delete（可选）：如果允许删除，请删除（关闭）当前的选项卡元素及其关联的选项卡面板，将关注的标签集中在选项卡上，并可选地激活该选项卡新专注的选项卡。如果没有遵循已删除的选项卡的选项卡，例如，删除的选项卡是从左到右的水平标签列表中的最正确的选项卡，将重点放在删除选项卡之前的选项卡上。如果应用程序允许删除所有选项卡，并且用户在选项卡列表中删除了最后的剩余选项卡，则应用程序将焦点移至提供逻辑工作流的另一个元素。作为delete的替代方法，除了支持delete之外，删除函数可在上下文菜单中使用。

值得注意的是您所设想的操作的任何快捷方式。您可以查看 Quentinc的答案从更多的UX角度来看，请使用一些替代解决方案。

There is no such keyboard shortcut defined for this action in web applications. If you take a look at the "keyboard interaction" section of the W3's Authoring Practices document on "Tabs":

For the tab list:
Tab:
When focus moves into the tab list, places focus on the active tab element.
When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.
When focus is on a tab element in a horizontal tab list:
Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
When focus is on a tab in a tablist with either horizontal or vertical orientation:
Space or Enter: Activates the tab if it was not activated automatically on focus.
Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Shift + F10: If the tab has an associated popup menu, opens the menu.
Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.

Notably absent is any shortcut for the operation you are envisioning. You may look to QuentinC's answer for some alternative solutions from more of a UX perspective.

回复收藏 0 原文