WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Question: Flyout menu visibility

for

Number of posts in this thread: 6 (In chronological order)

From: Jakob Rosin
Date: Sat, Mar 05 2022 6:01AM
Subject: Question: Flyout menu visibility
No previous message | Next message →

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

From: Steve Green
Date: Sat, Mar 05 2022 7:13AM
Subject: Re: Question: Flyout menu visibility
← Previous message | Next message →

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


From: Jakob Rosin
Date: Sat, Mar 05 2022 7:19AM
Subject: Re: Question: Flyout menu visibility
← Previous message | Next message →

That the menu is still in aria=“hidden” container would make sense indeed.
Thanks for the tip.
The link is https://ut.ee/en
Cheers
Jakob

*Jakob Rosin*

*CEO / Accessibility Consultant*

+372 52 32 932 <+3725232932:>
Twitter, <https://twitter.com/jakobrosin/> Linked In
<https://linkedin.com/in/jakobrosin>

[image: A black silhouette of a sparrow, then a black text saying Sparrow
access]

On 5. Mar 2022 at 16:13:19, Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:

> 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
>
>
>

From: Steve Green
Date: Sat, Mar 05 2022 7:39AM
Subject: Re: Question: Flyout menu visibility
← Previous message | Next message →

I can confirm that this is the problem. The element <div id="mainLeftMenuContainer"> has the attribute aria-hidden="true" regardless of whether the menu is open or closed. When I deleted the attribute, JAWS was able to read the menu as expected.

Steve


From: Jakob Rosin
Date: Sat, Mar 05 2022 9:12AM
Subject: Re: Question: Flyout menu visibility
← Previous message | Next message →

Thank you so much for helpign to clear this up.

Have a great day

*Jakob *



On 5. Mar 2022 at 16:39:26, Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:

> I can confirm that this is the problem. The element <div
> id="mainLeftMenuContainer"> has the attribute aria-hidden="true" regardless
> of whether the menu is open or closed. When I deleted the attribute, JAWS
> was able to read the menu as expected.
>
> Steve
>
>
>

From: Niranjan Vala
Date: Sat, Mar 05 2022 9:13AM
Subject: Re: Question: Flyout menu visibility
← Previous message | No next message

And I think aria-hidden="false" on several child elements is unnecessary

On Sat, 5 Mar 2022 at 20:09, Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:

> I can confirm that this is the problem. The element <div
> id="mainLeftMenuContainer"> has the attribute aria-hidden="true" regardless
> of whether the menu is open or closed. When I deleted the attribute, JAWS
> was able to read the menu as expected.
>
> Steve
>
>
>