WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: What's the point of aria-expanded on a menu button?

for

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

From: Mark Magennis
Date: Wed, Nov 15 2023 9:55AM
Subject: What's the point of aria-expanded on a menu button?
No previous message | Next message →

Something I've been scratching my head about. Is there any good reason why a button that opens a menu should have aria-expanded? I know it's in the Aria Authoring Practices design pattern for Menu, but what's the point? If the menu is open the button isn't reachable, so the aria-expanded value of true will never be exposed to AT. And if the menu is closed then it's not needed because you know the menu is closed, otherwise you'd be in it.

Mark

From: Patrick H. Lauke
Date: Wed, Nov 15 2023 9:58AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

On 15/11/2023 16:55, Mark Magennis wrote:
> Something I've been scratching my head about. Is there any good reason why a button that opens a menu should have aria-expanded? I know it's in the Aria Authoring Practices design pattern for Menu, but what's the point? If the menu is open the button isn't reachable, so the aria-expanded value of true will never be exposed to AT. And if the menu is closed then it's not needed because you know the menu is closed, otherwise you'd be in it.

Indeed, I'd suggest this is some outdated advice in the APG pattern, or
that it's not been fully thought through.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Jonathan Michael Bodnar
Date: Wed, Nov 15 2023 10:13AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

From a component design perspective the button to toggle the menu would be external to the collapsible region of the menu, or external to the menu, and reachable regardless of the menu state. The aria-expanded attribute indicates the state of the menu the button controls.

--Jon


-----

Jonathan Bodnar
Web Services Lead | Library Technology Project Manager
Digital Library Services

= EMAIL ADDRESS REMOVED = <https://cdn.gsu.edu/sapp/ = EMAIL ADDRESS REMOVED = >

In Person: Georgia State University Library
33 Gilmer Street SE
Atlanta, Georgia 30302-3967

[https://gsu-apps-assets-prod.s3.amazonaws.com/apps-assets/email-signature/UniversityLibrary_3colorRGB.png]


From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, November 15, 2023 11:58 AM
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] What's the point of aria-expanded on a menu button?



On 15/11/2023 16:55, Mark Magennis wrote:
> Something I've been scratching my head about. Is there any good reason why a button that opens a menu should have aria-expanded? I know it's in the Aria Authoring Practices design pattern for Menu, but what's the point? If the menu is open the button isn't reachable, so the aria-expanded value of true will never be exposed to AT. And if the menu is closed then it's not needed because you know the menu is closed, otherwise you'd be in it.

Indeed, I'd suggest this is some outdated advice in the APG pattern, or
that it's not been fully thought through.

P
--
Patrick H. Lauke

https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.splintered.co.uk%2F&data%7C01%7Cjbodnar2%40gsu.edu%7C98c12f7754ef4abe899308dbe5fc2947%7C515ad73d8d5e4169895c9789dc742a70%7C0%7C0%7C638356643451206805%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=s8Aez4XOUm4blKBFyzSV7B6GRmcpZxZAOTp3zPANIDA%3D&reserved=0<https://www.splintered.co.uk/> | https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpatrickhlauke&data%7C01%7Cjbodnar2%40gsu.edu%7C98c12f7754ef4abe899308dbe5fc2947%7C515ad73d8d5e4169895c9789dc742a70%7C0%7C0%7C638356643451206805%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdatakG9%2B0f71lYCMjdpBsQPdQbY5OwBnWklkbcih1yCPDA%3D&reserved=0<https://github.com/patrickhlauke>
https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fflickr.com%2Fphotos%2Fredux%2F&data%7C01%7Cjbodnar2%40gsu.edu%7C98c12f7754ef4abe899308dbe5fc2947%7C515ad73d8d5e4169895c9789dc742a70%7C0%7C0%7C638356643451206805%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=KKeVoniTQGu3v3yr7IgXGhg%2FkvEW4pljaRmWV4Vth5Q%3D&reserved=0<https://flickr.com/photos/redux/> | https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.deviantart.com%2Fredux&data%7C01%7Cjbodnar2%40gsu.edu%7C98c12f7754ef4abe899308dbe5fc2947%7C515ad73d8d5e4169895c9789dc742a70%7C0%7C0%7C638356643451206805%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=5RZaOJxn%2BounUBIWwAJE4DjSfRfmUxnpUaFplpgpfV8%3D&reserved=0<https://www.deviantart.com/redux>
https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmastodon.social%2F%40patrick_h_lauke&data%7C01%7Cjbodnar2%40gsu.edu%7C98c12f7754ef4abe899308dbe5fc2947%7C515ad73d8d5e4169895c9789dc742a70%7C0%7C0%7C638356643451206805%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata­uhqM%2BABXheop7%2BmUioT2JHWMoItozVxHgC3rUnbt4%3D&reserved=0<https://mastodon.social/@patrick_h_lauke> | skype: patrick_h_lauke

