Modal

Modals appear as a temporary overlay on top of a webpage’s content. They are often used to display additional information, notifications, or interactive components without requiring users to navigate to another website.

Keyboard interactions

Enter or Space navigate through interactable content. 

Esc closes the modal.

Make buttons/icons to close modals visible

Users should be able to exit out of modals easily.

 

Make sure modal windows are in line of sight

Since modals usually disable everything on a window, it’s important to make sure that modals are visible to users. That way, they can see what the modal is trying to communicate, and close it right away.

 

Make modals accessible through keyboard interactions

Allow users to interact with modals using the enter button, space bar, or escape key for ease of accessibility.

Use unique ids. Each modal must have a unique id so that openers can associate them with their aria-controls attribute.

A single modal can have multiple openers. Each opener requires data-open-modal and aria-controls=”MODAL_ID” attributes. Openers can be coded either as <button type="button"> or <a>. Using <a> helps link to modals in the event javascript fails.

Place a data-close-modal attribute on any button that will close a modal. Closers may have event listeners attached to them. Code closers as <button type="button">.

Disable close when an action is required. In instances that a user must make a choice before continuing, you want to prevent them from closing the modal without taking action. Add data-force-action attribute to prevent the user from closing the modal without taking an action.