WebAIM - Web Accessibility In Mind

E-mail List Archives

aria-expanded menu or dialog?

for

From: glen walker
Date: Mar 6, 2021 8:58AM

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?