NOTE: This example is not yet complete. When it is ready for review, feedback will be welcome in issue 126.
Following is an example implementation of the design pattern for toolbar that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop. It also illustrates the roving tabindex method for managing focus in a composite component.
The focus is managed using roving tabindex.
Because the control that most recently had focus has
tabindex="0", focus returns to the control that last had focus when tabbing into the toolbar.
- Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
- The menubutton can be opened with either Enter or Down Arrow since Down Arrow is not needed to navigate a horizontal toolbar.
- Tab: Moves focus into and out of the toolbar. When focus moves into the toolbar, the first enabled control receives focus. If the toolbar has previously contained focus, the control that last had focus receives focus.
- Left Arrow: Moves focus to the previous control, wrapping from the first control to the last.
- Right Arrow: Moves focus to the next control, wrapping from the last control to the first.
- Home: Moves focus to the first control.
- End: Moves focus to the last control.
Role, Property, State, and Tabindex Attributes
|Attribute||Applied to Element||Usage|
Identifies the toolbar container for assistive technologies.
Because focus is managed with a roving tabindex instead of
||Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar. Invisible labels are used when sighted users can derive purpose from visual context.|
||Informs assistive technologies of the disabled state.|