WebAIM - Web Accessibility In Mind

E-mail List Archives

Question: Flyout menu visibility

for

From: Jakob Rosin
Date: Mar 5, 2022 6:01AM

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