Keyboard accessible menu
Keyboard accessibility is an important aspect of designing a menu on a website, as it allows users to easily navigate the menu without using a mouse using only the keyboard. This is particularly useful for people with mobility impairments or visual impairments that rely on keyboard controls.
Design your main menu as you are used to in WordPress. Fora11y makes sure this keyboard is accessible!
Provide a logical order. Make sure the tab order is logical and matches the visual order of the menu items. Users should be able to navigate the menu items in an order that is understandable to them.
The main menu can only handle one sub-level. When creating a menu that has more than one sub-level, these items aren’t shown. Multi level menu’s are on our roadmap.
Keyboard behavior
Web application menus are expected to work like desktop application menus. For example, the left and right keys are used to iterate through the top-level items, and the up and down arrows are used to navigate submenus. Pressing the tab key focuses the next item after the menu instead of the next menu item.
Top-Level Menu Items
The following table summarizes the typical behavior of top-level menu items:
| Key | Action |
|---|---|
| tab ⇥ | Select the next focusable element outside of the menu. |
| shift ⇧ + tab ⇥ | Select the previous focusable element outside of the menu. |
| right → | Select the next top-level menu item. |
| left ← | Select the previous top-level menu item. |
| return/enter ↵ | Open the submenu, select first submenu item. |
| space | Open the submenu, select first submenu item. |
| down ↓ | Open the submenu, select first submenu item. |
| up ↑ | Open the submenu, select last submenu item. |
| esc | Leave the menu. |
Submenu Items
The following table summarizes the typical behavior of submenu items:
| Key | Action |
|---|---|
| tab ⇥ | Close the submenu, select the next focusable element outside of the menu. |
| shift ⇧ + tab ⇥ | Close the submenu, select the previous focusable element outside of the menu. |
| right → | Close the submenu, select the first item of the next top-level menu item. |
| left ← | Close the submenu, select the first item of the previous top-level menu item. |
| return/enter ↵ | Carry out function of this item. (In this example: bring up a dialog box with the text of the chosen menu item.) |
| space | |
| down ↓ | Select next submenu item. |
| up ↑ | Select previous submenu item. |
| esc | Close the submenu, select the current top-level menu item. |