Examples
Click on this button to see an accessible login modal!
Click on this button to see an accessible text modal!
How is it accessible?
- An ARIA role of
dialogis added to make it separate content from the rest of the web page for screen readers. - Toggle
aria-hiddenvalues between the modal and the content when it's active so that only one is accessible at one time. - It assigns focus to the first piece of focusable content so that users can interact with the content in the modal.
- It ensures that focus doesn't leave the modal whilst it's active, by cycling between focusable elements in the modal rather than letting it run into the content of the web page below.
- Allows the modal to be closed using the
escapekey. - It remembers which button initiated the modal and returns focus to it when it's closed.
Why is it important?
To provide proper functionality to allow keyboard-only users to navigate and interact with content that is placed on the page, either dynamically or through user action. Without this, these users are both unable to interact with the new content, whilst also not being able to interact with the content that they were interacting with before.