CODEWITHSUNDEEP
accessibility
melissa
melissa

Reputation: 11

Keyboard Accessible Navigation Menu

When navigating a website menu with a keyboard using tab, how do I prevent the tab sequence from selecting the submenu items? I would like the tab focus order to only access the top level links. If a user wants to access the submenu links, then they should be able to press the down arrow key to access them.

Upvotes: 0

Views: 1131

Answers (1)

Andy
Andy

Reputation: 6115

Please beware Alexander’s comment that the ARIA Authoring Practices Guide (APG) is discouraging the menubar pattern for navigation

CAUTION! Before considering use of the ARIA menubar pattern for site navigation, it is important to understand:

  • The menubar pattern requires complex functionality that is unnecessary for typical site navigation that is styled to look like a menubar with expandable sections or "fly outs".
  • A pattern more suited for typical site navigation with expandable groups of links is the disclosure pattern. For an example, see Example Disclosure Navigation Menu.

You can take a look at the Disclosure Navigation Menu for guidelines and examples of what you are looking for.

Otherwise, if you really have the need of focus navigation inside a component by means other than tab, you will need some JavaScript to establish a Roving tab index.

That means you programmatically set tabindex=0 to only one element, which should have focus—i.e. your sub menu item—and tabindex=-1 to all others (inside the composite component).

<ul class="menubar">
  <li><a href="…" tabindex="-1">Main menu item X</a>
    <ul>
      <li><a href="…" tabindex="0">Sub menu item 1</a></li>
      <!-- currently focused -->
      <li><a href="…" tabindex="-1">Sub menu item 2</a></li>
      …
    </ul>
  </li>
</ul>

See Keyboard Navigation Inside Components for the JavaScript necessary.

Please beware as well that you will need some ARIA properties and states to indicate that a menu item can be opened, like aria-haspopup="menu"and aria-expanded, along with the proper roles.

See the AGP Menu pattern

Upvotes: 0

Related Questions