WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jon Gunderson
Date: Nov 29, 2023 9:36AM

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 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 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 REMOVED> > On Behalf Of
>> Patrick H. Lauke
>> Sent: Wednesday, November 15, 2023 10:10 AM
>> To: <EMAIL 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
>> >>
>> >> >> >> >>
>