WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: are these modal popups screen reader accessible ?

for

From: Birkir R. Gunnarsson
Date: Nov 1, 2012 11:40AM

If you are using Jaws (v14), and click on the "launch demo modal"
link, the focus shifts automatically to "modal heading".

Activating the button inside this modal dialog does not do anything
(with Jaws it does not appear that anything happens), and, of course,
the tooltips hover links do nothing. If one activates the "close"
button, one is taken back to the
"javascript in bootstrap" level 2 heading, not exactly the place one
started from, but it seems to be at least logical.
hth
-B

On 11/1/12, Paul J. Adam < <EMAIL REMOVED> > wrote:
> On first test I thought it was a pretty good modal but then I realized that
> it only actually traps the users focus, in VoiceOver, if they first press
> TAB after activating the modal. If they only use VO+ARROW KEYS navigation
> their focus will still be underneath the modal.
>
> But if they do press TAB then their focus is trapped in the modal until they
> close it and then focus returns back to the button that activated it.
>
> This is still the best behavior I've seen in most modals which are usually
> never accessible because they don't send focus to and trap inside the modal
> on activation.
>
> Usually the code is inserted at the bottom of the DOM and the user is not
> aware the modal appeared because their focus is still underneath it.
>
> Paul J. Adam
> Accessibility Evangelist
> Deque Systems
> <EMAIL REMOVED>
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Nov 1, 2012, at 12:15 PM, Angela French < <EMAIL REMOVED> > wrote:
>
>> Hello,
>> We are starting to use modal popups in application development and I need
>> to know how screen-reader accessible they are. I would interested in any
>> general comments you may have about them. Also, I would be very
>> appreciative if the demo linked to below could be tested with different
>> screen readers. This Bootstrap example is the code that we are using on
>> an app (which I cannot put out for public testing). I am able to fully
>> access information in these popups with my keyboard.
>>
>>
>> http://twitter.github.com/bootstrap/javascript.html#modals
>>
>> The link to activate the demo is labeled "Launch demo modal". It appears
>> under the <h3> heading "Live demo".
>>
>> Thank you for any testing (and opinions) you can provide.
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> <EMAIL REMOVED>
>> http://www.checkoutacollege.com/
>>
>> >> >> >
> > > >