onboarding screen reader and keyboard issues
Navigation list
#onboarding-tour-list
has a few issues when using a keyboard and a screen reader:
- Each tab has
tabindex="0"
, which makes each one a tab stop. We should be using focus management with a roving tabindex so that the tab list is a single tab stop, with arrow key navigation to move focus between tabs. - We're using
<li role="presentation"><span role="tab">.../span></li>
. But the presentation role is not working as intended, which means the tab elements are not properly grouped, so they are all described as "1 of 1", rather than, say, "2 of 8". We could just use<li role="tab"><span>...</span></li>
. - It is missing
aria-orientation="vertical"
, which means it is using the default orientation for a tablist, which is horizontal. - The "Learn more" tab actually opens up a new page. This is a misuse of the "tab" role. And it means that if you keyboard navigate onto it it immediately opens a new web page!
We can follow the WAI recommendations for this: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/.
Buttons
-
#onboarding-tour-button-container
and#onboarding-tour-tor-action-button-container
are<aside>
s. I'm not sure this is appropriate since it is not really complementary content, it creates a new landmark, and it makes screen reader navigation much noisier. - The button that takes you to the next page does not properly move focus, so it just gets lost and the user has to re-navigate into the tabpanel.
Note that these issues come from firefox's implementation, but I think they've since removed it and we're re-adding it in 6d450f93 so this won't be fixed upstream.