E-mail List Archives
Thread: Focus order issue ... Could Aria-controls have an effect?
Number of posts in this thread: 7 (In chronological order)
From: Bim Egan
Date: Fri, Sep 20 2019 5:32AM
Subject: Focus order issue ... Could Aria-controls have an effect?
No previous message | Next message →
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 ADDRESS REMOVED =
Skype ID: bim.accessequals
Coordinator: Describe Online
W: www.describe-online.com
E: = EMAIL ADDRESS REMOVED =
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: = EMAIL ADDRESS REMOVED =
From: Steve Green
Date: Fri, Sep 20 2019 12:03PM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | Next message →
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
From: Bim Egan
Date: Fri, Sep 20 2019 12:47PM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | Next message →
Hi Steve,
Sorry it's a test environment I've had to be white listed. I could redact the code let you see the HTML for that part of the page, but at doesn't actually help much if JavaScript is doing the damage.
Like you I've seen some very odd mark up, but this one has me Foxed.
Bim
> On 20 Sep 2019, at 19:03, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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
>
>
>
From: Steve Green
Date: Sat, Sep 21 2019 7:01AM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | Next message →
Recently, I have seen a couple of instances where JavaScript is being used to control the focus order, so it does not follow the sequence you would expect from inspecting the DOM. In one case it was causing a keyboard trap that had us baffled for a while.
Steve
From: Birkir R. Gunnarsson
Date: Sat, Sep 21 2019 8:33AM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | Next message →
aria-controls alone should not affect anything in the underlying code,
not even content order, but "should" is the operative word here, there
are some crazy things going on in the work of web content markup.
If you turn the screen reader off and retest, or force screen reader
into application/forms mode, are you able to reach the menu?
On 9/21/19, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Recently, I have seen a couple of instances where JavaScript is being used
> to control the focus order, so it does not follow the sequence you would
> expect from inspecting the DOM. In one case it was causing a keyboard trap
> that had us baffled for a while.
>
> Steve
>
>
From: Bim Egan
Date: Sat, Sep 21 2019 12:04PM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | Next message →
Hi Birkir,
I've turned off the screen reader and tried navigating by keyboard, but
still don't seem able to reach the sub-menu items. However, with the screen
reader running, once I reach the search button, If I down-arrow I can move
into the sub-menu, so it's just not moving focus to it via the tab key.
This looks as though they've added tabindex="-1" on all the links and
buttons in the sub-menu, but they're not appearing in the HTML.
Trouble is there's only one tool I can use to view the generated source and
it's in an IE toolbar, but I can't open the menu with either mouse or
keyboard in IE. So can't view the generated source.
Thanks for the suggestion though. Every little helps.
Cheers,
Bim
-------------
Bim Egan
Skype phone: 01223 96 87 96
Personal Email: = EMAIL ADDRESS REMOVED =
Skype ID: bim.accessequals
Coordinator: Describe Online
W: www.describe-online.com
E: = EMAIL ADDRESS REMOVED =
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: = EMAIL ADDRESS REMOVED =
From: Birkir R. Gunnarsson
Date: Sat, Sep 21 2019 12:10PM
Subject: Re: Focus order issue ... Could Aria-controls have an effect?
← Previous message | No next message
Bim
You can inspect the DOM in both Firefox and Chrome
In Chrome, for instnace
1. Select the element you want to inspect (you can do it in browse
mode in Jaws or NVDA)
2. Press shift-f10 and select "inspect"
You are put on that node in the Chrome developer tools.
At this point you have to force application/forms mode but after that
you can navigate the DOM with the arrow keys and press shift-f10 to
get the context menu where you can, e.g. copy the source code (select
copy and copy outer HTML).
I paste the code into Ed Sharp and then press ctrl-a to select all and
then ctrl-shift-enter, this removes all leading spaces from the code
which makes it easier to inspect, at least with a braille display.
Let me know if this helps
On 9/21/19, Bim Egan < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Birkir,
>
> I've turned off the screen reader and tried navigating by keyboard, but
> still don't seem able to reach the sub-menu items. However, with the screen
> reader running, once I reach the search button, If I down-arrow I can move
> into the sub-menu, so it's just not moving focus to it via the tab key.
>
> This looks as though they've added tabindex="-1" on all the links and
> buttons in the sub-menu, but they're not appearing in the HTML.
>
> Trouble is there's only one tool I can use to view the generated source and
> it's in an IE toolbar, but I can't open the menu with either mouse or
> keyboard in IE. So can't view the generated source.
>
> Thanks for the suggestion though. Every little helps.
>
> Cheers,
>
> Bim
>
>
>
>
>
> -------------
> Bim Egan
> Skype phone: 01223 96 87 96
> Personal Email: = EMAIL ADDRESS REMOVED =
> Skype ID: bim.accessequals
>
> Coordinator: Describe Online
> W: www.describe-online.com
> E: = EMAIL ADDRESS REMOVED =
> ----------------------------------------
> Partner: AccessEquals
> W: www.accessequals.com
> E: = EMAIL ADDRESS REMOVED =
>