This content originally appeared on Level Up Coding - Medium and was authored by Giacomo Mariani
In this post I want to share with the community a modal dialog I have implemented with HTML, CSS and JavaScript, that satisfies the tests set by the W3C WCAG working group:
- Check that role=dialog is an attribute of the container (such as a div) that is used as the custom dialog.
- Check that the container is inserted (or made visible) via JavaScript following a user interaction or some other event.
- When the dialog is activated, check that focus is set to an element in the container.
- When the dialog is active, check that focus is never set to an element that is not in the container.
- When the dialog is deactivated, check that focus is set to the control that originally activated the dialog.
On top of these five points, I also want the modal dialog to satisfy the following:
- The modal dialog closes when the user clicks Escape.
- The modal dialog closes when the user clicks outside its visible part.
The HTML code
In the HTML code above the most relevant lines are:
Line 12: We set the aria-haspopup attribute to “dialog” in the body tag. I also considered setting it to “alertdialog”, but I thought that this popup is not meant to alert the user, so the “alert” role seems less fit for this case. We set this attribute to tell screen readers that the body element has a popup.
Lines 15–16: This is the outer div of the modal, here:
- We give the role attribute “dialog” (could have been “alertdialog”).
- We set aria-modal to true, in order to indicate to screen readers that this is a modal element.
- We specify the aria-label as required by the dialog role.
- We set aria-live to “assertive”, so that when the dialog updates (appears), the screen readers will announce it immediately.
Lines 45–46: importing necessary scripts:
- The JavaScript code for the modal (see below).
- The inert polyfill, to set all what is behind the modal as inert, so that it is inaccessible not only to screen readers, but to keyboard navigation too.
The JavaScript code
I tried to write the code in a self-explanatory way, but some parts might require a bit of explanation:
Line 3: We save the element that has focus when the modal opens. This is necessary in order to put the focus back where it was, once the user closes the modal (line 25).
Line 9: We want to close the modal when the user clicks on the “gray” opaque part (the overlay) around the modal box.
Line 45: For this specific case, we could have looked only for buttons. To make the code more reusable, we look also for other elements that can receive focus and could be in a modal dialog. We set focus on the first element we find.
Line 50: This is the part where we need the inert polyfill.
The CSS style-sheet
I think the CSS does not require much explanation, but I feel like motivating the choice of choosing the CSS display property, over the CSS visibility property, or the hidden attribute.
Using visibility on the overlay, would have required (to be safe) setting visibility to “inherit” on the children, because descendants of the element will be visible if they have visibility set to visible. Plus, if position is not set to fixed or absolute, the element would still take up space even if not visible. So using the display property felt safer and saved one line of code.
The risk with the hidden attribute instead, is that changing the value of the CSS display property on an element with the hidden attribute overrides the behavior of the hidden attribute. So I felt it would be safer to just use the CSS display property.
There seemed to be a bug in iOS Safari + VoiceOver when using display: “none” as default, but the post where it is mentioned is over two years old, I could not find more information about it, and when testing it, I did not come across the mentioned bug.
You can see the full project on GitHub or in action here. Please comment if you find bugs or ways of improving it, or submit an issue.
If you found this post useful and want to thank me, you can buy me a coffee.
An Accessible Modal Dialog with HTML, CSS, and JavaScript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Giacomo Mariani
Giacomo Mariani | Sciencx (2021-08-24T15:04:47+00:00) An Accessible Modal Dialog with HTML, CSS, and JavaScript. Retrieved from https://www.scien.cx/2021/08/24/an-accessible-modal-dialog-with-html-css-and-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.