Adapt Learning Community: Help with adapt-tabs version 4.0.0 accessibiliy

Skip to main content

Hi,

We are running Adapt 5.18.5 with the authoring tool and recently found an accessibility issue with the Adapt Tabs component.I have updated to the latest release 4.0.0 and have been having difficulty with it.

Using NVDA

When I tab onto one of the tab control buttons, I can use the left and right arrow keys to move between the buttons. When I press enter/ space bar to select, the focus does not move to the content no matter what I try. The only I've been able to do it is by disabling forms mode (insert + space) and using the down arrow key to navigate. However, if I select the first tab, I would still need to arrow through any other tab control buttons to get to the content.

I hope this makes sense. Any help is appreciated!

Thanks

Ross

That's a bit odd. Could you raise an issue on the repository and send over a test course on the ticket so that I can have a look?

Show parent | Reply

Hi Oliver,

I've only just looked at this again, sorry for the delay in replying.

Our tech team recently set up a new server running the latest Adapt 5 and I've reinstalled the Tabs component and put it in a course using the Vanilla theme as a test.

I was hoping this fresh install would perhaps solve the problem but it appears not.

When I tab to a tabs component, focus is on first tab. You can then use arrow keys to move left/ right. Pressing return or space visually opens the tabpanel, but does not move keyboard focus. You can disable forms mode, but that still means tabbing through any content to the right of the active tab.

I've been reading about the correct use of the aria tabs/ tabpanel role and it's suggested that the tab controls should not receive tab focus once the 1st tab is active. Once inside the list of tabs, left and right keys are the only controls for moving focus. Selecting would then place focus onto the tab panel automatically (it's suggested tabindex="0" on that tabpanel can help with this). Another option would be to allow down arrow to move focus to the content. Shift tab moves back to the tab list/ current tab.

I like how this tabpanel behaves https://inclusive-components.design/tabbed-interfaces/ - which seems to work well as an example

I'll publish a simple course tomorrow with the test tomorrow for you to have a look at.

Thanks

Ross

Show parent | Reply

If you want to do a pull request to tabs please feel free.

I can see the issue you've raised on the component https://github.com/cgkineo/adapt-tabs/issues/32

The esc key will drop you out of forms mode once you're in it. Shifting focus can be somewhat flakey, which is why we try to keep it to a minimum, I'm open to a robust pr though.

Show parent | Reply

Hi Oliver,

Thanks for the message. Yeah, escaping forms mode means you have to move through all the menu items to the right of the item you've selected as it currently works, which is a workaround although not intuitive to learners.

We could provide some instructional guidance to learners before they interact with it although not ideal. A better solution is left/ right arrow key through tabs then down arrow to move to the content.

I've not used GitHub before other than to download source code so not exactly sure how pull requests work. What is it you would need from me?

Can you replicate the issue I'm trying to explain?

Thanks,

Ross

Show parent | Reply

Could you have a look at these examples and give some recommendations that are inline with them?

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/tabs/tabs.html

I'm thinking that just moving the focus to the tabpanel should be sufficient?

Show parent | Reply

Hi Oliver,

Thanks for the message. Yeah the behaviour of the Adapt Tabs component is about 95% of the way there in my opinion. All that remains is for focus to be moved to the tabpanel. The desired behaviour I think is the example with automatic activation on left/ right key-press.

So this example is ideal: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

So once a tab is selected (with arrow keys) - pressing tab moves the focus to the tabpanel. The learner could then shift-tab back to the tab list.

The only caveat I have with that is that if the tabpanel contains interactive content (like a link) - then it would be confusing if focus moved to the link rather than to the top of the tab panel. If it's possible to programmatically get around this, and use the tab key, then great.

There is an example here where they programmatically use the down arrow key to move focus to the panel once selected, which bypasses the issue of tabbing potentially moving to an interactive element in the tabpanel -

https://inclusive-components.design/tabbed-interfaces/#:~:text=A%20problem%20reading%20panels

Show parent | Reply

I'm hoping to align as many components as possible with wcag guidlines only. There are many organisations which utilise Adapt Framework and it's much easier to have arguments about wcag failures if the components are aligned directly with the recommended examples.

Show parent | Reply

Thanks, Oliver, yeah I agree with that. Thanks for looking at this and progressing the issue, appreciate it.

Ross

Show parent | Reply

I'm going to take this opportunity to upskill one of our developers at Kineo, so I've assigned the work and will be guiding them through it. If you could bear with us it might take a week or three depending on the amount of other work and bank holidays etc.

Show parent | Reply

Thanks Oliver that is appreciated.

On another note, I've come across an issue whereby if I turn off 'Display Title' for the component, the page fails to load in preview. If I turn on 'Display title' the preview loads fine.

To be clearer, when you click preview, the course loads at the main menu (box menu) - but when you select a page with the component and no display title, that is when loading fails.

I had wondered if something in the theme was breaking it but when I switch to the core vanilla theme the same issue is happening. This is Adapt 5.19.1 with the Authoring tool.

The accordion component also has this problem, but others, like text and graphic, do not.

Any ideas?

I can move this out to another topic if preferred.

Thanks

Ross

Show parent | Reply

What do you mean by "turn off Display Title"? Leaving it blank?

Moving to another topic would be best.

Show parent | Reply

Hi Oliver,

Just thought I'd check in to see if there is an update on any progress with this?

Cheers

Ross

Show parent | Reply

No none I'm afriad. We're going through a particularly busy period and are stretched a bit thin.

You're welcome to do a pull request.

Show parent | Reply

Hi Oliver,

No worries. Thanks for the update.

Ross

Show parent | Reply

Hi Oliver,

Here is a demo of the tabs in a course; https://we.tl/t-7ipgn0x2X2

I tried to e-mail it to you but got blocked, unfortunately.

Thanks again,

Ross

Show parent | Reply