Accessible Modal Dialog

Modals are pieces of stand-alone content that pop up inside of the main web page document. If that content is not interactive (i.e. just formatted text), then the modal has a role of alertdialog. Modals with interactive content inside have a role of dialog. This instructions on this page cover the dialog role.

HTML5 Modal Dialog

This is the best solution to use, especially when building from scratch.
If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.
This solution described below is available as an NPM module. (Module installation instructions)

This example uses the HTML5 <dialog> tag. For browsers that don't support it, a modified version of Google's dialog polyfill has been used. If you don't want to use the polyfill, simply use role="dialog". Making modal dialogs accessible for the first time can be tricky. Full notes on how the accessibility features of this example can be found on my blog post, Creating Accessible HTML5 Modal Dialogs For Desktop and Mobile


In order to continue, please log into the application

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞


Installation Instructions

You can load this JavaScript library into your application in serveral ways:

Note: Unlike most of the other Enable Javascript modules, you cannot load this one as an old-school ES4 Javascript library. This is because it tests for browser features (in this case, the <dialog> tag) and if the browser doesn't support it, load the polyfill using the ES6 import() function.

Using NPM/Webpack to load ES6 Modules:

  1. Install the enable-a11y NPM project. Developers who are using webpack should know how to configure webpack to import the enable modules correctly.
  2. You can use the module like this:
    ☜ Scroll to read full source ☞
    // import the JS module import enableDialog from '~enable-a11y/js/modules/enable-dialog'; // import the CSS for the module import '~enable-a11y/css/enable-dialog'; // How to initialize the enableDialog library enableDialog.init();
  3. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/enable-dialog';
    (If you are using it in your CSS, you will have to add the .css suffix)

Using ES6 modules natively.

This is the method that this page you are reading now loads the scripts.

  1. Grab the source by either using NPM, grabbing a ZIP file or cloning the enable source code from github.
  2. If you want to load the module as a native ES6 module, copy js/modules/enable-dialog.js, and css/enable-dialog.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
  3. Load the CSS in the head of you document:
    ☜ Scroll to read full source ☞
    <html> <head> ... <link rel="stylesheet" href="path-to/css/enable-dialog.css" > ... </head> <body> ... </body> </html>
  4. Load your scripts using:
    ☜ Scroll to read full source ☞
    <script type="module"> import enableDialog from "path-to/enable-dialog.js" enableDialog.init(); </script>