WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus reset

for

From: Mark Magennis
Date: Apr 17, 2023 10:24AM

One of the problems users have with tablists is that to be coherent to sighted keyboard users they have to look like tabs. If they look like a series of buttons or links users will expect them to behave that way and will not expect to have to use the arrow keys to select a different tab . When tabbing between them doesn't work they may become confused or think they are unavailable or not working.

Back in the old days tabs used to look like paper filing cabinet tabs so that was fine. The keyboard interaction was guessable. But I think we're talking here about a vertical list of options and vertical tablists are rare. And I'll bet your UX designers have no intention of making them look anything like tabs.

So I wouldn't use a tablist here.

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Monday 17 April 2023 16:18
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] Focus reset

As Miriam said, this sounds like the tablist pattern, https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

When you have role="tablist" on the container and role="tab" on the buttons, that's a clue to the screen reader user that selecting the button will update the page (it usually unhides the container with role="tabpanel").

If your page does not follow the tablist pattern, then is there enough context on the page to indicate that selecting a button will reveal new content? For example, the button label might make it obvious if it was something like "reveal address information". Or the heading for the group of buttons might have the context.

I rarely move the keyboard focus so your option 1 would be my last choice.
As a keyboard user myself, I don't like it when the page thinks it knows better than I do where my focus should go. I want to be in control.

If you can't use the tablist pattern and the context of your headings and button labels don't make it obvious that new content will appear, then either/both of option 2 and 3 is the next best choice. I prefer 2 over 3 because as a new user to your page, I might want to know that selecting a button will reveal content but if I visit your page frequently, I don't want to be constantly told that new content appeared (option 3) everytime I select a button.