WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: are these modal popups screen reader accessible ?

for

From: Paul J. Adam
Date: Nov 1, 2012 12:47PM

That should work. VoiceOver dings when you hit the end of the modal content using arrow navigation, if tabbing it cycles through the tab ring in a circle.

Paul J. Adam
Accessibility Evangelist
Deque Systems
<EMAIL REMOVED>
www.PaulJAdam.com
@pauljadam on Twitter

On Nov 1, 2012, at 1:04 PM, Angela French < <EMAIL REMOVED> > wrote:

> Paul - this would seem fixable by using javascript to apply focus on the first element in the modal popup , perhaps right on the heading we will be using, would it not? How do you know when you have reached the end of the content in the popup? Does it quit reading? My concern is that it might run "onto" the continuing content in the underlying document/page.
>
> Angela
>
>> 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/
>>>
>>> >>> >>> list messages to <EMAIL REMOVED>
>>
>> >> >> messages to <EMAIL REMOVED>
> > >