Modal
This page contains the inaccessible version of the component including the description of issues, additional considerations, and also the more accessible version of the component for comparison.
(future video slot)
Inaccessible Version
Issues
Expand each issue to see the user impact.
The modal window has no background overlay.
Modal windows should usually have a dark overlay in the background so users are focused on the information in the modal window while not being able to interact with the outside content.
The close button is too small.
It is very difficult for mouse users (especially for those with tremors) to activate the close button. The interactive area should be much bigger.
The close button is missing an accessible name.
Visually impaired users of assistive technologies do not know what the button is for, as screen readers would announce only the "X button". While this can be clear to some users, it is not clear to all.
Users can scroll while the modal window is opened.
The page should prevent users from scrolling when the modal window is opened as they should not be able to interact with the rest of the page.
Interactive elements inside the modal window have no focus styles.
Sighted keyboard users cannot see what element inside the modal window is currently focused.
Users can interact with the rest of the page while the modal window is opened.
Users should focus only on the modal window before they close it. Otherwise, keyboard users might not realize they are already away from the modal window.
After the modal window is opened, the focus is not set inside.
Without setting focus inside the modal window, keyboard users might never reach it as it can be hidden deep in the DOM. It is necessary to move focus on certain user interactions, such as opening the modal window.
After the modal window is closed, the focus is not set back to the button that opened it.
The modal window is a temporary stop for users. Keyboard users should be able to continue their journey from the point where they got into the modal window.
The modal window is reachable even when it is closed.
The inactive modal window must be hidden (or not rendered at all) from both assistive technology and sighted users. Focusing on the invisible place is an anti-pattern.
The usage of the role attribute is wrong.
There is no modal role. Instead, the dialog role should be used to help assistive technologies with the identification of the dialog.
The modal window cannot be closed with the Escape key.
Keyboard users must be able to close the opened modal window with the Escape key.
The usage of the aria-describedby attribute is wrong.
While aria-describedby might optionally be used on the element with the role="dialog" to provide more information about the modal content, in this case, it is targetting the button, which is invalid. Instead, there should be the aria-labelledby attribute pointing to the modal heading so screen reader users have the title announced when they open and get focused on the modal window.
A part of the opened modal window's content is invisible on smaller resolutions.
On mobile resolutions, the opened modal window width is larger than the viewport, so a part of the content is invisible.
The marquee element is distracting and deprecated.
The moving content inside the marquee element is distracting, can be difficult to read and interact with, and the element itself is deprecated.
The link inside the modal window content does not have clear text.
Links with text like "click here", "read more", and so on do not provide enough information for users of assistive technologies who tab through the interactive content. Each link should make sense if presented alone without the surrounding context.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider the usage of the aria-modal="true" attribute.
Some screen readers, when navigating by arrows, allow navigating outside the dialog even with the active focus trap. Using aria-modal="true" will increase the chances that users will not leave the dialog by browsing.
Consider focusing the element with role="dialog".
Sometimes, focusing the first focusable element straight away might not be wanted, and the focus can go directly to the element with role="dialog", if it has an accessible name via aria-label or aria-labelledby.
Consider options for closing the modal window.
There are multiple types of modal windows. For instance, closing the modal with the Escape key, clicking the close button, or clicking the overlay is not wanted when you need users to confirm the message, agree to terms, or similar interactions when they can for example choose from proceeding with or canceling an action.
Consider specifying the type of button.
A button without the type attribute defaults to the type="submit". While this is important for forms, it is the best practice to always specify the type as it clearly defines what the button does no matter where it is.