Create a KeyBoard Accessible Modal

Modal windows are a common Use Case in web applications. These are used for increasing user awareness — such as collecting specific information, displaying status, etc.

A Modal window displays over the existing page. So the existing page is visible but the user must interact with the modal before interacting with the page.

This article discusses how to write Modal windows that are

• KeyBoard accessible — so user can tab within elements within the keyboard
• As long as the Modal is open, the focus MUST stay on Modal. The user MUST NOT be able to tab out of this modal.
• The user can close this modal using ESC key.
• This should be using Vanilla JS and basic CSS, in other words, it should work for all web sites (and not sites using specific frameworks).

Project

Let us consider a very simple page that has a single button “Register” . Clicking this button opens a modal form where the user can enter some information. This is shown in the 2 screen shots below:

A simple page with only 1 button — Register

Clicking Register button opens the Modal form. The background page is visible but is greyed out.

To achieve this, we need HTML, JavaScript and CSS.

Let us begin by looking at the HTML and the CSS as these together define the Register Button and the Modal.

HTML that has the Register Button and the Modal

CSS for the Modal

Here is an explanation of the HTML. The good accessibility practices (for screen readers) are called out below:

• Line 2 contains language — this helps screen readers
• The view port allows pinch and zoom
• The HTML uses standard HTML elements button, h1tag, inputs. The button and inputs are focusable by default using the natural tab order — this helps key board navigation
• A modal — as we saw before has 2 distinct styling aspects — the first aspect is displaying the content and the second aspect is having an overlay over the main page so that the main page is not interactive till the user responds to the modal. The overlay is achieved by the CSS class on line 18 of HTML, the content is rendered starting on line 19
• We will look at the JS file on line 37 further below after reviewing the CSS

Let us now look at the CSS, this file is very simple with 3 classes, a class to grey out the page, a class to bring the modal to the front and a class to add spacing to the modal form

• The lines 1–10 achieve the greying of the page. This is through z-index of 1 on line 4 and the background color on line 9. This will occupy full screen hence line 5 through 8. Also it will be fixed (full screen) position and will be hidden until the user clicks the Register Button, hence attribute of display on line 2 is hidden. This will made visible by JavaScript that we will see below.
• The lines 12–18 display the modal form, apply the black background, etc
• The lines 20–23 apply form spacing

Now let us look at the JavaScript that shows the Modal when the user clicks the Register button and hides this when the ESC (or ESCAPE) key is pressed.

• This code is in a Self Invoking Function — which creates a namespace and is a good practice. In ES6 modules offer this functionality so modules can be used here — line 1 and 58.
• Lines 11 and 13 achieve a reference to the Modal — which is as yet hidden and the Register Button and apply a click handler to the register button. This click handler is the JS function openModal on line 16.
• The function openModal is where the magic happens
• The modal is made visible — so user can see this on the screen. If you recall the CSS, the modal is initially hidden
• We store reference to the element of the background page that was last selected before the modal was opened. We will focus to this element once the modal is closed.
• We find all focusable elements of the modal. As we are using standard HTML elements on the Modal — input and button, the natural tab order will work.
• The interesting part happens on lines 41–43 for the TAB event — here if the user tabs to the last element of the modal, she will be routed back to the first element of the modal. The key board focus will stay on the modal, it will not go to the background page.
• To close the modal, the user presses the ESC key. This is on lines 47–50.

Conclusion: To run the above, copy each of the 3 gists in the same folder and run the HTML file. This is a canonical example of not surrendering the focus to the background page while the modal is open and allowing keyboard access to the modal.

This article refers to the YouTube channel A11ycasts with Rob Dodson. While there are several excellent online resources on A11Y, this on particularly stands out.