Accessibility in React Ribbon

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 Intermediate
Section 508 Support Yes
Screen Reader Support Intermediate
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Ribbon component user 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
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.
Tab To focus 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.

See also