search

alphagov / govuk_frontend_toolkit

❗️GOV.UK Frontend Toolkit is deprecated, and will only receive major bug fixes and security patches.
MIT License
403 stars 107 forks source link

Tabs interface needs better way to get to panel content #464

Closed detlevhfischer closed 6 years ago

detlevhfischer commented 6 years ago

When used with NVDA it is difficult to get from the tabs on https://design-system.service.gov.uk/components/tabs/ to the corresponding panel. Both left / right as well as up / down arrows traverse the tabs in the tablist. I suggest to consider implementing arrow down as a shortcut to move focus to the right panel content. See https://inclusive-components.design/tabbed-interfaces/ , section "A problem reading panels".

alex-ju commented 6 years ago

@detlevhfischer: hi, thanks for adding your suggestions, we took that article into consideration while building the component. have you done any user research around this?

detlevhfischer commented 6 years ago

I just tried it using NVDA and Firefox and noticed that left/right arrow did the same as top/down arrow, so that latter is not used (as I believe recommended by Heydon) to move the focus to the panel. Leaving forms mode and trying reading mode to progress to the panel often lands in the wrong one because tab and its panel are not adjacent in the source code, I guess. I intend o include the gov.uk example in the user tests I am currently conducting and will report back on issues, if there are any.

alex-ju commented 6 years ago

@detlevhfischer: Both left/right and up/down arrows currently have the same effect of switching between tabs and that is mainly because the non-sighted users don't know how the tabs are being positioned (one next to each other or one under each other - horizontal/vertical tabs).

Feedback from research would be extremely valuable for us and would help us shape the component, thank you!

kr8n3r commented 6 years ago

closing this, as I've reopened the issue in the appropriate repository