Home > OS >  Accessibility question: do select dropdown elements need to be tab-able to go up/down the menu?
Accessibility question: do select dropdown elements need to be tab-able to go up/down the menu?

Time:03-05

I've been trying to find an answer to this, but can't quite get a clear one. I'm using a MUI Select component in my app, and noticed that it the menu items are able to be navigated with up/down keys and selected with the enter key, but not able to go up/down with the tab key. Is this a best practice for accessibility, or is it not required? I also looked at this guideline, which seems like tabbing isn't required. Just want need some validation on this. Thank you!

CodePudding user response:

If you mean the different options of a dropdown menu, no, they shouldn't be reachable with tab.

This is probably more a common convention or a recommandation than an absolute obligation, as far as I know. It comes from native UI control/widget/component conventions on most operating systems that have been in use long time before the web.

The tab key is normally used to go from a control to the next. But when you go through the different options of a dropdown menu, you stay on the same control. So dropdown options don't have to, and even really shouldn't be reachable with the tab key.

The same answer applies on the different tabs of a tab control, or the items in a list of selectable items. Normally when navigating with tab, you should only reach the currently selected / active element. Another press on tab key moves to the next interactive control.

CodePudding user response:

As mentioned before, the goal of TAB is typically to move from a specific input control.to another, not within it. Thus, the use of arrow keys and enter is fine. However as a screen reader user myself, I run across custom "selection" boxes that fail to work properly due to many reasons. even if keyboard navigation works as expected outside of a screen reader context. It isn't clear to me if you tried this under a screen reader.

  • Related