Accessibility in React DropDownButton component

2 Mar 20264 minutes to read

The DropDownButton component adheres to accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The following table outlines the accessibility compliance of the DropDownButton component:

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

Legend:

- 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 DropDownButton component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the DropDownButton component:

Attributes	Purpose
role	Identifies the DropDownButton as a button, the popup as a menu, and popup items as menuitem elements.
aria-haspopup	Indicates that the button triggers a popup menu.
aria-expanded	Indicates whether the popup is currently expanded or collapsed.
aria-owns	Defines the relationship between the button and its popup menu in the accessibility tree.
aria-disabled	Indicates that a button is disabled and not operable.

Keyboard interaction

The DropDownButton component follows the keyboard interaction guideline, making it accessible for people who use assistive technologies and those who rely entirely on keyboard navigation. The following keyboard shortcuts are supported:

Press	To do this
Enter / Space	Opens the dropdown popup.
Down / Up	Navigates through popup items.
Escape	Closes the dropdown popup.

Ensuring accessibility

The DropDownButton component’s accessibility is validated using accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the DropDownButton component is shown in the following sample. Open the sample in a new window to evaluate the DropDownButton component’s accessibility with accessibility tools.

See also

• Accessibility in Syncfusion^® React components
  | — | — |
  | Esc | Closes the popup. |
  | Enter | Opens the popup, or activates the highlighted item and closes the popup. |
  | Space | Opens the popup. |
  | Up | Navigates up or to the previous action item. |
  | Alt + Up Arrow | Closes the popup. |
  | Alt + Down Arrow | Opens the popup. |

Ensuring accessibility

The Drop down component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the DropDownButton component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DropDownButton component with accessibility tools.

See also

• Accessibility in Syncfusion^® React components