JavaScript Popups are being used often in applications and there is often questions about its compliance with accessibility. Recently I did a bit of research on this for some updated information to share below.

Here are some of the key things to consider when using JavaScript Popups:

• Ensure it can be navigated with keyboard only, and the user will be able to access all the fields/buttons/links/functionalities within the popup window.
• When there is a popup window, ensure the page behind/under the popup is blocked until the popup is closed. This is to ensure user will be navigating only on the popup window to avoid confusing especially if they are using keyboard to navigate. (Example provided below)
• Users could have JavaScript disabled on their browsers for various reasons. If so, they will not be able to open popup or any JavaScript functions. (I think for us, we are operating under the assumption that this is a special case and deal with it case by case if needed. As we need to use JavaScript for many of our functionalities but we do make efforts to ensure it’s more accessible.)

You may be able to hear NVDA describing the popup, but there are other things to consider as well for accessibility and usability as mentioned above.

Imagine this scenario:

I am blind, I browse to a page only using my keyboard to tab through each link/button, then I opened up a popup windows which is a form to fill out information. (I cannot tell that this is a popup form as I cannot see. I cannot see anything, text or color. I can only hear what screen reading is telling me)

Then, I continue to tab my keyboard just to “hear” what else is there. If the page behind the popup is still available, I continue to tab through, I likely wouldn’t know I already left the popup window.

As a sighted user, it’s easy to paint the picture in my head, because I have been seeing popup forms and used them. As a blind user, it’s very different for them.

Here are some sample sites you can try:

1. Inaccessible JavaScript Popups Example 1

To test:

Click on Open Form button on the bottom right hand corner

Start tabbing within that Login popup form, then you should notice you will be tabbing back to the address bar and so on, back on the page.

2. Inaccessible JavaScript Popups Example 2

I believe this also explain most of reasons why we started using more jQuery Modal popup as it forces the user to stay on the popup until they finish ‘actions’ on the popup or close it.  There are also ARIA tags we can use to ensure the modal popup is more accessible for screen reader users.