Are overlays / modal alerts that display on site load accessible?

Question

Some websites welcome you with a Cookie Disclaimer or to Join their Social Page. You'll find a big modal window, mostly in center overlay rest of the site. (as an example: http://www.lynda.com/)

Whether using these models locks our keyboards or tabs? How do assistive technologies such as screen readers respond to this?

Answer 1

I'll answer this question in two parts.

Are modal windows Accessible

The answer to what I can find seems to be Generally no. I recommend looking at this study which was done to check how screen readers react to modal windows. To quote the study

Being a screen-reader user I tested several modal dialogs, including the jQuery modal dialog, with several screen-reader / browser combinations. In short, the user experience was unpredictable and ranged from the existence of the dialog not being reasonably perceivable to the user, to not all of the content in the dialog being perceivable to the user. It is important to note that best practices have been developed explaining how to create an accessible modal dialog, however it would appear that even when following these practices modal dialogs cannot be made accessible for screen-reader users.

The results of the testing are given below

Results of Testing

Firefox 3.6 and JAWS 11

When activating the modal dialog nothing appeared to happen. Once I refreshed the JAWS virtual buffer and navigated to the bottom of the page I was able to find the dialog. The dialog was "modal" to the extent that I could not activate links on the underlying page, however, there was no indication that the links were disabled, they just simply didn't work.

Firefox 3.6 and NVDA 2009.1

When activating the modal dialog NVDA announced the title of the dialog. I was unable to navigate the content of the dialog with the standard NVDA reading keys. When I pressed tab NVDA announced the Close button. I was still unable to access any of the other content in the dialog. The dialog was "modal", I was unable to interact with the underlying page, including not being able to read any of the content from the underlying page.

Safari 4.0.4 and VoiceOver (OS X 10.6.2)

When activating the modal dialog nothing appeared to happen. When I navigated to the bottom of the page I found the dialog. The dialog was "modal" to the extent that I could not activate links on the underlying page, however, there was no indication that the links were disabled, they just simply didn't work.

The problems identified in testing modal dialogs with screen-readers can be broken down into two general groups. 1. Problem with perceiving the existence of a dialog, and 2. problem with accessing the content within the dialog, separate from the content of the underlying page.The results of the testing are detailed below

Can Modal windows be made accessible

Yes but there are specific W3C guidelines which must be followed to make it accessible.To summarize the reference

• The first focusable item in the modal dialog should receive the keyboard focus.
• The window behind the modal dialog should not be allowed to be clicked on
• The modal dialog must trap the keyboard focus inside the modal dialog so the user can’t accidentally interact with the window behind the modal dialog.
• When the user is on the last focusable item and presses Tab, the user should be taken to the first focusable item in the modal dialog.
• When the user is on the first focusable item and presses Shift-Tab, the user should be taken to the last focusable item in the modal dialog.
• The position of the keyboard focus before the modal window opens must be saved, and the focus must be restored to this location after the modal dialog closes.

I recommend looking at these links for additional information on how to make a modal window or overlay accessible

The Incredible Accessible Modal Window, Version 1

Incredible Accessible Modal Window, Version 2

Is there a way to do one accessible modal? (stackoverflow)