WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question: Flyout menu visibility

for

From: Steve Green
Date: Mar 5, 2022 7:13AM

It sounds like the menu's container still has aria-hidden="true". Adding aria-hidden="false" to elements inside it would not make them visible to assistive technologies because it does not reverse the "true" state. In fact there is no point adding aria-hidden="false" because it doesn't do anything.

Can you provide a link to the website?

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jakob Rosin
Sent: 05 March 2022 13:02
To: <EMAIL REMOVED>
Subject: [WebAIM] Question: Flyout menu visibility

Greetings.

Apologies if this question veers too off course of this list.
I am a totally blind user trying to help an university make their website more accessible.
They have decided to make the main menu hidden by default. It becomes visible via a “Toggle navigation” button.
The hidden menu elements in the code have tabindex”=-1” and are ariahidden=“true”
however, after activating the navigation menu, the menu visually appears as it should, its elements get tabindex=“0” and as far as I see by inspecting the element with chrome dev tools, also ariahidden=“false”
NVDA and VoiceOver (on mac) both are able to focus and read menu elements, but it is not possible to see the menu via browsing with arrow keys, nor does the screen reader find any of the menu elements via find.

Could anybody point me to any resource or advice what could've gone wrong here?
I am suspecting something is wrong with rendering the page, but to be honest, my path to web development basics is still ongoing.

Thank you in advance for any information you could give me.

Jakob