Context Menu

Contextual menus contain a small set of relevant actions, related to a control, a piece of content, a view in an app, or an area of the UI without cluttering the interface.

Accessibility

 

Keyboard


Key

Interaction

Space or Enter

Open the menu as well as activating menu items with focus

Arrow Keys or Tab

Move focus through the items

Esc or Enter

Close the menu

Design Checklist


square-check-solid

 

Accessible use of color

Color is not used as the only visual means of conveying information and meet a minimum of Level AA WCAG standards.

square-check-solid

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text.

square-check-solid

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1.

square-check-solid

Keyboard interactions

Follows WCAG standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.