0

My first post here. I am sure it won't be the last.

I am developing an accessibility prototype which features a popup tab panel.

I followed the recommendations at https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel and it works very well with both keyboard and mouse.

What I am now looking for is a recommendation for how to go from the tab list to the close button via keyboard control.

The recommendations call for the tabs to be selected in a loop, i.e. when you tab off the last tab, the first tab gets selected and vice versa, with "Home" selecting the first tab and "End" selecting the last.

Is there a 'best practice' for closing the popup tabbed panel?

Would it be misleading or very wrong to map "End" onto its close button? Is there another key which would be more suitable? I think we will be using "Esc" for something else.

Thanks in advance.

Improve this question
2
  • Can you explain more what a 'popup' tab panel is? I'm very familiar with a standard tab widget as the example in the authoring practice shows. And I know a tab itself could have a popup menu (like a context menu), but I'm not sure what you mean by the panel being a popup.
    – slugolicious
    Mar 29, 2018 at 16:30
  • The tabbed panel is not usually visible. It represents a fixed set of physical 'documents' which are hidden until needed. User clicks/activates the control to open the panel, it opens as a popup on top of (and obscuring) the 'main' content. The tabs in the panel are used to switch between the 'documents'. These 'documents' contain mostly tabular data, logs and charts but no actual UI controls. The only UI control I need to deal with when the panel is open is the close button for the panel.
    – brennanyoung
    Apr 3, 2018 at 8:19

1 Answer 1

Reset to default
1

Generally, keyboard-only users make use of the [tab] key to move through an interface to a selected control and then activate it using the [space] bar or [enter] key.

Bearing that in mind I would recommend that the [tab] key moves first through the 'tab' labels. Once the last 'tab' label is reached, the next press of the [tab] key will take the user to the first actionable item in the open 'tab' and so on until the reach the bottom of the entire page at which point they cycle back to the header and main navigation for the site.

If, while [tab]ing across the 'tab' labels, they hit the [space] or [enter] key, they will open that particular 'tab'.

When they open a 'tab' it might be nice if you can set the focus on the first actionable item within that 'tab' to save the user from having to work their way down through the whole page again.

Finally [shift]+[tab] should operate the whole thing in reverse - moving backwards through the UI until they reach the first main navigation item and then cycling back to the footer links.

Improve this answer
4
  • The list of tabs should be treated as one tab stop, as the authoring practice recommends. Kind of like a radio group where the entire radio group is one tab stop and you use the arrow keys to navigate within the radio group. You should use the arrow keys to navigate through the tab list. I would also not move the focus into the tab contents automatically unless really really needed. Moving the focus automatically can be disorienting for screen reader users.
    – slugolicious
    Mar 29, 2018 at 16:27
  • Thanks for this useful tip, @slugolicious there's no actionable content in the tab views, just tables, logs and charts, which should be accessible. The panel is usually hidden, and has a close button. So I consider 2 models after the panel opens: 1. The only action is 'close the panel' unless the arrow keys are used, in which case, the tabs are selected one by one. (But how to get to the 'close button', then? Also arrow keys?) 2. After 'tabbing-off' the last tab, focus should move to the close button, and then (if not activated), should return to the first tab.
    – brennanyoung
    Apr 3, 2018 at 8:49
  • I would still suggest using the [tab] key to move between the tab labels and [space] to open a tab - that way you can also have the close button as a part of the [tab] cycle
    – Roux Martin
    Apr 3, 2018 at 8:56
  • @AndrewMartin I still would not recommend using the tab key between tab labels. It would go against w3.org/TR/wai-aria-practices/#tabpanel, which is a standard pattern that websites should use so that the user experience is the same across different companies.
    – slugolicious
    Apr 4, 2018 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.