CAUTION: This email was sent from someone outside of the university. Do not click links or open attachments unless you recognize the sender and know the content is safe.

From: Patrick H. Lauke
Date: Wed, Nov 15 2023 11:09AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

On 15/11/2023 17:13, Jonathan Michael Bodnar via WebAIM-Forum wrote:
> From a component design perspective the button to toggle the menu would be external to the collapsible region of the menu, or external to the menu, and reachable regardless of the menu state. The aria-expanded attribute indicates the state of the menu the button controls.

But a proper menu sets focus to the first menu item when the menu is
opened, and if you try to tab/move out of the menu, the menu is closed
again. So you don't normally encounter the menu button itself while the
menu is also opened. Which is why it's, in practice, redundant (unless
you're doing something unusual and *don't* autoclose the menu when
moving out of it, which sounds...odd; or if you're actually opening
something that isn't a menu as such, but more like a disclosure widget?)

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Steve Green
Date: Wed, Nov 15 2023 11:34AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

It's worth noting that the APG menu design works as expected with JAWS and Chrome, but the behaviour with NVDA 2023 is entirely different and you can indeed navigate out of the dropdown menu while it is still open. Curiously, NVDA only announces the expanded state of the menu button the first time it is used to open the menu. Thereafter, the state is not announced.

I don't know if this non-modality is a bug in NVDA or a flaw in the design.

And on a slightly different topic, why does the APG contain a design for a navigation menu using "menubar"? The ARIA specification explicitly states that "menubar" is for desktop style web applications, not for navigation. We have an endless fight to stop developers using "menubar" for navigation menus, and it doesn't help for the APG to undermine us like this.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Wednesday, November 15, 2023 6:10 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] What's the point of aria-expanded on a menu button?



On 15/11/2023 17:13, Jonathan Michael Bodnar via WebAIM-Forum wrote:
> From a component design perspective the button to toggle the menu would be external to the collapsible region of the menu, or external to the menu, and reachable regardless of the menu state. The aria-expanded attribute indicates the state of the menu the button controls.

But a proper menu sets focus to the first menu item when the menu is opened, and if you try to tab/move out of the menu, the menu is closed again. So you don't normally encounter the menu button itself while the menu is also opened. Which is why it's, in practice, redundant (unless you're doing something unusual and *don't* autoclose the menu when moving out of it, which sounds...odd; or if you're actually opening something that isn't a menu as such, but more like a disclosure widget?)

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Bryan Garaventa
Date: Wed, Nov 15 2023 7:14PM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

Hi,
Typically it's not that useful to have aria-expanded on a standalone menu button, but it is, however, very useful on a menu item within a menu.

The value isn't necessarily with keyboard navigable screen readers like JAWS and NVDA, but rather with touch-based screen readers like VoiceOver on iOS. You can try this out here: https://whatsock.com/Templates/Menus/Internal/index.htm

The expanded state is announced so that the submenu list hierarchy is clear during touch navigation.

All the best,
Bryan


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Wednesday, November 15, 2023 10:10 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] What's the point of aria-expanded on a menu button?



On 15/11/2023 17:13, Jonathan Michael Bodnar via WebAIM-Forum wrote:
> From a component design perspective the button to toggle the menu would be external to the collapsible region of the menu, or external to the menu, and reachable regardless of the menu state. The aria-expanded attribute indicates the state of the menu the button controls.

But a proper menu sets focus to the first menu item when the menu is opened, and if you try to tab/move out of the menu, the menu is closed again. So you don't normally encounter the menu button itself while the menu is also opened. Which is why it's, in practice, redundant (unless you're doing something unusual and *don't* autoclose the menu when moving out of it, which sounds...odd; or if you're actually opening something that isn't a menu as such, but more like a disclosure widget?)

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Jon Gunderson
Date: Mon, Nov 20 2023 10:53AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | Next message →

