How to make pop-up – modal dialog windows accessible?

Dialog windows or modals are interface elements that appear on top of the main content of a web page. They are typically used to display information that is important or needs to be confirmed, such as alerts, confirmation messages, and forms. 

While dialog windows can be very useful, they can also be problematic for users with accessibility needs. For example, modals can trap users within the current window, making it difficult to navigate the rest of the page.

Additionally, modals often contain important information that is not available to screen readers. As a result, it is important to make sure that dialog windows are accessible to all users. Below are some tips for making modals more accessible.

3 steps to make an accessible pop-up

A correctly implemented modal should contain several features for accessibility. A user should be able to close the modal via an “escape”, close button, and when clicking outside modal. The modal should prevent scrolling a page when it is opened. Browser focus should be set in modal instantly. React Aria package is helpful to implement it. 

In the article, we present an easy way to create a useful pop up in 3 steps. Please read the following paragraphs.

1. Step. How to create a modal component?
First, we should create a modal component in React:

function Modal(props) {
  const { title, children } = props;
  const ref = React.useRef();
  const { overlayProps, underlayProps } = useOverlay(props, ref);
  
  return (
    <div className="overlay" {...underlayProps}>
    <div {...overlayProps} ref={ref} className="modal">
    <h3>{title}</h3>
    {children}
    </div>
    </div>
  );
}

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <div className="App">
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen ? (
        <OverlayContainer>
        <Modal isOpen isDismissable onClose={() => setIsOpen(false)}>
        <div>Example modal</div>
        </Modal>
        </OverlayContainer>
      ) : null}
    </div>
  );
}

I’ve used useOverlay hook from @react-aria and I’ve added a button – open modal. This is a base, now we will be adding new functions that will make the modal more accessible.

2. Step. How to make a dialog window accessible?

To prevent scrolling when the modal is opened just add usePreventScroll() in the Modal component.

We have to use useModal and useDialog hooks and pass props to modal div. Now all main features modal works. You can close the modal escape key or click outside and React Aria handles all accessibility issues. 

function Modal(props) {
  const { title, children } = props;
  const ref = React.useRef();
  const { overlayProps, underlayProps } = useOverlay(props, ref);
  usePreventScroll();
  const { modalProps } = useModal();
  const { dialogProps, titleProps } = useDialog(props, ref);
  
  return (
    <div className="overlay" {...underlayProps}>
      <div
        {...overlayProps}
        {...dialogProps}
        {...modalProps}
        ref={ref}
        className="modal"
      >
        <h2 {...titleProps}>{title}</h2>
        {children}
      </div>
    </div>
  );
}

3. Step. Setting focus to the modal component

The last thing is adding focus to the modal when it is opened. Just use FocusScope component form React Aria and wrap modal div:

return (
  <div className="overlay" {...underlayProps}>
    <FocusScope contain restoreFocus autoFocus>
      <div
        {...overlayProps}
        {...dialogProps}
        {...modalProps}
        ref={ref}
        className="modal"
      >
        <h2 {...titleProps}>{title}</h2>
        {children}
      </div>
    </FocusScope>
  </div>
);

That’s it, we have a modal component with good accessibility support. You should remember 2 more things:

•  display only one element above the page,
•  not display the modal instantly after loading the page.

Conclusion on dialog window accessibility

We hope you’ve enjoyed reading our short guide on pop-up creation, and tips and hints will be helpful in creating dialog windows on your e-commerce site.  Any time you have further questions on your e-commerce site please contact us to discuss the issue.