Toolbar Example

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

Focus Styling

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:

Keyboard Support

Toolbar

The toolbar provides the following keyboard support described in the toolbar pattern.

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.
Right Arrow
  • Moves focus to the next control.
  • If the last control has focus, focus moves to the first control.
  • If an item in the popup menu has focus, does nothing.
Left Arrow
  • Moves focus to the previous control.
  • If the first control has focus, focus moves to the last control.
  • If an item in the popup menu has focus, does nothing.
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
  • If the focused radio button is checked, do nothing.
  • Otherwise, uncheck the currently checked radio button and check the radio button that has focus.
Down Arrow
  • Moves focus to the next radio button.
  • If the last radio button has focus, focus moves to the first radio button.
Up Arrow
  • Moves focus to the previous radio button.
  • If the radio button has focus, focus moves to the last radio button.

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
  • Moves focus to the next menu item.
  • If the last menu item has focus, focus moves to the first menu item.
Up Arrow
  • Moves focus to the previous menu item.
  • If the first menu item has focus, focus moves to the last menu item.
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
  • Makes the toolbar item focusable but not part of the page Tab sequence.
  • Applied to all toolbar items contained in the toolbar except for one that is included in the page Tab sequence.
  • This approach to managing focus is described in the practice of Managing Focus Within Components Using a Roving tabindex.
tabindex="0" button, div, input[type="checkbox"], a
  • Makes the toolbar item part of the page Tab sequence.
  • Set on only one item contained in the toolbar.
  • On page load, set on the first item in the toolbar.
  • Moves with focus inside the toolbar so the most recently focused item is included in the page Tab sequence.
  • This approach to managing focus is described in the practice of Managing Focus Within Components Using a Roving tabindex.

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=false 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
  • Identifies the button element as a radio button.
  • The accessible name comes from the child text content of the button element.
aria-checked="true" button
  • Indicates the radio button is checked, i.e., the type of alignment currently applied to the text area.
  • Only one radio button in the group has aria-checked set to true at any given time.
aria-checked="false" button
  • Indicates the radio button is NOT checked.
  • All radio buttons in the group, except for one, have aria-checked set to false.
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
  • Defines the accessible name for the menu button by concatenating Font: with the name of the font family currently checked in the menu.
  • Updated when a different font family is chosen in the font family menu.
aria-haspopup="true" button
  • Indicates the button opens a menu.
  • NOTE: While ARIA does not include a menubutton, most platform accessibility APIs have a menubutton role. On those platforms, assistive technologies identify buttons with aria-haspopup set to either true or menu as menu buttons.
aria-controls="IDREF" button
  • Set to a value that references the element with role menu.
  • Indicates the button opens and closes the menu.
aria-expanded="true" button
  • Added when the menu is open.
  • Indicates that the menu is displayed and that activating the menu button closes the menu.
  • The aria-expanded attribute is removed when the menu is closed.
  • Included to support touch devices where screen reader users can touch the menu button when the menu is displayed. Keyboard users cannot focus the menu button when the menu is open.

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
  • Identifies the li element as a menuitemradio.
  • The text content of the li element provides the accessible name of the menuitemradio.
aria-checked="true" li
  • Applied to an element with role menuitemradio to indicate the item is checked, informing users which font is applied to the text area.
  • Only one item in the menu has the checked state at any given time.
aria-checked="false" li
  • Applied to elements with role menuitemradio to indicate the items are NOT checked.
  • All items in the menu, except one, have this value.
tabindex="-1" li
  • Makes the menuitemradio element focusable so DOM focus can be set on the menu item.
  • Dynamically added by JavaScript.

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
  • Indicates the current value of the spin button.
  • Updated by JavaScript as users adjust the value of the spin button.
aria-valuetext="NUMBER_POINTS Points" div
  • Provides a more user friendly announcement of the current value for screen reader users.
  • NUMBER_POINTS is updated by JavaScript as the user adjusts the value of the spin button.
  • As users adjust the value, instead of hearing only a number, they will hear the current value followed by the word Points, e.g., 10 Points.
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

HTML Source Code