Menu & Disclosure Menu Patterns Used in the Same Nav

Hello,

I have a question I am hoping someone can help me with.

I have a navigation menu that has a couple of different rows/sections.
These rows encompass a page navigation list with dropdown hover menus for a
given page's child page(s). It also has an options menu that on hover,
displays a list of links that include setting a user's preferences and
logging out.

The Page navigation menu follows the Menu or Menu Bar Pattern (
https://www.w3.org/WAI/ARIA/apg/patterns/menu/). Tabbing brings focus to
the first menu item/link in the list and subsequent tabbing moves focus out
of the Page Navigation. Right and Left arrow keys move focus to the next or
previous menu item.

The options menu follows the Disclosure menu pattern (
https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html)
in that tabbing brings focus to the first link in the list and
subsequent tabbing brings focus to the next menu item/links.

Is it confusing for a user to encounter both of these patterns in a single
navigation menu/widget or is the combination of the patterns completely
normal and acceptable? I think the Menu pattern makes perfect sense for a
menu that has an unknown number of menu and submenu items, which could
become problematic for a user who may not be interested in tabbing through
all of them. Whereas the Disclosure menu is suitable for one-level link
lists. I can only assume that listing the links on a page via
screenreader would provide a more consistent experience regardless, but not
being familiar with these tools prevents me from really understanding the
impacts.

Any help would be greatly appreciated!

Thanks,

Andrew Jordan

Received on Friday, 3 June 2022 07:03:37 UTC