WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: are these modal popups screen reader accessible ?

for

From: Bryan Garaventa
Date: Nov 1, 2012 11:47AM

It's not a problem if the dialog is inserted at the end of the DOM, if the
correct scripting loops keyboard focus when tabbing backward and forward,
and if the correct ARIA attributes are used to hide background content. This
is actually preferable to prevent CSS styling conflicts.

There is an example of this at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm
Which opens when the Lightbox button is activated, and is a modal dialog.

All of the ARIA attributes and event handlers are automatically applied, so
developers don't actually have to know how it works for it to be fully
accessible.

This is the benefit of making scalable accessible components.


----- Original Message -----
From: "Paul J. Adam" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, November 01, 2012 10:27 AM
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?


> 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/
>>
>> >> >> >
> > >