E-mail List Archives

Search E-mail List Archives 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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jakob Rosin
Sent: 05 March 2022 13:02
To: = EMAIL ADDRESS 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

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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jakob Rosin
> Sent: 05 March 2022 13:02
> To: = EMAIL ADDRESS 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
> > > at http://webaim.org/discussion/archives
> > > > > >

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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jakob Rosin
Sent: 05 March 2022 14:20
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Question: Flyout menu visibility

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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jakob Rosin
> Sent: 05 March 2022 13:02
> To: = EMAIL ADDRESS 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >

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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jakob Rosin
> Sent: 05 March 2022 14:20
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Question: Flyout menu visibility
>
> 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
>
>
>
> -----Original Message-----
>
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>
> Jakob Rosin
>
> Sent: 05 March 2022 13:02
>
> To: = EMAIL ADDRESS 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
>
> >
> >
> archives at http://webaim.org/discussion/archives
>
> >
> >
> >
> archives at http://webaim.org/discussion/archives
>
> >
>
> > > at http://webaim.org/discussion/archives
> > > > > >

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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jakob Rosin
> Sent: 05 March 2022 14:20
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Question: Flyout menu visibility
>
> 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
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Jakob Rosin
> > Sent: 05 March 2022 13:02
> > To: = EMAIL ADDRESS 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
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > at http://webaim.org/discussion/archives
> > > > > >


--
Cheers,

Niranjan G Vala