Accessibility in Angular Ribbon component
27 Aug 202511 minutes to read
The Ribbon component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Ribbon 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.WAI-ARIA attributes
The Ribbon component uses WAI-ARIA patterns to provide accessible functionality. The following ARIA attributes are used in the Ribbon component:
| Attributes | Purpose |
|---|---|
role=tablist |
Identifies the element that serves as the container for a set of tabs. |
role=tab |
Defines an interactive element within a tablist that displays its associated tabpanel when activated. |
role=tabpanel |
Defines the content panel associated with a tab, which is displayed when the tab is active. |
role=button |
Defines a clickable element that triggers a response when activated by the user. |
role=menu |
Defines a widget that offers a list of choices to the user, such as a set of actions or functions. |
role=menuitem |
Defines an option within a menu. |
role=combobox |
Defines an input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. |
role=option |
Defines a selectable item in a listbox or combobox. |
role=gridcell |
Defines a cell within a grid, such as for the tiles in a color palette. |
aria-orientation |
Indicates the orientation of the element, which can be horizontal, vertical, or unknown. |
aria-selected |
Indicates the current selection state of widgets like tabs or options. |
aria-labelledby |
Establishes a relationship between a tab’s content and its corresponding tab header. |
aria-controls |
Associates a tab header with its corresponding tab panel. |
aria-haspopup |
Indicates that the element can trigger a popup and specifies the type of popup (e.g., menu or dialog). |
aria-disabled |
Indicates that the element is visible but not operable. |
aria-expanded |
Indicates whether a collapsible element is currently expanded or collapsed. |
aria-label |
Provides an accessible name for an interactive element. |
aria-checked |
Indicates the state of a checkbox, radio button, or other toggle controls. |
aria-owns |
Establishes a relationship between elements when the DOM hierarchy cannot represent it. |
aria-readonly |
Indicates that the element is not editable but is otherwise operable. |
aria-activedescendant |
Identifies the currently active descendant of a composite widget, such as a combobox or textbox. |
aria-autocomplete |
Indicates how predictions will be presented for a combobox, searchbox, or textbox. |
Keyboard interaction
The Ribbon component follows the keyboard interaction guidelines to support navigation using assistive technologies (AT) and keyboard-only access. The following keyboard shortcuts are supported by the Ribbon component.
Ribbon tab
| Key | Action |
|---|---|
| Tab | Focuses on the Ribbon tabs. |
| Right Arrow | Moves focus to the next tab. |
| Left Arrow | Moves focus to the previous tab. |
| Enter / Space | Selects the currently focused Ribbon tab. |
Ribbon items
| Key | Action |
|---|---|
| Tab | Focuses on the Ribbon items. |
| Right Arrow | Moves focus to the next item. |
| Left Arrow | Moves focus to the previous item. |
| Enter / Space | Selects the currently focused Ribbon item. |
Ribbon dropdown items/split button
| Key | Action |
|---|---|
| Esc | Closes the popup. |
| Enter / Space | Opens the popup or activates the highlighted item and closes the popup. |
| Arrow Up | Moves focus to the next item. |
| Arrow Down | Moves focus to the previous item. |
| Alt + Arrow Up | Closes the popup. |
| Alt + Arrow Down | Opens the popup. |
Ribbon file menu
| Key | Action |
|---|---|
| Tab | Focuses on the Ribbon file menu. |
| Esc | Closes the popup. |
| Enter | Opens the popup or activates the highlighted item and closes the popup. |
| Arrow Up | Moves focus to the previous action item. |
| Arrow Down | Moves focus to the next action item. |
| Alt + Arrow Down | Opens the popup. |
Ribbon combobox
| Key | Action |
|---|---|
| Arrow Down | Selects the first item in the combobox if no item is selected. Otherwise, moves focus to the next item. |
| Arrow Up | Moves focus to the previous item. |
| Page Down | Scrolls down one page and selects the first item when the popup list is open. |
| Page Up | Scrolls up one page and selects the first item when the popup list is open. |
| Enter | Selects the focused item and closes the popup list. |
| Tab | Moves focus to the next focusable element on the page. If the popup is open, it closes the popup first. |
| Shift + Tab | Moves focus to the previous focusable element on the page. If the popup is open, it closes the popup first. |
| Alt + Arrow Down | Opens the popup list. |
| Alt + Arrow Up | Closes the popup list. |
| Esc | Closes the popup list, retaining the currently selected item. |
| Home | Moves the cursor to the beginning of the input text. |
| End | Moves the cursor to the end of the input text. |
Ensuring accessibility
The accessibility of the Ribbon component is ensured by testing it with the accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Ribbon component can be evaluated in the following sample. Open the sample in a new window to test it with accessibility tools.