Toolbar Example

Following is an example implementation of the design pattern for toolbar that demonstrates how a toolbar can group a set of buttons into a single tab stop. It also illustrates the roving tabindex method for managing focus within a component.

Example

Accessibility Features

  1. When tabbing into the toolbar, focus returns to the control that last had focus. Focus movement inside the toolbar is managed using roving tabindex.
  2. Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable. For additional guidance, see Focusability of disabled controls.
  3. Since Down Arrow is not used to navigate a horizontal toolbar, the menubutton can be opened with Down Arrow as well as Enter.

Keyboard Support

Key Function
Tab
  • Moves focus into and out of the toolbar.
  • The first control is focused if the toolbar is receiving focus for the first time after page load.
  • Otherwise, the most recently focused control receives focus.
Left Arrow
  • Moves focus to the previous control.
  • If the first control has focus, focus moves to the last control.
Right Arrow
  • Moves focus to the next control.
  • If the last control has focus, focus moves to the first control.
Home Moves focus to the first control.
End Moves focus to the last control.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
toolbar div
  • Identifies the toolbar container.
  • The toolbar div is not focusable because focus is managed with a roving tabindex.
aria-label="LABEL_STRING" div
  • Provides an accessible label for the toolbar.
  • An invisible label is appropriate when the visual context adequately communicates purpose.
button div Identifies the element as a button.
tabindex=-1 button
  • Makes the element focusable but not part of the page Tab sequence.
  • Applied to all elements contained in the toolbar except for one that is included in the page Tab sequence.
  • This approach to managing focus is described in the section on roving tabindex.
tabindex=0 button
  • Makes the element focusable and includes it in the page Tab sequence.
  • Set on only one widget contained by the toolbar.
  • On page load is set on the first widget element contained by the toolbar.
  • Moves with focus inside the toolbar so the most recently focused element is included in the page Tab sequence.
  • This approach to managing focus is described in the section on roving tabindex.
aria-disabled="true" button Informs assistive technologies of the disabled state.

Javascript and CSS Source Code

HTML Source Code