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:56PM

No it's trapped inside the modal correctly, you just keep tabbing in a circle in the modal.

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

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

> "....it cycles through the tab ring in a circle."
> What do you mean by that? Does tabbing take you out of the modal before closing it? That would be bad I think.
>
>> Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
>>
>> 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>
>>>>
>>>> >>>> >>>> list messages to <EMAIL REMOVED>
>>> >>> >>> list messages to <EMAIL REMOVED>
>>
>> >> >> messages to <EMAIL REMOVED>
> > >