E-mail List Archives
Thread: are these modal popups screen reader accessible ?
Number of posts in this thread: 18 (In chronological order)
From: Angela French
Date: Thu, Nov 01 2012 11:15AM
Subject: are these modal popups screen reader accessible ?
No previous message | Next message →
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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
From: Scott González
Date: Thu, Nov 01 2012 11:22AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Bootstrap relies on the user to apply all ARIA info, so it's expected that
most uses of Bootstrap will have accessibility issues.
On Thu, Nov 1, 2012 at 1:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > > >
From: Paul J. Adam
Date: Thu, Nov 01 2012 11:27AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter
On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > >
From: Birkir R. Gunnarsson
Date: Thu, Nov 01 2012 11:40AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
If you are using Jaws (v14), and click on the "launch demo modal"
link, the focus shifts automatically to "modal heading".
Activating the button inside this modal dialog does not do anything
(with Jaws it does not appear that anything happens), and, of course,
the tooltips hover links do nothing. If one activates the "close"
button, one is taken back to the
"javascript in bootstrap" level 2 heading, not exactly the place one
started from, but it seems to be at least logical.
hth
-B
On 11/1/12, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED =
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> >
> > > >
From: Bryan Garaventa
Date: Thu, Nov 01 2012 11:47AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> >
> > >
From: Angela French
Date: Thu, Nov 01 2012 12:04PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS REMOVED =
>www.PaulJAdam.com
>@pauljadam on Twitter
>
>On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
From: Paul J. Adam
Date: Thu, Nov 01 2012 12:47PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter
On Nov 1, 2012, at 1:04 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> www.PaulJAdam.com
>> @pauljadam on Twitter
>>
>> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>
>> >> >> messages to = EMAIL ADDRESS REMOVED =
> > >
From: Angela French
Date: Thu, Nov 01 2012 12:50PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
"....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 ADDRESS REMOVED =
>www.PaulJAdam.com
>@pauljadam on Twitter
>
>On Nov 1, 2012, at 1:04 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>> www.PaulJAdam.com
>>> @pauljadam on Twitter
>>>
>>> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>> http://www.checkoutacollege.com/
>>>>
>>>> >>>> >>>> list messages to = EMAIL ADDRESS REMOVED =
>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
From: Birkir R. Gunnarsson
Date: Thu, Nov 01 2012 12:52PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Nov 1, 2012, at 1:04 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>> www.PaulJAdam.com
>>> @pauljadam on Twitter
>>>
>>> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>> http://www.checkoutacollege.com/
>>>>
>>>> >>>> >>>> list messages to = EMAIL ADDRESS REMOVED =
>>>
>>> >>> >>> messages to = EMAIL ADDRESS REMOVED =
>> >> >> >
> > > >
From: Paul J. Adam
Date: Thu, Nov 01 2012 12:56PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
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 ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter
On Nov 1, 2012, at 1:50 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> www.PaulJAdam.com
>> @pauljadam on Twitter
>>
>> On Nov 1, 2012, at 1:04 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>> www.PaulJAdam.com
>>>> @pauljadam on Twitter
>>>>
>>>> On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>>> http://www.checkoutacollege.com/
>>>>>
>>>>> >>>>> >>>>> list messages to = EMAIL ADDRESS REMOVED =
>>>>
>>>> >>>> >>>> list messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>
>> >> >> messages to = EMAIL ADDRESS REMOVED =
> > >
From: Morin, Gary (NIH/OD) [E]
Date: Thu, Nov 01 2012 1:00PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Unless it's guaranteed to take over cursor focus, those of us with speech recognition software won't be able to utilize or close the pop-up and will be stuck. I know this form experience, where a pop-up occurs and I'm stuck behind it in the screen in which I was working, and cannot maneuver the cursor to deal with it or to dismiss it.
Gary M.
WHAT IF THE FIRST QUESTION WE ASKED WAS, "WHAT IS SO UNIQUE ABOUT THIS SITUATION THAT IT JUSTIFIES EXCLUSION? INSTEAD OF, "HOW MUCH DOES IT COST TO MAKE IT ACCESSIBLE?"
-----Original Message-----
From: Angela French [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, November 01, 2012 2:04 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
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 ADDRESS REMOVED =
>www.PaulJAdam.com
>@pauljadam on Twitter
>
>On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
From: Angela French
Date: Thu, Nov 01 2012 1:13PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Thank you all for responding. I have some great things for our developer to consider and I've talked the boss into securing a test page we can put out for testing "our" modals and not the one on bootstrap. I hope when I get it up that you will be so gracious as to test again.
Angela French
>-----Original Message-----
>From: Morin, Gary (NIH/OD) [E] [mailto: = EMAIL ADDRESS REMOVED = ]
>Sent: Thursday, November 01, 2012 12:01 PM
>To: WebAIM Discussion List
>Cc: Angela French
>Subject: RE: [WebAIM] are these modal popups screen reader accessible ?
>
>Unless it's guaranteed to take over cursor focus, those of us with speech
>recognition software won't be able to utilize or close the pop-up and will be
>stuck. I know this form experience, where a pop-up occurs and I'm stuck
>behind it in the screen in which I was working, and cannot maneuver the
>cursor to deal with it or to dismiss it.
>
>Gary M.
>
>WHAT IF THE FIRST QUESTION WE ASKED WAS, "WHAT IS SO UNIQUE ABOUT
>THIS SITUATION THAT IT JUSTIFIES EXCLUSION? INSTEAD OF, "HOW MUCH
>DOES IT COST TO MAKE IT ACCESSIBLE?"
>
>
>-----Original Message-----
>From: Angela French [mailto: = EMAIL ADDRESS REMOVED = ]
>Sent: Thursday, November 01, 2012 2:04 PM
>To: 'WebAIM Discussion List'
>Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
>
>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 ADDRESS REMOVED =
>>www.PaulJAdam.com
>>@pauljadam on Twitter
>>
>>On Nov 1, 2012, at 12:15 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
From: David Farough
Date: Thu, Nov 01 2012 1:24PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Unless I am missing something, the dialogue is accessible if all you
want to do is tab through available options, but I was unable to get
Jaws to speak intervening text in the dialogue. The SayAll
functionality did not work, and arrow keys did nothing. Jaws turns on
Application mode in this dialogue so that all keystrokes are passed to
the application. If you are trying to communicate text to your user you
would need to code functionality for the arrow keys.
David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779
From: Bryan Garaventa
Date: Thu, Nov 01 2012 2:37PM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
I agree, it's much more reliable to use aria-hidden="true" on the first
level childNodes of the body tag to hide the background content for screen
reader users, then append the modal dialog to the body tag so that it's the
only content exposed to a screen reader, then use scripting to control the
forward and backwards tab order so that it loops.
This makes a standard HTML dialog modal for both screen reader and keyboard
only users without disrupting default keyboard functionality via role=dialog
or role=application, and it works in IE, FF, Chrome, and iOS Safari with
equal accessibility.
This is what I was trying to show an example of earlier.
From: Léonie Watson
Date: Fri, Nov 02 2012 2:37AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Angela French wrote:
"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."
The most screen reader accessible modal dialogue I've come across is the
jQueryUI widget enhanced by Hans Hillen.
http://hanshillen.github.com/jqtest/#goto_dialog
Léonie.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 01 November 2012 17:15
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] are these modal popups screen reader accessible ?
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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
messages to = EMAIL ADDRESS REMOVED =
From: Bryan Garaventa
Date: Fri, Nov 02 2012 10:21AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
I've also seen the same dialog, and it is a good one. Is the intent of this
dialog to be scalable though? For instance, can you add any content with the
same level of accessibility?
I ask because role=dialog is used on the container Div, which means that, if
there is any textual information in the dialog that is not an active
element, it will be inaccessible for screen reader users. This is important,
because it's impossible to gage what any developer will put inside a
scalable component.
So when you say that this is "The most screen reader accessible modal
dialogue I've come across", does this also include the modal I referenced
earlier at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm ?
This is important to me, because I designed this modal to be fully scalable
using any type of content, meaning that it can be styled to look like
anything, resized, moved, made draggable, and so on, and include any type of
content, while also maintaining the same level of accessibility
automatically.
So, can you please tell me how this construct is not accessible for screen
reader users?
If there is anything I've missed, I would greatly appreciate knowing this.
Thanks,
Bryan
----- Original Message -----
From: "Léonie Watson" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 02, 2012 1:37 AM
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
Angela French wrote:
"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."
The most screen reader accessible modal dialogue I've come across is the
jQueryUI widget enhanced by Hans Hillen.
http://hanshillen.github.com/jqtest/#goto_dialog
Léonie.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 01 November 2012 17:15
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] are these modal popups screen reader accessible ?
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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
messages to = EMAIL ADDRESS REMOVED =
From: Léonie Watson
Date: Sat, Nov 03 2012 11:16AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | Next message →
Bryan Garaventa wrote:
"I've also seen the same dialog, and it is a good one. Is the intent of this
dialog to be scalable though? For instance, can you add any content with the
same level of accessibility?"
I haven't implemented the jQueryUI widget myself. I should imagine it would
be possible to include additional content, but can't be sure without trying.
It does have the advantage of being derived from jQueryUI, which puts it in
easier reach for developers already using that library.
"This is important to me, because I designed this modal to be fully scalable
using any type of content, meaning that it can be styled to look like
anything, resized, moved, made draggable, and so on, and include any type of
content, while also maintaining the same level of accessibility
automatically. So, can you please tell me how this construct is not
accessible for screen reader users?"
I'm sorry, you misunderstood what I meant. The jQueryUI example was the most
accessible I'd come across at the time, before I was aware of your construct
(which seems equally accessible with a screen reader).
Léonie.
-----Original Message-----
From: Bryan Garaventa [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: 02 November 2012 16:21
To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
I've also seen the same dialog, and it is a good one. Is the intent of this
dialog to be scalable though? For instance, can you add any content with the
same level of accessibility?
I ask because role=dialog is used on the container Div, which means that, if
there is any textual information in the dialog that is not an active
element, it will be inaccessible for screen reader users. This is important,
because it's impossible to gage what any developer will put inside a
scalable component.
So when you say that this is "The most screen reader accessible modal
dialogue I've come across", does this also include the modal I referenced
earlier at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm ?
This is important to me, because I designed this modal to be fully scalable
using any type of content, meaning that it can be styled to look like
anything, resized, moved, made draggable, and so on, and include any type of
content, while also maintaining the same level of accessibility
automatically.
So, can you please tell me how this construct is not accessible for screen
reader users?
If there is anything I've missed, I would greatly appreciate knowing this.
Thanks,
Bryan
----- Original Message -----
From: "Léonie Watson" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 02, 2012 1:37 AM
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
Angela French wrote:
"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."
The most screen reader accessible modal dialogue I've come across is the
jQueryUI widget enhanced by Hans Hillen.
http://hanshillen.github.com/jqtest/#goto_dialog
Léonie.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 01 November 2012 17:15
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] are these modal popups screen reader accessible ?
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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
messages to = EMAIL ADDRESS REMOVED =
From: Bryan Garaventa
Date: Sun, Nov 04 2012 4:33AM
Subject: Re: are these modal popups screen reader accessible ?
← Previous message | No next message
Thanks, I understand what you mean about jQuery UI.
I do have concerns with relying on jQuery to make redistributable
accessibility components though, which has to do with version drift.
What I mean by version drift, is when components or features are built using
a particular version of a third party API, then when that API is updated,
the component or feature may not work in the same manner as it did
previously.
I'm not speaking hypothetically, this happened to me several times in the
past. I originally started out building accessible components back at the
beginning of 2010, and was using the current version of jQuery at that time,
which I think was 1.4.4. Then, when 1.5 was released, I popped it in, and
found out that some of the processes that my component relied on were no
longer included in the updated version of jQuery, which broke my
accessibility.
After this happened to me a couple more times, I started to wonder, if I
build a scalable accessible component now, how can I be certain that it will
continue to be accessible three, five, ten, or fifteen years down the road
as new versions of jQuery keep coming out with process changes. My answer
was, I couldn't, and this would require constant monitoring and maintenance
to ensure that future API versions were compatible with related component
versions.
The only solution I could think of that would work across all web
technologies equally in a scalable manner, was to build a closed system that
had no third party process dependencies.
This way, there would never be a risk of version drift, and accessible
components tied into the system would be guaranteed to work accessibly now,
as well as twenty years from now, regardless whether it was included within
jQuery, YUI, GWT, Dojo, Ext JS, or by itself. It would simply keep working
accessibly, no matter how many processes were to change around it via third
party updates.
So this is why I built AccDC, and this is what it does.
Thank you for checking it out. I really do appreciate it.
All the best,
Bryan
----- Original Message -----
From: "Léonie Watson" < = EMAIL ADDRESS REMOVED = >
To: "'Bryan Garaventa'" < = EMAIL ADDRESS REMOVED = >; "'WebAIM Discussion
List'" < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, November 03, 2012 9:16 AM
Subject: RE: [WebAIM] are these modal popups screen reader accessible ?
Bryan Garaventa wrote:
"I've also seen the same dialog, and it is a good one. Is the intent of this
dialog to be scalable though? For instance, can you add any content with the
same level of accessibility?"
I haven't implemented the jQueryUI widget myself. I should imagine it would
be possible to include additional content, but can't be sure without trying.
It does have the advantage of being derived from jQueryUI, which puts it in
easier reach for developers already using that library.
"This is important to me, because I designed this modal to be fully scalable
using any type of content, meaning that it can be styled to look like
anything, resized, moved, made draggable, and so on, and include any type of
content, while also maintaining the same level of accessibility
automatically. So, can you please tell me how this construct is not
accessible for screen reader users?"
I'm sorry, you misunderstood what I meant. The jQueryUI example was the most
accessible I'd come across at the time, before I was aware of your construct
(which seems equally accessible with a screen reader).
Léonie.
-----Original Message-----
From: Bryan Garaventa [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: 02 November 2012 16:21
To: = EMAIL ADDRESS REMOVED = ; WebAIM Discussion List
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
I've also seen the same dialog, and it is a good one. Is the intent of this
dialog to be scalable though? For instance, can you add any content with the
same level of accessibility?
I ask because role=dialog is used on the container Div, which means that, if
there is any textual information in the dialog that is not an active
element, it will be inaccessible for screen reader users. This is important,
because it's impossible to gage what any developer will put inside a
scalable component.
So when you say that this is "The most screen reader accessible modal
dialogue I've come across", does this also include the modal I referenced
earlier at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm ?
This is important to me, because I designed this modal to be fully scalable
using any type of content, meaning that it can be styled to look like
anything, resized, moved, made draggable, and so on, and include any type of
content, while also maintaining the same level of accessibility
automatically.
So, can you please tell me how this construct is not accessible for screen
reader users?
If there is anything I've missed, I would greatly appreciate knowing this.
Thanks,
Bryan
----- Original Message -----
From: "Léonie Watson" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 02, 2012 1:37 AM
Subject: Re: [WebAIM] are these modal popups screen reader accessible ?
Angela French wrote:
"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."
The most screen reader accessible modal dialogue I've come across is the
jQueryUI widget enhanced by Hans Hillen.
http://hanshillen.github.com/jqtest/#goto_dialog
Léonie.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 01 November 2012 17:15
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] are these modal popups screen reader accessible ?
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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
messages to = EMAIL ADDRESS REMOVED =