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 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
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
Installation Instructions
You can load this JavaScript library into your application in serveral ways:
- as an ES6 module using Webpack.
- as a CommonJS module using
require()
and Webpack. - as a native ES6 module within the browser.
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:
-
Install the
enable-a11y
NPM project. -
Edit your webpack.config.json file to resolve the
~
modifier by adding the following:module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') ,'../enable-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module') }, ... }, ... }
-
You can use the module like this:
// 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();
-
Alternatively, if you are using LESS you can include the styles in your project's CSS using:
@import '~enable-a11y/css/enable-dialog';
.css
suffix)
Using NPM/Webpack to Load Modules Using CommonJS Syntax
-
Install the
enable-a11y
NPM project. -
You can import the module using require like this:
var enableDialog = require('enable-a11y/enable-dialog').default; ... enableDialog.init();
- You will have to include the CSS as well in your project's CSS using:
@import '~enable-a11y/css/enable-dialog';
Using ES6 modules natively.
This is the method that this page you are reading now loads the scripts.
- Grab the source by either using NPM, grabbing a ZIP file or cloning the enable source code from github.
-
If you want to load the module as a native ES6 module, copy
js/modules/enable-dialog.js
, andcss/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). -
Load the CSS in the head of you document:
<html> <head> ... <link rel="stylesheet" href="path-to/css/enable-dialog.css" > ... </head> <body> ... </body> </html>
-
Load your scripts using the follwing code (NOTE: you must use
<script type="module">
):<script type="module"> import enableDialog from "path-to/enable-dialog.js" enableDialog.init(); </script>