Menu bar, Tree menu and Sortable list
Menu bars are typically presented horizontally across the top of a website or web application, containing links to key areas of the website or application, or function as toggles that open submenus, or both links and toggle, and remain in view across the entire website or application.
Roles, states, and properties used in a menu bar
First provide some instructions on how to use the menu with a keyboard and add them to the default options.
Hide the instructions from screen readers until needed, adding
aria-hidden="true" to the instructions
<div> defined when the menu is initialized.
role="menubar" to the top level
<UL> in the menu, and make that UL keyboard focusable with
tabindex="0" so it reads the instructions while in focus being referenced with
For all the menu items in the menu bar that have submenus, add
role="menu" to their
<UL> and hide them by default using
aria-hidden="true". This can be located after the
$elem.find('ul:eq(0)') block presented immediately above.
Hide the links in the menu items from screen readers by default using
tabindex="-1" and setting
Set up the menu items throughout the menu using
role="menuitem". Also remove keyboard access by default with
tabindex="-1" and label each menu item with the text of the associated link using
For each of the menu items that has a submenu, add
aria-haspopup="true" to announce the presence of the submenu, and set its default state to “collapsed” by adding
When a menu item is marked selected, also add
aria-selected="true" and add keyboard access back to the menu item with
Add keyboard access back to menu items using
Reference the keyboard access class, where mouse events are defined in the
onKeyDown function, described below.
showSubMenu function, add
aria-expanded="true" submenus when they are expanded, remove keyboard access from the submenu container with
tabindex="-1". And make the submenu visible with
hideSubMenu function, set
aria-expanded="false", hide submenus with
aria-hidden="true", and remove keyboard access with
tabindex="-1" when a submenu is closed.
collapseAll function is called, to collapse any open menus, reverse all attributes defining the element as open, reverting to
aria-expanded="false" and re-adding keyboard access with
tabindex="0" so it can be opened again.
Adding Keyboard Operability
Menu bar keyboard functionality can be complex, particularly with large menus with multiple levels of submenus, and they can include redundant keys that perform the same function. The W3C defines suggested keyboard interaction for a menu bar as follows:
Here we have implemented a subset of the keyboard interaction W3C recommends in an
onKeyDown() function that is called when event handlers are set up for menu items. These keys include Left and Right Arrows, Up and Down Arrows, the space bar and Enter keys, and Tab and Esc keys. Copy the following function into the ik_menu.js file, near the end, to add keyboard operability to the menu.
Accessible Menu Bar in Action
Watch the following video showing ChromeVox interacting with a menu bar. The Tab key is used to navigate into the menu bar, to the first menu item, and to exit the menu bar. The Left and Right Arrow keys are used to move across the top level menu items, and Up and Down arrows are used to move into and out of a submenu, and to move between menu items in a submenu. The space bar or Enter key are used to activate a menu item. The Esc key closes the current submenu. Aim to have the menu bar you update in the activity coming up on the next page operate and announce itself like the one in the video.
Tree menus often have the same underlying HTML structure as a menu bar, but rather than being arranged in a horizontal layout, they tend to be arranged vertically.
WAI-ARIA roles, states, and properties used in a tree menu
First define instructions on using the tree menu with a keyboard.
init() function add keyboard focus to the tree container by applying
tabindex="0" to it and label the container with the instructions created above, which gets read by screen readers when the menu initially receives focus.
init() function, hide the instructions
<div> from screen readers by default by setting
aria-hidden="true" when the tree menu is initialized.
init() function replace the unordered list semantics with tree menu semantics using
role="tree", and give it a title using
aria-labelledby to reference the title defined in the default options.
init() function, define menu items with
role="treeitem", remove all keyboard access by default with
tabindex="-1", set the number of levels in the tree based on the number of parent ULs with
aria-level=[number of ULs], set the number of tree items on a given level with
aria-setsize="[number of LIs in a UL]", and finally define the position of each tree item within a level using
aria-posinset="[child LI index]".
init() function, if a tree item has a submenu UL that has been opened, set
aria-expanded="true", otherwise set
init() function, for each tree item use the text of the associated
<span> element as its label. To ensure both the label and the contents of the
<span> element are not both read, assign
role="presentation" to the
init() function, where mouse
onclick functionality is used, provide equivalent
keydown functionality, here referencing the
onKeyDownfunction, shown below, that defines the keys to operate the menu.
init() function, right after adding
keydown operability, make the first item in the tree menu focusable by adding
tabindex="0" to the first
selectItem() function, set up a roving tabindex, while at the same time applying
aria-selected=[true | false] when tree items receive or lose focus.
toggleSubmenu() function announce the state of submenus to the screen reader by toggling the
aria-expanded=[true | false] attribute when a menu is opened or closed.
Adding Keyboard Operability
Much like the menu bar described in the previous activity, keyboard operability for a tree menu can be complex, with various operations using multiple key strokes to perform the same function. W3C describe potential keyboard operation in the WAI-ARIA Authoring Practices 1.1, reproduced below.
For the tree menu created here, we’ve added in basic keyboard operability. Keyboard operation includes: Up and Down, and Left and Right Arrows for navigating within the tree, and the Enter or space bar keys to toggle submenus open or closed. The Tab key by default enters and exits the tree menu and does not need to be defined as part of the keyboard operability of the tree menu.
Accessible Tree Menu in Action
Watch the following video showing ChromeVox interacting with a tree menu. The Tab key is used to navigate into the tree menu, to the first tree item, and to exit the tree menu. The Up and Down Arrows are used to move between tree items. The space bar or Enter key are used to expand and collapse a tree item with a submenu. When a submenu is opened, focus moves to the first tree item in the menu. Aim to have the tree menu you update in the activity coming up on the next page operate and announce itself like the one in the video.
One of the more common types of widgets that present barriers for screen reader users are drag and drop features. These can be set up in a grid, where draggable items can be rearranged horizontally or vertically by clicking on an item and moving it to a new position in the grid. A drag and drop may also be a sortable list, where items in a list can be dragged vertically to perhaps position the more important list items near the top of the list. For drag and drop elements you may come across on the Web today, the vast majority only function with a mouse, making them inaccessible to many people who rely on a keyboard to navigate. Here we will look at a sortable list, and the WAI-ARIA and associated keyboard operability required to make that list sortable while using only a screen reader and a keyboard.
Role, states, and properties used in a sortable list
As usual, create instructions on using the sortable list with a keyboard. In this case we also want to determine which modifier key to include in the instructions. For Mac it will be the Command key, otherwise it will be the Ctrl key. Here the standard accesskey key commands will also work as the modifier and can potentially be described as well (e.g. Ctrl+Alt on Mac, or Ctrl on Windows).
Assign a redundant
role="list" to the opening UL, make the UL keyboard focusable, and attach the instruction with
aria-labelledby="[instruction div id]" so keyboard navigation details are announced when the list initially receives focus while using a screen reader.
init() function, generate the
<div> that will contain the instructions, and add
aria-hidden="true" to hide it from screen readers by default.
In the items section of the
init() function, where draggable is defined for each item in the list, add a redundant
role="listitem", and generate a label for each item that describes the list item’s current position and that that list item is “movable.” Finally set
tabindex="0" on the first list item, and
tabindex="-1"on the other list items, to ensure a list item is focusable by default.
Where the draggable attributes are defined near the end of the
init() function, attach a keydown reference to the
onKeyDown() function to make the list draggable with a keyboard.
resetNumbering() function, update the label for moved items to reflect their new position in the list using
aria-label = "[new position]".
Adding Keyboard Operability
Keyboard operation for a drag and drop sortable list is relatively simple, compared to the menu bar and tree menu. Essentially only the Up and Down Arrow keys are needed. The standard operating system modifier keys, typically used with tabindex (e.g. Crtl+Alt, or Alt, or Ctrl), function as the modifier keys when using them in addition to the Up and Down Arrows to grab, drag, and drop a list item.
onKeyDown() function for the sortable list presented below, defines just up and down arrow key operability, along with a roving tabindex. W3C has not yet created a best practice for authoring keyboard interaction for drag and drop elements.
Sortable List in Action
Watch the following video showing ChromeVox interacting with a sortable list. The Tab key is used to navigate into the list, and to exit the list. The Up and Down Arrows are used to move between list items. On a Mac, the Command key plus Up or Down Arrow, selects a list item and moves it to a new location. On windows the Ctrl key is used instead of Command, along with the Up or Down Arrow keys to move list items. Aim to have the sortable list you update in the activity coming up on the next page operate and announce itself like the one in the video.
1) Contao 4) Expression Engine 7) Joomla 10) LAMP/PHP5 13) nGrinder 16) Silverstripe 19) ZenCart
2) DreamFactory 5) Elgg 8) Jenkins 11) LAMP/PHP7 14) Umbraco 17) Cloud 20) Zend
3) Drupal 6) Git Server 9) Laravel 12) Magento 15) Wordpress 18) Symfony