Developing Accessible Web Applications Toolbar Sample

Demo

Features Summary

The HTML ul list element is the ideal element with which to express a group of hierarchically-related items.
Semantic HTML:
- li element provides the grouping mechanism
- li element represents each node in the group.
- Actionable text is a link element
WAI-ARIA:
- toolbar role
- aria-label attribute
Other:
- Arrow key navigation
- Tab navigation with tabindex
- Large hit targets
- Selections activated with both the Enter key and Spacebar

Usage

Navigate the toolbar with the Tab, Left Arrow, and Right Arrow keys, and activate selections with the Enter key and the Spacebar.

Sample Code

HTML

The HTML for the toolbar introduces the model used in all list-based examples, a list element with a few child list items, each containing a link. This is a sound semantic approach to all hierarchical, flat or nested, groups of links, whether they are in a single list (toolbar), in popup child lists (menus), or in expandable lists (trees).

There is one WAI-ARIA role and one attribute for a toolbar. The "toolbar" role identifies the ul element as a toolbar to assistive technology, and the aria-label attribute gives a friendly name ("Navigation Bar", in this case) to the toolbar for assistive technology devices.

The additional onkeydown function calls in the anchors provide a means to trap the Spacebar and Esc key actions

  <ul class="toolbar" role="toolbar" aria-label="Navigation Bar" onkeydown="OnToolbarKeydown(event);" 
    onclick="OnToolbarClick(event);">
    <li class="first"><a href="File.htm" role="menuitem" onkeydown="tbKeyDown(event);">File</a></li>
    <li><a href="View.htm" role="menuitem" onkeydown="tbKeyDown(event);">View</a></li>
    <li><a href="Settings.htm" role="menuitem" onkeydown="tbKeyDown(event);">Settings</a></li>
  </ul>;

CSS

The CSS for the toolbar turns off padding, margin, and list-style for the list element. The list item elements are floated left, so that they appear horizontally rather than in the default vertical list layout. The display property on the links is set to block so that the entire tool bar item is hot.

ul.toolbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.toolbar li {
  float: left;
  border: 1px solid;
  border-left: none;
  background-color: menu;
  color: menutext;
}
ul.toolbar li.first {
  border-left: 1px solid gray;
}
ul.toolbar li a {
  color: black;
  text-decoration: none;
  width: 100%;
  height: 100%;
  padding: 0.2em 2em 0.2em 0.5em;
  width: 8em;
  display: block;
}
ul.toolbar a:hover {
  text-decoration: underline;
}
ul.toolbar a:focus {
  color: highlighttext;
  background-color: highlight;
}