E-mail List Archives
Thread: Accessible Modal Dialog Review
Number of posts in this thread: 9 (In chronological order)
From: YOUNGV5
Date: Wed, Jun 22 2011 11:09AM
Subject: Accessible Modal Dialog Review
No previous message | Next message →
Hi everyone,
I've been working on an accessible modal dialog jQuery widget. I think
I've gotten it to the point where I'd like to get some feedback from the
community. I'd really appreciate any comments/suggestions/questions you
may have. When all is said and done, I'd like to truly turn this into a
full blown jQuery widget and make it available to the public.
Link to modal dialog:
http://webhipster.com/testing/accessibility/modal-dialog-latest/
Thanks.
Best,
Vinnie
Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =
From: Donald Evans
Date: Wed, Jun 22 2011 11:15AM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
I would love to have an accessible modal. This one does a good job of
keeping the keyboard only user out of the underlying page, but the screen
reader user can still use the arrow keys and find his/her way to the entire
page.
I don't know of anyway to keep the SR user out?
Using Jaws 12 and FireFox 4
.
On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> Hi everyone,
>
> I've been working on an accessible modal dialog jQuery widget. I think
> I've gotten it to the point where I'd like to get some feedback from the
> community. I'd really appreciate any comments/suggestions/questions you
> may have. When all is said and done, I'd like to truly turn this into a
> full blown jQuery widget and make it available to the public.
>
> Link to modal dialog:
> http://webhipster.com/testing/accessibility/modal-dialog-latest/
>
> Thanks.
>
> Best,
> Vinnie
>
> Vincent Young
> User Experience, Web Accessibility Specialist
> Nationwide Corporate Marketing
> Nationwide®
> o | 614·677·5094
> c | 614·607·3400
> e | = EMAIL ADDRESS REMOVED =
>
From: YOUNGV5
Date: Wed, Jun 22 2011 11:39AM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
You can prevent up and down arrowing through content if you set the role
parameter to something like "application" or "dialog". By default I have
the role set to "document" because switching cursor mode on screen reader
users seems to cause issues and often there is non-focusable content that
needs to be read. This is the best solution I could come up with for this
current state of affairs.
Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =
From:
Donald Evans < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
06/22/2011 01:14 PM
Subject:
Re: [WebAIM] Accessible Modal Dialog Review
Sent by:
= EMAIL ADDRESS REMOVED =
I would love to have an accessible modal. This one does a good job of
keeping the keyboard only user out of the underlying page, but the screen
reader user can still use the arrow keys and find his/her way to the
entire
page.
I don't know of anyway to keep the SR user out?
Using Jaws 12 and FireFox 4
.
On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> Hi everyone,
>
> I've been working on an accessible modal dialog jQuery widget. I think
> I've gotten it to the point where I'd like to get some feedback from the
> community. I'd really appreciate any comments/suggestions/questions you
> may have. When all is said and done, I'd like to truly turn this into a
> full blown jQuery widget and make it available to the public.
>
> Link to modal dialog:
> http://webhipster.com/testing/accessibility/modal-dialog-latest/
>
> Thanks.
>
> Best,
> Vinnie
>
> Vincent Young
> User Experience, Web Accessibility Specialist
> Nationwide Corporate Marketing
> Nationwide®
> o | 614·677·5094
> c | 614·607·3400
> e | = EMAIL ADDRESS REMOVED =
>
From: James Nurthen
Date: Wed, Jun 22 2011 11:45AM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
You should be able to set aria-hidden="true" on the underlying page
content when the dialog is open to avoid this issue. Obviously
remembering to reset to false when the dialog closes!
Regards,
James
On Wed, Jun 22, 2011 at 10:13, Donald Evans < = EMAIL ADDRESS REMOVED = > wrote:
> I would love to have an accessible modal. This one does a good job of
> keeping the keyboard only user out of the underlying page, but the screen
> reader user can still use the arrow keys and find his/her way to the entire
> page.
>
> I don't know of anyway to keep the SR user out?
>
> Using Jaws 12 and FireFox 4
> .
>
> On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi everyone,
>>
>> I've been working on an accessible modal dialog jQuery widget. I think
>> I've gotten it to the point where I'd like to get some feedback from the
>> community. I'd really appreciate any comments/suggestions/questions you
>> may have. When all is said and done, I'd like to truly turn this into a
>> full blown jQuery widget and make it available to the public.
>>
>> Link to modal dialog:
>> http://webhipster.com/testing/accessibility/modal-dialog-latest/
>>
>> Thanks.
>>
>> Best,
>> Vinnie
>>
>> Vincent Young
>> User Experience, Web Accessibility Specialist
>> Nationwide Corporate Marketing
>> Nationwide®
>> o | 614·677·5094
>> c | 614·607·3400
>> e | = EMAIL ADDRESS REMOVED =
>>
From: November Samnee
Date: Wed, Jun 22 2011 11:51AM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
In my experience, a role of dialog is not enough to contain tabbing within
the lightbox. After you tab past the last element in the dialog, tab focus
is placed in the address bar of the browser (FF & IE8, JAWS and maybe NVDA).
I'm going to try "document" - is the tab focus then placed where you were on
the page once the lightbox is closed?
November Samnee
On Wed, Jun 22, 2011 at 12:36 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> You can prevent up and down arrowing through content if you set the role
> parameter to something like "application" or "dialog". By default I have
> the role set to "document" because switching cursor mode on screen reader
> users seems to cause issues and often there is non-focusable content that
> needs to be read. This is the best solution I could come up with for this
> current state of affairs.
>
> Vincent Young
> User Experience, Web Accessibility Specialist
> Nationwide Corporate Marketing
> Nationwide®
> o | 614·677·5094
> c | 614·607·3400
> e | = EMAIL ADDRESS REMOVED =
>
>
>
>
> From:
> Donald Evans < = EMAIL ADDRESS REMOVED = >
> To:
> WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Date:
> 06/22/2011 01:14 PM
> Subject:
> Re: [WebAIM] Accessible Modal Dialog Review
> Sent by:
> = EMAIL ADDRESS REMOVED =
>
>
>
> I would love to have an accessible modal. This one does a good job of
> keeping the keyboard only user out of the underlying page, but the screen
> reader user can still use the arrow keys and find his/her way to the
> entire
> page.
>
> I don't know of anyway to keep the SR user out?
>
> Using Jaws 12 and FireFox 4
> .
>
> On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hi everyone,
> >
> > I've been working on an accessible modal dialog jQuery widget. I think
> > I've gotten it to the point where I'd like to get some feedback from the
> > community. I'd really appreciate any comments/suggestions/questions you
> > may have. When all is said and done, I'd like to truly turn this into a
> > full blown jQuery widget and make it available to the public.
> >
> > Link to modal dialog:
> > http://webhipster.com/testing/accessibility/modal-dialog-latest/
> >
> > Thanks.
> >
> > Best,
> > Vinnie
> >
> > Vincent Young
> > User Experience, Web Accessibility Specialist
> > Nationwide Corporate Marketing
> > Nationwide®
> > o | 614·677·5094
> > c | 614·607·3400
> > e | = EMAIL ADDRESS REMOVED =
> >
From: YOUNGV5
Date: Wed, Jun 22 2011 12:15PM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
Good idea James. Will look into this.
Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =
From:
James Nurthen < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
06/22/2011 01:40 PM
Subject:
Re: [WebAIM] Accessible Modal Dialog Review
Sent by:
= EMAIL ADDRESS REMOVED =
You should be able to set aria-hidden="true" on the underlying page
content when the dialog is open to avoid this issue. Obviously
remembering to reset to false when the dialog closes!
Regards,
James
On Wed, Jun 22, 2011 at 10:13, Donald Evans < = EMAIL ADDRESS REMOVED = >
wrote:
> I would love to have an accessible modal. This one does a good job of
> keeping the keyboard only user out of the underlying page, but the
screen
> reader user can still use the arrow keys and find his/her way to the
entire
> page.
>
> I don't know of anyway to keep the SR user out?
>
> Using Jaws 12 and FireFox 4
> .
>
> On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi everyone,
>>
>> I've been working on an accessible modal dialog jQuery widget. I think
>> I've gotten it to the point where I'd like to get some feedback from
the
>> community. I'd really appreciate any comments/suggestions/questions
you
>> may have. When all is said and done, I'd like to truly turn this into
a
>> full blown jQuery widget and make it available to the public.
>>
>> Link to modal dialog:
>> http://webhipster.com/testing/accessibility/modal-dialog-latest/
>>
>> Thanks.
>>
>> Best,
>> Vinnie
>>
>> Vincent Young
>> User Experience, Web Accessibility Specialist
>> Nationwide Corporate Marketing
>> Nationwide®
>> o | 614·677·5094
>> c | 614·607·3400
>> e | = EMAIL ADDRESS REMOVED =
>>
From: YOUNGV5
Date: Wed, Jun 22 2011 12:21PM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
Tab focus should remain within the dialog no matter what role you set. If
this is not the case, I can double check. One caveat about the way focus
is implemented is that you can still pull up a list of tab focusable items
(e.g. INSERT + F7 for links) and focus items outside the dialog.
Currently, I am using Hans Hillen's suggestion of putting tab focusable
elements at the top and bottom of the document when the modal is opened.
This way if you focus one of these items, it throws focus back to the
modal dialog. Pretty good solution for the current state of affairs. Yes,
if you have an activating element, when the dialog closes, that element is
focused.
Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =
From:
November Samnee < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
06/22/2011 01:49 PM
Subject:
Re: [WebAIM] Accessible Modal Dialog Review
Sent by:
= EMAIL ADDRESS REMOVED =
In my experience, a role of dialog is not enough to contain tabbing within
the lightbox. After you tab past the last element in the dialog, tab focus
is placed in the address bar of the browser (FF & IE8, JAWS and maybe
NVDA).
I'm going to try "document" - is the tab focus then placed where you were
on
the page once the lightbox is closed?
November Samnee
On Wed, Jun 22, 2011 at 12:36 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> You can prevent up and down arrowing through content if you set the role
> parameter to something like "application" or "dialog". By default I
have
> the role set to "document" because switching cursor mode on screen
reader
> users seems to cause issues and often there is non-focusable content
that
> needs to be read. This is the best solution I could come up with for
this
> current state of affairs.
>
> Vincent Young
> User Experience, Web Accessibility Specialist
> Nationwide Corporate Marketing
> Nationwide®
> o | 614·677·5094
> c | 614·607·3400
> e | = EMAIL ADDRESS REMOVED =
>
>
>
>
> From:
> Donald Evans < = EMAIL ADDRESS REMOVED = >
> To:
> WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Date:
> 06/22/2011 01:14 PM
> Subject:
> Re: [WebAIM] Accessible Modal Dialog Review
> Sent by:
> = EMAIL ADDRESS REMOVED =
>
>
>
> I would love to have an accessible modal. This one does a good job of
> keeping the keyboard only user out of the underlying page, but the
screen
> reader user can still use the arrow keys and find his/her way to the
> entire
> page.
>
> I don't know of anyway to keep the SR user out?
>
> Using Jaws 12 and FireFox 4
> .
>
> On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hi everyone,
> >
> > I've been working on an accessible modal dialog jQuery widget. I
think
> > I've gotten it to the point where I'd like to get some feedback from
the
> > community. I'd really appreciate any comments/suggestions/questions
you
> > may have. When all is said and done, I'd like to truly turn this into
a
> > full blown jQuery widget and make it available to the public.
> >
> > Link to modal dialog:
> > http://webhipster.com/testing/accessibility/modal-dialog-latest/
> >
> > Thanks.
> >
> > Best,
> > Vinnie
> >
> > Vincent Young
> > User Experience, Web Accessibility Specialist
> > Nationwide Corporate Marketing
> > Nationwide®
> > o | 614·677·5094
> > c | 614·607·3400
> > e | = EMAIL ADDRESS REMOVED =
> >
From: Donald Evans
Date: Wed, Jun 22 2011 1:15PM
Subject: Re: Accessible Modal Dialog Review
← Previous message | Next message →
Is aria-hidden implemented in FF4 and Jaws12? I'm having some trouble
making it hide
I assume It should work with this?
document.getElementById("ARIA_content").setAttribute("aria-hidden","false");
and
document.getElementById("ARIA_content").setAttribute("aria-hidden","true");
I can see the value on the div changing, but the contents of the div is not
hiding?
On Wed, Jun 22, 2011 at 1:37 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> You should be able to set aria-hidden="true" on the underlying page
> content when the dialog is open to avoid this issue. Obviously
> remembering to reset to false when the dialog closes!
>
> Regards,
> James
>
> On Wed, Jun 22, 2011 at 10:13, Donald Evans < = EMAIL ADDRESS REMOVED = >
> wrote:
> > I would love to have an accessible modal. This one does a good job of
> > keeping the keyboard only user out of the underlying page, but the screen
> > reader user can still use the arrow keys and find his/her way to the
> entire
> > page.
> >
> > I don't know of anyway to keep the SR user out?
> >
> > Using Jaws 12 and FireFox 4
> > .
> >
> > On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Hi everyone,
> >>
> >> I've been working on an accessible modal dialog jQuery widget. I think
> >> I've gotten it to the point where I'd like to get some feedback from the
> >> community. I'd really appreciate any comments/suggestions/questions you
> >> may have. When all is said and done, I'd like to truly turn this into a
> >> full blown jQuery widget and make it available to the public.
> >>
> >> Link to modal dialog:
> >> http://webhipster.com/testing/accessibility/modal-dialog-latest/
> >>
> >> Thanks.
> >>
> >> Best,
> >> Vinnie
> >>
> >> Vincent Young
> >> User Experience, Web Accessibility Specialist
> >> Nationwide Corporate Marketing
> >> Nationwide®
> >> o | 614·677·5094
> >> c | 614·607·3400
> >> e | = EMAIL ADDRESS REMOVED =
> >>
From: YOUNGV5
Date: Wed, Jun 22 2011 1:33PM
Subject: Re: Accessible Modal Dialog Review
← Previous message | No next message
I have yet to see this implemented. Possibly FF5 and/or Safari in Lion
might work. I have implemented the aria-hidden attribute as you
suggested. I'm wondering if it makes sense to set role="presentation" on
the other elements when a dialog is opened. I have not seen this actually
do anything in the past, but I'm wondering if it makes sense today to
prepare for the future?
Link again:
http://webhipster.com/testing/accessibility/modal-dialog-latest/
Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =
From:
Donald Evans < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
06/22/2011 03:15 PM
Subject:
Re: [WebAIM] Accessible Modal Dialog Review
Sent by:
= EMAIL ADDRESS REMOVED =
Is aria-hidden implemented in FF4 and Jaws12? I'm having some trouble
making it hide
I assume It should work with this?
document.getElementById("ARIA_content").setAttribute("aria-hidden","false");
and
document.getElementById("ARIA_content").setAttribute("aria-hidden","true");
I can see the value on the div changing, but the contents of the div is
not
hiding?
On Wed, Jun 22, 2011 at 1:37 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> You should be able to set aria-hidden="true" on the underlying page
> content when the dialog is open to avoid this issue. Obviously
> remembering to reset to false when the dialog closes!
>
> Regards,
> James
>
> On Wed, Jun 22, 2011 at 10:13, Donald Evans < = EMAIL ADDRESS REMOVED = >
> wrote:
> > I would love to have an accessible modal. This one does a good job of
> > keeping the keyboard only user out of the underlying page, but the
screen
> > reader user can still use the arrow keys and find his/her way to the
> entire
> > page.
> >
> > I don't know of anyway to keep the SR user out?
> >
> > Using Jaws 12 and FireFox 4
> > .
> >
> > On Wed, Jun 22, 2011 at 1:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Hi everyone,
> >>
> >> I've been working on an accessible modal dialog jQuery widget. I
think
> >> I've gotten it to the point where I'd like to get some feedback from
the
> >> community. I'd really appreciate any comments/suggestions/questions
you
> >> may have. When all is said and done, I'd like to truly turn this
into a
> >> full blown jQuery widget and make it available to the public.
> >>
> >> Link to modal dialog:
> >> http://webhipster.com/testing/accessibility/modal-dialog-latest/
> >>
> >> Thanks.
> >>
> >> Best,
> >> Vinnie
> >>
> >> Vincent Young
> >> User Experience, Web Accessibility Specialist
> >> Nationwide Corporate Marketing
> >> Nationwide®
> >> o | 614·677·5094
> >> c | 614·607·3400
> >> e | = EMAIL ADDRESS REMOVED =
> >>