WebAIM - Web Accessibility In Mind

E-mail List Archives

Focus order issue ... Could Aria-controls have an effect?


From: Bim Egan
Date: Sep 20, 2019 5:32AM

Good afternoon all,

I'm testing a mega menu that doesn't appear to be working properly, and I
can't figure out why.

The large screen view has a horizontal menu that is working, but when it
gets to small screen and the hamburger menu button appears, the sub menu
links can't be reached.

The menu button has an aria-controls attribute that matches the sub-menu id,
but when the menu button is activated, there's more revealed than just the
sub-menu. The devs have inserted a search field and button between the (now
"close") button and the sub-menu. My expectation was to move from the search
button to the first sub-menu item, but instead it moves into main content.

HeydonWorks article seems to suggest that aria-controls could cause some
problems in this situation, but he doesn't go into detail.

So can anyone tell me if the problem will be solved if the devs move the
mobile version search out of the dropdown or what can be done to bring the
mobile sub-menu into the tab order?

Many thanks,


Bim Egan
Skype phone: 01223 96 87 96
Personal Email: <EMAIL REMOVED>
Skype ID: bim.accessequals

Coordinator: Describe Online
W: www.describe-online.com
Partner: AccessEquals
W: www.accessequals.com