Modals are a frequently used element on web pages. These components appear as overlays on the current page, preventing full view and interaction with the underlying content. They are often used for confirmation or cancellation screens, or to request additional details on a subject.
While common in design, modals can be a real challenge for keyboard or screen reader users if not properly implemented.
Opening the Modal
An essential aspect is how the modal opens. When a modal is triggered, the focus should shift to the first interactive element within it. Interactive elements include links, buttons, and form elements like input or `select.
Screen readers
To ensure compatibility with screen readers, it's crucial to "hide" all non-modal content. The easiest way to achieve this is by setting aria-hidden="true" on all elements except the modal. Care must be taken to ensure the modal itself is not within an element with aria-hidden="true", or it will also be hidden.
To provide better context for screen readers, and until full support for the new HTML dialog tag is available, we should specify the role of the modal using role="dialog" or role="alertdialog".
Lastly, to enhance accessibility, it's important to provide information about the modal's purpose. If the modal has a visible title, link the modal container (the one with the dialog role) to the title using aria-labelledby. If there is no explanatory text, use aria-label on the modal container to give more information about the element.
Focus trapping
Keyboard users can accidentally navigate out of an open modal, which can lead to confusing interactions with elements behind the modal. To prevent this, implement focus trapping.
Focus trapping is a technique that ensures the focus remains within the modal while it is open. This way, a keyboard user cannot leave the modal until it is closed or the necessary action to close it is performed.
This technique is crucial for accessibility, as it prevents interactions with elements behind the modal and creates a circular navigation among the elements within the modal.
There are numerous articles on how to implement focus trapping in React or Vanilla JavaScript, among other frameworks.
Escaping the Modal
Users often expect pressing the Escape key to close the modal. Therefore, it's important to implement this functionality. Additionally, when the modal closes, the focus should return to the element that triggered the modal, and aria-hidden="true" should be removed so screen readers can read the page content again.
General tips
To conclude, here are some general tips for improving the accessibility of your modals:
- On mobile or small devices, modals should occupy the entire screen to enhance readability. On larger screens, use an opaque or semi-opaque layer beneath the modal to improve visibility.
- Each modal should have a title explaining its functionality to make its purpose clear.
- The close button should be visible and large enough to be easily clicked, at least 44px by 44px.
- Use semantic HTML for all elements within the modal. The more information we provide to assistive technologies, the better.
- Prevent background scrolling when the modal is open to avoid confusion.
Top comments (0)