WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Steve Green
Date: Sep 20, 2019 12:03PM

There are any number of reasons why the sub menu links can't be reached, but I would not expect aria-controls to be one of them. We would need to see the code to figure it out - can you share the URL? We spend a lot of time trying to understand the increasingly crazy code that we're presented with these days, but there's always an answer.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Bim Egan
Sent: 20 September 2019 12:33
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] Focus order issue ... Could Aria-controls have an effect?

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.
https://www.heydonworks.com/article/aria-controls-is-poop

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




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

Coordinator: Describe Online
W: www.describe-online.com
E: <EMAIL REMOVED>
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: <EMAIL REMOVED>