Accessibility in React Context Menu

09 Oct 20265 minutes to read

The React Context Menu component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the React Context Menu component is outlined below.

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
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 Context Menu component implements the WAI-ARIA menubar pattern. The following ARIA attributes are rendered by the Context Menu component:

Attributes Purpose
role Indicates the React Context Menu component popup as menu, popup items as menuitem, and divider items as separator.
aria-haspopup Indicates the availability and type of interactive popup element. Rendered as menu on items that open a submenu (legacy user agents may report true).
aria-expanded Indicates whether the subtree can be expanded or collapsed, as well as whether its current state is expanded or collapsed.
aria-label Indicates the menu item text.
aria-disabled Indicates whether a menu item is disabled and not interactive.
aria-checked Indicates the checked state of a checkable/selected menu item.

Keyboard interaction

The React Context Menu component follows the keyboard interaction guidelines, making it accessible for people who use assistive technologies and those who rely completely on keyboard navigation. The following keyboard shortcuts are supported by the React Context Menu component:

Press To do this
Esc Closes the opened submenu.
Enter Selects the focused item.
Up Navigates up or to the previous menu item.
Down Navigates down or to the next menu item.
Left Closes the current submenu and navigates to the parent menu.
Right Opens the submenu of the focused item.

Screen reader support

The React Context Menu component renders the ARIA roles and attributes listed above so that screen readers (such as NVDA, JAWS, and VoiceOver) announce menu structure, item labels, disabled state, and checked state. To localize the announced text, set the appropriate locale strings through the locale property.

Right-to-left support

The React Context Menu component supports right-to-left (RTL) rendering for languages such as Arabic and Hebrew. Enable RTL by setting the enableRtl property to true.

import { enableRtl, L10n } from '@syncfusion/ej2-base';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';

// Enable RTL globally for all Syncfusion components.
enableRtl(true);

function App() {
    const menuItems = [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
    ];
    return <ContextMenuComponent target="#target" items={menuItems} enableRtl={true} />;
}

Accessibility validation demo

The React Context Menu component’s accessibility levels are validated through the accessibility-checker and axe-core tools during automated testing.

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

See also