WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: are these modal popups screen reader accessible ?

for

From: Angela French
Date: Nov 1, 2012 12:50PM

"....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>