Better Tabs Accessibility

Nov 08, 2022

I read the recent post about improving accessibility for the Tab interaction, based on W3C's recommendation. That is a good start. However, this current design is still creating a lot of extra work for the tabs to be useful. Here is what I discovered using VoiceOver on a Macbook:

While you can navigate through all the tabs using the control/forward arrow keys, the content of each tab is not the next keyboard focus after you select the tab title.

The keyboard focus is currently like this:

  1. first tab title
  2. second tab title
  3. third tab title
  4. first tab contents
  5. exit the interaction

The keyboard focus needs to be this: 

  1. first tab title
  2. first tab contents
  3. second tab title
  4. second tab contents
  5. third tab title
  6. third tab contents

It should work like a list; only after completing the last item, do I leave the block/interaction.

In the example attached, I enter the tab group using the forward arrow. Forward takes me through all the tab titles first, and only returns to the content of the active tab after cycling through all the tabs. I have to first find the title of the tab I want to read, select it. But then I have to cycle through all the tab titles again before being allowed to read the content of the tab I selected.

Additionally, once I read through a tab's contents, the forward arrow takes me out of the block entirely. The only way to get back into the block and read the other tab content is to use the back arrow.

This is a request to redesign the keyboard focus of the tabs interaction so that after I select a tab, then next tap of the forward arrow goes into the content of that tab. Then, once I complete that tab, the next tap of the forward arrow goes to the proceeding tab title. Maybe getting out of the interaction with the tab key?

1 Reply
Crystal Horn

Hi there, Jennifer,

Thanks for your post! It sounds you are referring to our post here which states:

Interactive tabs blocks now use the recommended interaction behavior for greater accessibility.

  • Use Tab or Shift+Tab to select a tab in the interaction.
  • Use Left and Right Arrows to navigate between tabs.
  • Use Tab to focus on the content in the selected tab.
  • Use Shift+Tab to move back to tabs.

We'll take your request to be able to navigate from the tab heading to the tab contents using just the arrow key, and we'll update you here if that's a change we'll make.