Toolbar Example
Read This First
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
- There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
- The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
About This Example
The following example of an editor toolbar implements the Toolbar Pattern and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop. For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar. For instance, it includes both a checkbox and toggle buttons. In a typical implementation, the design would use either one or the other but not both. Similarly, the edit field is included to help simulate actual implementation and is not intended to represent an actual rich text editor. This example also illustrates the practice of Managing Focus Within Components Using a Roving tabindex.
Example
Accessibility Features
Keyboard Features
- When tabbing into the toolbar, focus returns to the control that last had focus. Focus movement inside the toolbar implements the practice of Managing Focus Within Components Using a Roving tabindex.
- When any of the cut, copy and paste buttons are disabled they remain focusable to ensure screen reader users are aware of their presence. For additional guidance, see Focusability of disabled controls.
-
Left Arrow and Right Arrow navigate among elements in the toolbar so Up Arrow and Down Arrow are available to:
- Navigate among radios in the text alignment group. For instance, Down Arrow moves focus from last to first member in the group.
- Open the font menu button, which can also be opened with Enter.
- Increase and decrease the font size spin button.
Focus Styling
- When the toolbar has focus, the container element border is highlighted, helping indicate that the container supports directional navigation with the arrow keys.
- When a toolbar item has focus, its border is highlighted and the background color of the button also changes.
Button Popup Labels
The bold, italic, underline, and text align buttons have popup labels that implement the requirements of WCAG Success Criterion 1.4.13 Content on Hover or Focus:
- When a bold, italic, underline, or text align button receives focus or mouse hover, a popup appears above the button revealing its text label.
- The popup label remains visible when the pointer hovers over the label content.
- Pressing Esc hides the popup label .
Keyboard Support
Toolbar
The toolbar provides the following keyboard support described in the toolbar pattern.
Key | Function |
---|---|
Tab |
|
Right Arrow |
|
Left Arrow |
|
Home | Moves focus to the first control. |
End | Moves focus to the last control. |
ESC | If a button popup label is visible, hides it. |
Toggle Buttons (Bold, Italic, Underline)
The toggle buttons for choosing to apply Bold, Italic, and Underline styling provide the following keyboard support described in the Button Pattern.
Key | Function |
---|---|
Enter Space |
Toggle the pressed state of the button. |
Radio Group (Text Alignment)
The buttons for choosing left, center, or right text alignment are styled like toggle buttons. However, since pressing one toggles off another so that only one button in the group is in the pressed state, the toggles behave like radio buttons. Because ARIA is designed to inform assistive technologies about UI semantics and behaviors, not styling, the alignment toggles provide the following keyboard support described in the Radio Group Pattern. As described in the pattern, nesting a radio group in a toolbar calls for an important behavioral difference compared to radios outside a toolbar: moving focus inside the group does not automatically change which button is checked. In addition, because Left Arrow and Right Arrow are needed by the parent toolbar, they are not captured by the radio group. The toolbar thus provides navigation into, inside, and out of the nested radio group.
Key | Function |
---|---|
Enter Space |
|
Down Arrow |
|
Up Arrow |
|
Button (Cut, Copy, Paste)
The buttons for cut, copy, and paste provide the following keyboard support described in the
Button Pattern.
While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled
instead of the HTML disabled
attribute.
Key | Function |
---|---|
Enter Space |
If the button is enabled, execute the action associated with the button. Otherwise, do nothing. |
Menu Button (Font Family)
The menu button for opening the font family menu provides the following keyboard support described in the Menu Button Pattern.
Key | Function |
---|---|
Enter Space Down Arrow Up Arrow |
Open the menu and place focus on a menu item. In this implementation, the focus is set on the currently selected font family when the menu opens. |
Menu (Font Family)
The menu for choosing a font family provides the following keyboard support described in the Menu and Menubar Pattern.
Key | Function |
---|---|
Enter Space |
Activate the menu item, close the menu, and place focus on the menu button. |
Down Arrow |
|
Up Arrow |
|
ESC | Closes the menu and moves focus to the menu button. |
Spin Button (Font Size)
The spin button for changing font size provides the following keyboard support described in the Spin Button Pattern.
Key | Function |
---|---|
Down Arrow | Decreases the font size of the text in the textarea by 1 point. |
Up Arrow | Increases the font size of the text in the textarea by 1 point. |
Page Down | Decreases the font size of the text in the textarea by 5 points. |
Page Up | Increases the font size of the text in the textarea by 5 points. |
Checkbox (Night Mode)
The checkbox for toggling night mode provides the following keyboard support defined in the Checkbox Pattern. As an HTML input element, the browser provides the keyboard support.
Key | Function |
---|---|
Space | Toggles the state of the checkbox. |
Link (Help)
The link for opening a help page provides the following keyboard support described in the Link Pattern. As an HTML link, the keyboard support is provided by the browser.
Key | Function |
---|---|
Enter Space |
Activate the link. |
Role, Property, State, and Tabindex Attributes
Toolbar
The toolbar implements the following ARIA attributes described in the Toolbar Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
toolbar |
div |
|
|
aria-label="Text Formatting"
|
div |
Provides the toolbar with an accessible name of "Text Formatting". | |
aria-controls="IDREF"
|
div |
Set to a value that references the text area, indicating the toolbar controls the text area. | |
tabindex="-1"
|
button , div , input[type="checkbox"] , a |
|
|
tabindex="0"
|
button , div , input[type="checkbox"] , a |
|
Toggle Buttons (Bold, Italic, Underline)
The toggle buttons for choosing to apply Bold, Italic, and Underline styling implement the following ARIA attributes described in the Button Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
aria-pressed="true" |
button |
Indicates the button is a toggle and that the styling controlled by the button has been applied. | |
aria-pressed=
|
button |
Indicates the button is a toggle and that the styling controlled by the button has NOT been applied. | |
aria-hidden="true" |
span |
Hides the icon character from being included in the accessible name. |
Radio Group (Text Alignment)
The buttons for choosing left, center, or right text alignment are styled like toggle buttons. However, since pressing one toggles off another so that only one button in the group is in the pressed state, the toggles behave like radio buttons. Because ARIA is designed to inform assistive technologies about UI semantics and behavior, not styling, the alignment toggles implement the following ARIA attributes described in the Radio Group Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
radiogroup |
div |
Identifies the div element as a container for group of radio buttons. |
|
aria-label="Text Alignment" |
div |
Defines the accessible name for the group of radio buttons as "Text Alignment". | |
radio |
button |
|
|
aria-checked="true" |
button |
|
|
aria-checked="false" |
button |
|
|
aria-hidden="true" |
span |
Hides the icon character from being included in the accessible name. |
Button (Cut, Copy, Paste)
The buttons for cut, copy, and paste implement the following ARIA attributes described in the
Button Pattern.
While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled
instead of the HTML disabled
attribute.
Role | Attribute | Element | Usage |
---|---|---|---|
aria-disabled="true" |
button |
Set when the button is disable to inform assistive technologies of the disabled state. | |
aria-disabled="false" |
button |
Set when the function provided by the button is available. |
Menu Button (Font Family)
The menu button for opening the font family menu implements the following ARIA attributes described in the Menu Button Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
aria-label="Font: FONT_FAMILY_NAME" |
button |
|
|
aria-haspopup="true" |
button |
|
|
aria-controls="IDREF" |
button |
|
|
aria-expanded="false" |
button |
Indicates the menu is not displayed and that activating the menu button opens the menu. | |
aria-expanded="true" |
button |
Indicates the menu is displayed and that activating the menu button closes the menu. |
Menu (Font Family)
The menu for choosing a font family implements the following ARIA attributes described in the Menu and Menubar Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul |
Identifies the ul element as a menu . |
|
aria-label="Font Family" |
ul |
Defines the accessible name for the menu as "Font Family". | |
menuitemradio |
li |
|
|
aria-checked="true" |
li |
|
|
aria-checked="false" |
li |
|
|
tabindex="-1" |
li
|
|
Spin Button (Font Size)
The spin button for changing font size implements the following ARIA attributes described in the Spin Button Pattern.
Role | Attribute | Element | Usage |
---|---|---|---|
spinbutton |
div |
Identifies the div element as a spinbutton . |
|
aria-label="Font size in points" |
div |
Defines the accessible name for the spin button as "Font size in points". | |
aria-valuenow="NUMBER_POINTS" |
div |
|
|
aria-valuetext="NUMBER_POINTS Points" |
div |
|
|
aria-valuemin="8" |
div |
Indicates the minimum allowed value for the spin button, i.e., smallest supported font size. | |
aria-valuemax="40" |
div |
Indicates the maximum allowed value for the spin button, i.e., largest supported font size. |
JavaScript and CSS Source Code
- CSS: toolbar.css
- CSS: menuButton.css
- Javascript: FormatToolbar.js
- Javascript: FormatToolbarItem.js
- Javascript: FontMenuButton.js
- Javascript: FontMenu.js
- Javascript: FontMenuItem.js
- Javascript: SpinButton.js
HTML Source Code
To copy the following HTML code, please open it in CodePen.