Potential accessibility issue with the tab component

[Ciandelle]

Description of the issue

unable to tab-focus and use arrow keys to navigate the data held inside the tab, and as such for a screen reader, this content is inaccessible.

Environment (where applicable)

Using NVDA screen reader and using Chrome to browse.

Next steps

We are aware of this as a potential issue and are planning to look into it further

[dav-idc]

Hi @Ciandelle, have you tried using the arrow keys to navigate between tabs? It'll either be just the left and right arrow keys by themselves, or the arrow keys paired with holding down 'alt' on Windows or 'option' on Mac.

The tabs component is built as an 'ARIA widget', and ARIA widgets follow the general rule that:

• you tab once to enter the ARIA widget
• inside the widget, you use arrow keys to navigate

This is to make it possible for people navigating via keyboard to tab past a widget they don't want to interact with, without getting lost in the widget's options.

[dav-idc]

Ohh @Ciandelle sorry, is this the bug we got through our support email? I think it was specifically that they couldn't use tab and arrow keys to properly navigate a table inside a tab component. My bad, that is something we'll need to investigate.

[Ciandelle]

@davidc-gds Hey, yes it was, would be be helpful for me to put the full details from Zendesk in this issue so that it makes a bit more sense?

[dav-idc]

I tested this with NVDA on Chrome, and didn't find any issues with our implementations.

Here's the example frame I tested: https://design-system.service.gov.uk/components/tabs/default/index.html

Test results

Here's the full NVDA testing results in a spreadsheet.

• Successfully navigated to the start of the tab group with tab key
• Successfully navigated between tabs with left and right arrow keys
• Successfully exited tab-list navigation area with 'esc' key, and entered tab content with down arrow
• Successfully navigated to the table in the tab-panel using either the tab key or the down arrow
• Successfully navigated to the table from the top of the example using the 'T' NVDA keyboard shortcut. The shortcut did not list the hidden tables on unselected tabs, which is the correct and expected functionality.
• Successfully navigated inside the table inside the tab by using NVDA's table navigation keys (on Mac it's 'control' + 'option' + arrow keys)

For our implementation on the GOV.UK Design System, everything appeared to behave as expected in NVDA.

Technical test details

Assistive technology: NVDA Version 2022.4 (latest)
Browser: Chrome
Browser version: 111 (latest)
Operating System: Windows 10 (Assistiv Labs)

[36degrees]

Is this potentially the same as alphagov/govuk-frontend#860?

Unless I'm missing something, I disagree with the conclusion that the content is inaccessible – though we could be doing better here.

[dav-idc]

@Ciandelle it looks like this is now closed. Should we perhaps reply back to the original email we received, with the results of the tests I quickly ran?
#2719 (comment)

[Ciandelle]

@davidc-gds Owen went back to the user already :) we can provide them with this if they come back to us again