E-mail List Archives
Thread: Does this Javascript bring focus to expanded content?
Number of posts in this thread: 15 (In chronological order)
From: Angela French
Date: Wed, Feb 08 2012 10:42AM
Subject: Does this Javascript bring focus to expanded content?
No previous message | Next message →
I wrote some javascript some time ago in an effort to bring focus to content that is revealed when a div's display property is changed from "none" to "block". Now that I'm working on an accessible solution to collapsing content, I'm wondering if my old test script would work or not. I'd appreciate any feedback. Here is the link: http://sbctc.edu/testexpandingcontent.html .
Thanks,
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/
From: Jared Smith
Date: Wed, Feb 08 2012 11:00AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
In order for the <div>s to properly receive focus with JavaScript,
they should be given tabindex="-1".
For something like this, setting focus may not be the best. This is
even more problematic in this case because if the user activates the
links when the content is already revealed, it will hide the content
and then try to set focus to it (which is impossible because it has
just been styled with display:none). Additionally, the link text
("Reveal X") isn't accurate if the text is already revealed.
Because you are simply toggling the visibility or expansion of the
items, I'd think that giving the links role="button" and then simply
toggling the aria-expanded attribute on the links from true/false
would be a much better experience. The user would be informed of the
status of the content (whether it is expanded or not) and can toggle
it on or off from the link. Because the content is immediately after
the control, the user would simply start their screen reader reading
or tab into the content to access it.
Jared
From: Birkir R. Gunnarsson
Date: Wed, Feb 08 2012 11:06AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
This works well with IE9 and Jaws 13 (Jaws starts reading the revelaed
list or paragraph after you activate the link with the enter key).
Firefox with IE9 does not work so well. Once you activate it will jump
over the revealed content and read the next thing after.
If hitting enter on the "reveal list" NVDA will next read "reveal
paragraph" and you have to use arrow up to see the list. If activating
"reveal paragraph" NVDA will read "this text is always vissible).
Granted NVDA works much better with Firefox and IE, and I can test it
a bit later today, but these are first impressions.
On 2/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> I wrote some javascript some time ago in an effort to bring focus to content
> that is revealed when a div's display property is changed from "none" to
> "block". Now that I'm working on an accessible solution to collapsing
> content, I'm wondering if my old test script would work or not. I'd
> appreciate any feedback. Here is the link:
> http://sbctc.edu/testexpandingcontent.html .
>
> Thanks,
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
>
From: Steve Flaukner
Date: Wed, Feb 08 2012 11:12AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
I tested in Lynx and it had issues. Tested in Webbie and worked fine. The
inline CSS I would pass on and create a separate CSS. Possible anchor name
already exists within id. I also shy away from starting id's with an
underscore.
On Feb 8, 2012 12:44 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
> I wrote some javascript some time ago in an effort to bring focus to
> content that is revealed when a div's display property is changed from
> "none" to "block". Now that I'm working on an accessible solution to
> collapsing content, I'm wondering if my old test script would work or not.
> I'd appreciate any feedback. Here is the link:
> http://sbctc.edu/testexpandingcontent.html .
>
> Thanks,
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
>
From: Vincent Young
Date: Wed, Feb 08 2012 11:18AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
I don't think this will work. You are trying to focus an element that can
not receive focus. Take a look at how I did it in the example I sent
yesterday.
On Wed, Feb 8, 2012 at 9:43 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> I wrote some javascript some time ago in an effort to bring focus to
> content that is revealed when a div's display property is changed from
> "none" to "block". Now that I'm working on an accessible solution to
> collapsing content, I'm wondering if my old test script would work or not.
> I'd appreciate any feedback. Here is the link:
> http://sbctc.edu/testexpandingcontent.html .
>
> Thanks,
>
> 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: Wed, Feb 08 2012 11:24AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
I've been looking at this morning Vincent. Didn't quite get how the -1 tabindex brought focus to the revealed content.
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Vincent Young
>Sent: Wednesday, February 08, 2012 10:05 AM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] Does this Javascript bring focus to expanded content?
>
>I don't think this will work. You are trying to focus an element that can not
>receive focus. Take a look at how I did it in the example I sent yesterday.
>
>On Wed, Feb 8, 2012 at 9:43 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I wrote some javascript some time ago in an effort to bring focus to
>> content that is revealed when a div's display property is changed from
>> "none" to "block". Now that I'm working on an accessible solution to
>> collapsing content, I'm wondering if my old test script would work or not.
>> I'd appreciate any feedback. Here is the link:
>> http://sbctc.edu/testexpandingcontent.html .
>>
>> Thanks,
>>
>> 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: Wed, Feb 08 2012 11:30AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
Thanks - I'm going to play around with Vincent's suggestion today and see if I can get that method to work with multiple collapsible content areas on one page. My javascript skills are not so hot.
Angela
>Granted NVDA works much better with Firefox and IE, and I can test it a bit
>later today, but these are first impressions.
>
>
>On 2/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> I wrote some javascript some time ago in an effort to bring focus to
>> content that is revealed when a div's display property is changed from
>> "none" to "block". Now that I'm working on an accessible solution to
>collapsing
>> content, I'm wondering if my old test script would work or not. I'd
>> appreciate any feedback. Here is the link:
>> http://sbctc.edu/testexpandingcontent.html .
>>
>> Thanks,
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>>
From: Jared Smith
Date: Wed, Feb 08 2012 11:36AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
Here's a VERY basic example of a toggle using role="button" and
aria-expanded - http://webaim.org/temp/expand.htm
Jared
From: Angela French
Date: Wed, Feb 08 2012 11:48AM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
Sure! (You may have more faith in me than I do, but of course I will).
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Steve Flaukner
>Sent: Wednesday, February 08, 2012 10:19 AM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] Does this Javascript bring focus to expanded content?
>
>If could share the final product that would be beneficial to everyone. txs On
>Feb 8, 2012 1:16 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Thanks - I'm going to play around with Vincent's suggestion today and
>> see if I can get that method to work with multiple collapsible content
>> areas on one page. My javascript skills are not so hot.
>> Angela
>>
>>
>> >Granted NVDA works much better with Firefox and IE, and I can test it
>> >a
>> bit
>> >later today, but these are first impressions.
>> >
>> >
>> >On 2/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> >> I wrote some javascript some time ago in an effort to bring focus
>> >> to content that is revealed when a div's display property is
>> >> changed from "none" to "block". Now that I'm working on an
>> >> accessible solution to
>> >collapsing
>> >> content, I'm wondering if my old test script would work or not. I'd
>> >> appreciate any feedback. Here is the link:
>> >> http://sbctc.edu/testexpandingcontent.html .
>> >>
>> >> Thanks,
>> >>
>> >> 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: Wed, Feb 08 2012 12:30PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
So here's my test page: sbctc.edu/testexpandingcontent2.html
Are you saying all I have to do is add the aria-expanded attribute to my content divs to make them perceivable to screen readers? That seems so simple.
I haven't added any visual for sighted users yet.
>
>Here's a VERY basic example of a toggle using role="button" and aria-
>expanded - http://webaim.org/temp/expand.htm
>
>Jared
>
From: Steve Flaukner
Date: Wed, Feb 08 2012 12:48PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
Its all live and learn!
On Feb 8, 2012 1:20 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
> Sure! (You may have more faith in me than I do, but of course I will).
>
> >-----Original Message-----
> >From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> > = EMAIL ADDRESS REMOVED = ] On Behalf Of Steve Flaukner
> >Sent: Wednesday, February 08, 2012 10:19 AM
> >To: WebAIM Discussion List
> >Subject: Re: [WebAIM] Does this Javascript bring focus to expanded
> content?
> >
> >If could share the final product that would be beneficial to everyone.
> txs On
> >Feb 8, 2012 1:16 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Thanks - I'm going to play around with Vincent's suggestion today and
> >> see if I can get that method to work with multiple collapsible content
> >> areas on one page. My javascript skills are not so hot.
> >> Angela
> >>
> >>
> >> >Granted NVDA works much better with Firefox and IE, and I can test it
> >> >a
> >> bit
> >> >later today, but these are first impressions.
> >> >
> >> >
> >> >On 2/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> >> >> I wrote some javascript some time ago in an effort to bring focus
> >> >> to content that is revealed when a div's display property is
> >> >> changed from "none" to "block". Now that I'm working on an
> >> >> accessible solution to
> >> >collapsing
> >> >> content, I'm wondering if my old test script would work or not. I'd
> >> >> appreciate any feedback. Here is the link:
> >> >> http://sbctc.edu/testexpandingcontent.html .
> >> >>
> >> >> Thanks,
> >> >>
> >> >> Angela French
> >> >> Internet Specialist
> >> >> State Board for Community and Technical Colleges
> >> >> 360-704-4316
> >> >> = EMAIL ADDRESS REMOVED =
> >> >> http://www.checkoutacollege.com/
> >> >>
> >> >>
From: Jared Smith
Date: Wed, Feb 08 2012 12:54PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
On Wed, Feb 8, 2012 at 12:29 PM, Angela French wrote:
> Are you saying all I have to do is add the aria-expanded attribute to my content divs to make them perceivable to screen readers?
Kind of. To correct your statement, the aria-expanded attribute goes
on the link that does the expanding, not on the content that is
revealed. You've done this correctly in your example.
If the text is in the page, it's "perceivable" - the key is informing
the user of the functionality of the links/buttons (that they'll
reveal or hide content) and the current state of that content
(expanded or not). Your example does precisely this for screen reader
users, except...
... there's a issue with your scripting - it needs to be modified so
it changes the aria-expanded state of the link that has been
activated. Your code has multiple links with id="expandlink", so the
aria attribute is only updated on the first link.
Jared
From: Steve Flaukner
Date: Wed, Feb 08 2012 1:06PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
If could share the final product that would be beneficial to everyone. txs
On Feb 8, 2012 1:16 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks - I'm going to play around with Vincent's suggestion today and see
> if I can get that method to work with multiple collapsible content areas on
> one page. My javascript skills are not so hot.
> Angela
>
>
> >Granted NVDA works much better with Firefox and IE, and I can test it a
> bit
> >later today, but these are first impressions.
> >
> >
> >On 2/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> >> I wrote some javascript some time ago in an effort to bring focus to
> >> content that is revealed when a div's display property is changed from
> >> "none" to "block". Now that I'm working on an accessible solution to
> >collapsing
> >> content, I'm wondering if my old test script would work or not. I'd
> >> appreciate any feedback. Here is the link:
> >> http://sbctc.edu/testexpandingcontent.html .
> >>
> >> Thanks,
> >>
> >> 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: Wed, Feb 08 2012 3:03PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | Next message →
I'd be appreciative of another look at example #3: http://sbctc.edu/testexpandingcontent3.html
Angela French
>... there's a issue with your scripting - it needs to be modified so it changes
>the aria-expanded state of the link that has been activated. Your code has
>multiple links with id="expandlink", so the aria attribute is only updated on
>the first link.
>
>Jared
>
From: Jared Smith
Date: Wed, Feb 08 2012 3:33PM
Subject: Re: Does this Javascript bring focus to expanded content?
← Previous message | No next message
On Wed, Feb 8, 2012 at 3:02 PM, Angela French wrote:
> I'd be appreciative of another look at example #3: http://sbctc.edu/testexpandingcontent3.html
This seems to be working correctly for me.
Jared