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 12:52PM

I believe neither Jaws nor other Windows screen readers detect, or at
least communicate, the end of a modal dialog (after all, in some ways,
there is no such thing as a modal dialog to a screen reader, not
unless they code it to detect them).
This has been a problem on sites I have worked on in the past, which
is unfortunate. One could use ARIA landmarks to mark the beginning and
end of the dialog box I'd imagine, might be one way to go about it. I
do believe, in this case, the modal dialog box ends at the "close"
button, which is also a natural marker, provided Javascript takes the
user back to the part of the page that triggerred the dialog,or to
some other logically appropriate part of the page (of course users do
not like to be jumping around the page randomly, so taking them back
to where they triggerred a dialogis probably the best way to go about
this).
Cheers
-B

On 11/1/12, Paul J. Adam < <EMAIL REMOVED> > wrote:
> 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>
>> >> >> >
> > > >