There is currently an open issue related to `aria-expanded` in the ARIA
APG, to also require it to be set to `false` when the menu is closed. It
would be a good place to raise the question of usefulness, so iit's purpose
could be more fully explained. The APG pays attention to external comments
that are raised in issues, so I encourage you to comment.

[Issue #2834: Revise menu button examples to declare aria-expanded="false"
when collapsed](https://github.com/w3c/aria-practices/issues/2834)


On Wed, Nov 15, 2023 at 8:15 PM Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi,
> Typically it's not that useful to have aria-expanded on a standalone menu
> button, but it is, however, very useful on a menu item within a menu.
>
> The value isn't necessarily with keyboard navigable screen readers like
> JAWS and NVDA, but rather with touch-based screen readers like VoiceOver on
> iOS. You can try this out here:
> https://whatsock.com/Templates/Menus/Internal/index.htm
>
> The expanded state is announced so that the submenu list hierarchy is
> clear during touch navigation.
>
> All the best,
> Bryan
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: Wednesday, November 15, 2023 10:10 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] What's the point of aria-expanded on a menu button?
>
>
>
> On 15/11/2023 17:13, Jonathan Michael Bodnar via WebAIM-Forum wrote:
> > From a component design perspective the button to toggle the menu would
> be external to the collapsible region of the menu, or external to the menu,
> and reachable regardless of the menu state. The aria-expanded attribute
> indicates the state of the menu the button controls.
>
> But a proper menu sets focus to the first menu item when the menu is
> opened, and if you try to tab/move out of the menu, the menu is closed
> again. So you don't normally encounter the menu button itself while the
> menu is also opened. Which is why it's, in practice, redundant (unless
> you're doing something unusual and *don't* autoclose the menu when moving
> out of it, which sounds...odd; or if you're actually opening something that
> isn't a menu as such, but more like a disclosure widget?)
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke
>
> > > at http://webaim.org/discussion/archives
> >
> > > > >

From: Jon Gunderson
Date: Wed, Nov 29 2023 9:36AM
Subject: Re: What's the point of aria-expanded on a menu button?
← Previous message | No next message

The use of `aria-expanded` on menu button is to support touch-based screen
readers, see the following discussion for details:
https://github.com/w3c/aria-practices/issues/2808

Jon


On Mon, Nov 20, 2023 at 11:53 AM Jon Gunderson < = EMAIL ADDRESS REMOVED = >
wrote:

> There is currently an open issue related to `aria-expanded` in the ARIA
> APG, to also require it to be set to `false` when the menu is closed. It
> would be a good place to raise the question of usefulness, so iit's purpose
> could be more fully explained. The APG pays attention to external comments
> that are raised in issues, so I encourage you to comment.
>
> [Issue #2834: Revise menu button examples to declare aria-expanded="false"
> when collapsed](https://github.com/w3c/aria-practices/issues/2834)
>
>
> On Wed, Nov 15, 2023 at 8:15 PM Bryan Garaventa <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi,
>> Typically it's not that useful to have aria-expanded on a standalone menu
>> button, but it is, however, very useful on a menu item within a menu.
>>
>> The value isn't necessarily with keyboard navigable screen readers like
>> JAWS and NVDA, but rather with touch-based screen readers like VoiceOver on
>> iOS. You can try this out here:
>> https://whatsock.com/Templates/Menus/Internal/index.htm
>>
>> The expanded state is announced so that the submenu list hierarchy is
>> clear during touch navigation.
>>
>> All the best,
>> Bryan
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Patrick H. Lauke
>> Sent: Wednesday, November 15, 2023 10:10 AM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: Re: [WebAIM] What's the point of aria-expanded on a menu button?
>>
>>
>>
>> On 15/11/2023 17:13, Jonathan Michael Bodnar via WebAIM-Forum wrote:
>> > From a component design perspective the button to toggle the menu
>> would be external to the collapsible region of the menu, or external to the
>> menu, and reachable regardless of the menu state. The aria-expanded
>> attribute indicates the state of the menu the button controls.
>>
>> But a proper menu sets focus to the first menu item when the menu is
>> opened, and if you try to tab/move out of the menu, the menu is closed
>> again. So you don't normally encounter the menu button itself while the
>> menu is also opened. Which is why it's, in practice, redundant (unless
>> you're doing something unusual and *don't* autoclose the menu when moving
>> out of it, which sounds...odd; or if you're actually opening something that
>> isn't a menu as such, but more like a disclosure widget?)
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
>> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
>> https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke
>>
>> >> >> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>