Tab, Arrow Keys Space and Enter - Get 'A' Certified

Some keys must be programmed to make navigating your web application accessible. These keys are:

1. Tab and Shift-Tab
2. Up, Down, Right, Left arrows
3. Space and Enter

Tab and Shift-Tab

The user should be able to jump from element to element when they press tab.

For example, in a navigation bar, tab moves the focus to the next option in the menu.

(Pressing the right and down arrow keys should do this same thing)

Up, Down, Right, Left arrows

Use down and right arrow key to move the focus to the next submenu in a drop down menu, and use up and left arrow keys to move the focus to the previous submenu.

Space and Enter

These two keys should both select (click) the element that has focus.

Example Code

To understand the code below, keep these things in mind:

• In HTML, each key is associated with a unique keyCode.
  For example, the keycode for Tab is 9.
  You can find the list at: CSS Tricks: Key Codes
• The focused menu item here is the menu item that the user has moved focus to, but hasn’t chosen yet. This is usually shown visually with a dotted box surrounding the menu item or it might be highlighted.
  
  
  
• The active menu item is menu item you chose (by clicking, pressing space or enter). Focus may be on a different menu item.

References: Find the original Code here:

https://github.com/bigbluebutton/bigbluebutton/blob/master/bigbluebutton-html5/imports/ui/components/settings/component.jsx