Accessibility in Angular Toolbar
31 Aug 20266 minutes to read
The Angular Toolbar component is designed to follow the WAI-ARIA Authoring Practices Guide for the Toolbar pattern. It exposes the appropriate WAI-ARIA roles, states, and properties, and provides keyboard navigation for users of assistive technologies.
Accessibility information is conveyed through attributes such as aria-label, aria-orientation, aria-expanded, and aria-haspopup, which assistive technologies consume to describe elements and their state. Keyboard navigation follows the WAI-ARIA practices and the Toolbar has been verified in major screen readers.
The accessibility compliance for the Toolbar component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.ARIA attributes
The Toolbar applies ARIA accessibility attributes following the WAI-ARIA Authoring Practices, so it is consumable by screen readers and other assistive technology devices.
Role
| Attribute | Function |
|---|---|
role="toolbar" |
Set on the Toolbar element to describe its actual role to assistive technologies. |
Attributes
| Attribute | Function |
|---|---|
aria-orientation |
Set on the Toolbar element to indicate the Toolbar orientation. Default value is horizontal. |
aria-label |
Set on the Toolbar element to describe the purpose of the toolbar group. The value can be customized in Angular by using htmlAttributes on the Toolbar host. |
aria-expanded |
Set on the Toolbar popup trigger element to indicate whether the overflow popup is currently open (true) or closed (false). The value toggles with the popup state. |
aria-haspopup |
Set on the Toolbar overflow trigger element to indicate that the Toolbar opens a popup. Default value is false. When overflowMode is 'Popup', the attribute value is set to true. |
aria-disabled |
Set on Toolbar items to indicate the disabled state of the item. To disable items programmatically, use the enableItems method with false. |
Keyboard interaction
Keyboard navigation is enabled by default. The key maps are split between the main Toolbar and the overflow popup when it is open.
Main Toolbar navigation
| Key | Description |
|---|---|
| Left | Moves focus to the previous item. |
| Right | Moves focus to the next item. |
| Home | Moves focus to the first Toolbar item. |
| End | Moves focus to the last Toolbar item. |
| Enter | When focus is on a Toolbar command, activates the item. When focus is on the popup trigger, opens the popup. |
| Tab | Moves focus through the interactive elements in forward order. |
| Shift + Tab | Moves focus through the interactive elements in reverse order. |
Popup navigation
When the overflow popup is open, focus moves into the popup and the following keys apply in addition to Tab / Shift + Tab.
| Key | Description |
|---|---|
| Down | Moves focus to the next popup item. |
| Up | Moves focus to the previous popup item. |
| Enter | Activates the focused popup item. |
| Esc | Closes the popup and returns focus to the Toolbar trigger. |
Ensuring accessibility
The Toolbar component’s accessibility levels are ensured through automated validation using accessibility-checker and axe-core during the Syncfusion test pipeline.
You can review the live Toolbar demo and run accessibility tools against it. Open the Toolbar demo in a new window to evaluate the component with accessibility tools.