Rise Tab Block Accessibility

Jun 29, 2022

Hi Folks,

I'm wondering if anyone else has had any challenges with the accessibility of the Tab block using NVDA and Microsoft Edge? I can get NVDA to read the headers using the arrow keys but not the text. In the default Tab block I can tab to the image, zoom in and then zoom out, and then then use the up arrow to have the text read out. With Gaining Insight and Making It Real there doesn't seem to be anyway to the the screen reader to read the text. 

I'm not sure if this is an issue with me using NVDA or if it is an issue with Rise and NVDA. 

2 Replies
Jennifer Knott

I was just testing using VoiceOver on a Macbook. It is problematic. 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. I have to first find the tab I want to read, select it, then cycle through all the tabs 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.

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.