Mega menu accessibility on « Adobe Accessibility

Our first major decision in implementing our mega menu was to respect user expectations for global navigation. As an accessibility engineer, it’s tempting to want always want to implement the appropriate WAI-ARIA design pattern for the widget I’m developing. In this case, working on a menu, I looked to the WAI-ARIA Menu or Menu bar (widget) design pattern which describes the keyboard interaction and WAI-ARIA roles, state and properties for a list of links presented “in a manner similar to a menu on a desktop application.” This would seem to fit the bill, but it’s somewhat problematic when implemented in its entirety for global navigation.

The design pattern specifies that the menu be treated as a single stop in the tab order, after which the arrow keys move between the menu and submenu items. This is the way application menus behave in desktop applications, and it improves accessibility for keyboard users because only one tab key press is required to move from the menu to the next focusable element in the application. However, for global navigation, we feel that most users still expect to be able to tab to at least the top level links in the navigation, and that the discovery of a jump in focus from the second link in the site to the search input, skipping all other top-level navigation items, could be confusing and would require unnecessary explanation.

curated by (Lifekludger)
Read full article at Source: Mega menu accessibility on « Adobe Accessibility