Popovers

A popover is a layer that pops up over other elements on a page.

Accessibility

 

Keyboard


Key

Interaction

Tab

Places the focus on the next interactive element within the popover.

Shift + Tab

Places the focus on the previous interactive element within the popover.

Space or Enter

If the focus is on the close button, dismiss the popover.
If the focus is on the referenced object, invoke the popover.

 

Focus order


The focus order of the component.

The focus order of the component.

Design Checklist


Accessible use of color

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

Accessible contrast for text

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

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.

Keyboard interactions

It follows WCAG standards for keyboard accessibility guidelines and includes a description of keyboard interactions.