CODEWITHSUNDEEP
htmlnavigationfocusaccessibilityscreen-readers
ducklet
ducklet

Reputation: 73

What is current best practice for moving focus in an accessible menu (in html), tab or arrow keys?

A co-worker referred me to http://access.aol.com/dhtml-style-guide-working-group/#menu, but I'm not sure how up to (or out of!) date the information there is. I also tried http://www.w3.org/TR/wai-aria/ (and a bunch of other sites!), but don't see anything that answers my specific question.

I'm working on a website where a widget brings focus to items within a horizontal list of links. I want to make sure that it is still good practice to allow users to tab to the beginning of the menu but then use the left and right arrow keys, not tab, to navigate through the individual list items. I can imagine that some users would prefer/have an easier time with each method. I would like to mention that I have tested the site on a screen reader and it does verbally acknowledge each item.

Thanks in advance for any help!

Upvotes: 7

Views: 8336

Answers (2)

ckundo
ckundo

Reputation: 1569

What you are describing sounds like a menu. The W3C WAI documentation says to use arrow keys to navigate items within a menu bar item or drop-down list.

  • Press the 'Tab' key to move through the elements on the page. You can press 'Shift-Tab' to go backwards.
  • To move within elements such as drop-down lists and menu bars, press the arrow keys.

Similar instructions are presented on the ARIA authoring documentation:

  • Keyboard Actions if focus is on a menu item
  • Left arrow: Open next pull down menu and select first item
  • Right arrow: Open previous pull menu and select first item
  • Up arrow: Select previous menu item
  • Down arrow: Select next menu item
  • Enter: Invoke selected item and dismiss menu
  • Space: Invoke selected item and dismiss menu
  • Esc: Close menu and return focus to menubar

Upvotes: 8

James Thompson
James Thompson

Reputation: 1

You generally use tab to jump links and the arrow keys to move to the next set of text in an area. Since the list is of links and the list is not described as a drop down, I would say tabbing is the best way to navigate it.

Alternatively, if the list had some links and some text, then allowing both the arrow keys and tabbing might be the way to go since it would allow the user to choose how they interact with it instead of choosing for them.

Upvotes: 0

Related Questions