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

Question

I have a modal that consists of tab layout to enter some form data. The form is a list of radiogroups that can be quite long.

For a user to get back to the tab, currently they have to shift+tab all the way back through the radio buttons to get back to the tab.

I know escape should close the modal. What is the expected keyboard navigation to return to a tab from a tab panel, so the user doesn't have to shift tab through all of the radio buttons?

Answer 1

There is no predefined standard keyboard shortcut to go back to a tab control from inside its content.

IN a native app, you can go to next/previous tab with Ctrl+Tab/Ctrl+Shift+Tab or Ctrl+PageDown/Up, or sometimes Ctrl+number. However, on the web, these shortcuts are of course already taken to control the tabs of the browser itself. You won't be able to intercept them for your own use, and even if you could, it would be a terribly bad idea because you would prevent the user from changing browser tab.

If your modal dialog is so big and so long, maybe you can think about modifying the behavior of the escape key. On first press, you go back on the tab control, and if you area already on the tab control then it closes the dialog. The user whould have then to press escape twice to close the dialog completely. This is a change from standard escape behavior, but it's maybe more acceptable than defining a completely new keyboard shortcut that no one will use because it's unknown or they didn't get the information at proper moment or didn't remember about it.

More generally, it's maybe the sign that your UI design is too complicated and that you should simplify it or organize it differently. What about splitting into different dialogs (eg one per tab)? Making groups that you can expand/collapse? etc.

A big part of accessibility is also about making things simple. If it's too complicated to do it accessibly, maybe you should simplify.

Answer 2

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, eg, 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.