Accessibility in React Dropdown Menu

4 Sep 20264 minutes to read

The React Dropdown Menu 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 React Dropdown Menu component:

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
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

Legend:

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

Attributes Purpose
role Identifies the React Dropdown Menu 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 React Dropdown Menu 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 React Dropdown Menu component’s accessibility is validated using accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the React Dropdown Menu component is shown in the following sample. Open the sample in a new window to evaluate the React Dropdown Menu 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 React Dropdown Menu component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the React Dropdown Menu component with accessibility tools.

See also