How can one improve accessibility of modal windows in a browser?

Question

How do modal windows implemented using, for instance, jQuery plugins affect the accessibility of the website? If it leads to poor accessibility, can it be mitigated? Is the only way to avoid using modals at all cost?

For example, people often use TAB to navigate from one control to another. When one shows a modal, like the one in Bootstrap, a user expects that pressing the TAB key will only navigate on controls in the modal. After all, this is how desktop applications on Windows and OS X often behave. Yet, pressing the TAB key will put the focus on other controls and links in the original page. This doesn't seem to be ideal in accessibility terms.

Enabling a screen reader on Bootstrap, then selecting TAB to switch between controls, makes the screen reader "read" text that in effect should really be disabled.

I used several jQuery plugins to implement modals (including Bootstrap from Twitter) and they all seem to suffer from the accessibility issues.

Answer 1

Besides the tabbing problem, another accessibility issue I've run into with using 'lightbox' modal window is, you cannot reuse Alt+Key inside the modal window that is already being used in the parent window. When you are designing hot-key heavy internal web applications, you can run out of alphabets for hot-keys real fast.

For better or worse, for internal web applications used by intermediate to power users, there is enormous productivity to be gained by simply providing hot keys, and providing the right tabbing stops and sequence. So in that respect, I can sympathize with the author.

The only solution I found to get around this issue is to write script that enables the use of additional modifier keys. So instead of being limited to just Alt+key, you can also use Alt+Shift+key, and even Ctrl+shift+key, and essentially mimic desktop application. But the script has to account for situations like, 1. Disable all hotkeys that are behind the modal window. 2. normalize hotkey behavior across Browsers and OS. Another alternative is to use showModalDialog method, but that has its own headache inducing problems.

As for the tabbing issue, as Rahul and you pointed out, a technical solution to this is easy. One just has to make sure that tabbing cycle stays within the modal window. Typically this means assigning a javascript to an onBlur() event to the last tab-able element in the modal, and have it jump to the first tab-able element in the modal.

Answer 2

There are some important functional requirements to make sure that modals are accessible, such as DOM insertion, hiding of background content for screen reader users, focus redirection, and so on. The AccDC Bootstrap project at http://whatsock.com/bootstrap may be helpful in showing how this is done.