WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-expanded menu or dialog?

for

From: Birkir R. Gunnarsson
Date: Mar 6, 2021 1:15PM

What happens when you tab away from the last link in the menu?
Does focus go to the next focusable item on the page or does it go
somewhere else?
I'd say if focus goes to the next focusable item on the page, this can
be presented as a menu. If the menu automatically closes, it's ok (as
long as the aria-expanded attribute of the menu trigger is set
appropriately).
If entering the menu messes with the natural focus order on the page
it's more likely to be some sort of a dialog.


On 3/6/21, glen walker < <EMAIL REMOVED> > wrote:
> I have a "menu" that is a list of links and is implemented well with
> aria-expanded on the parent. It basically follows the disclosure widget
> pattern. However, they have decided that the list of links that displays
> should now cover the entire page. Visually, it kind of makes sense. But
> when it covers the page, it's more like a dialog now, sort of.
>
> As a simple aria-expanded menu (without covering the page), you don't have
> to constrain the keyboard focus or screen reader focus to the menu. It can
> dismiss if you tab off the menu (or press escape) and it can let you
> traverse the DOM/AOM of the rest of the page using the arrow keys even if
> the menu is displayed.
>
> But if the menu covers the page and sort of looks/acts like a dialog, it's
> a lot more work to constrain the keyboard focus and the screen reader
> focus. The only real difference is the visual appearance of the menu. It
> used to be a simple dropdown but now covers the page. The behavior of the
> menu is the same.
>
> I'm struggling with keeping the behavior as if it was a simple menu and
> allow the menu (which now kind of looks like a dialog) to dismiss if you
> tab off the end of the menu. That's weird behavior for a dialog - a dialog
> shouldn't dismiss by tabbing through it. But it's normal behavior for a
> menu.
>
> I like to keep the interface as simple as possible. So is this a menu or a
> dialog? Or is it a lose-lose situation where no matter which pattern I
> use, it's going to be weird for some users?
> > > > >


--
Work hard. Have fun. Make history.