Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
1  
You should be able to fix this by setting the tabindex on your modal controls. It's not much different to how desktop software works; you just have to tell the implementation how to behave when a modal is displayed. It sounds like Bootstrap and other jQuery libraries just aren't very focused on this accessibility concern. –  Rahul Mar 2 '12 at 0:55
    
So in essence you're suggesting setting the tabindex of all the links and controls on the page to -1 before showing the modal and when the modal is closed, delete it so the default tab order takes effect? –  Werner Strydom Mar 2 '12 at 0:58
    
Yeah, I guess so - unless you already modified tabindices, in which case you'd have to store what they were set to before switching them. Not sure if it would work, but you could try it. –  Rahul Mar 2 '12 at 1:18
    
This question fits better at Stack Overflow because it's about making code compatible with accessibility requirements. –  dnbrv Mar 2 '12 at 1:20
    
I'm actually more interested in designing accessible modals and if its not possible, what alternatives are available. I only used the issue with the TAB key to illustrate an issue with existing modals. –  Werner Strydom Mar 2 '12 at 21:28
add comment

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
The observation related to hotkeys is a new one for me. –  Werner Strydom Mar 6 '12 at 20:59
add comment

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.

share|improve this answer
1  
Can you provide more detail here? You're only really hinting at what requirements are needed without explicitly stating them. With some extra detail this could be a really useful answer. –  JonW Dec 3 '12 at 9:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.