WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: can screenreader user please test expanding content?

for

Number of posts in this thread: 15 (In chronological order)

From: Angela French
Date: Fri, Apr 01 2011 3:15PM
Subject: can screenreader user please test expanding content?
No previous message | Next message →

Hello,
I am hoping that a screen reader user on this list would be willing to test the accessibility of this jQuery/CSS expanding content implementation.

http://www.sohtanaka.com/web-design/examples/toggle/bad.htm

Thank you very much,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;

From: Birkir R. Gunnarsson
Date: Fri, Apr 01 2011 3:21PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Hi

Sorry, should add I used Windows 7, IE8 and Jaws 12, basically I
checked back and duplicated Mary's test results.

On 4/1/11, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Hi
>
> If you click "seach engine optimization" or "ecommerce" with Jaws 12
> (choose link and then activate by pressing enter" the content expands
> (text appear below the link), similarly it disappears again when you
> hit enter on the link with expanded text, thoug this happened very
> slowly for me (but I have occasional issues with inetner connection).
> No announcement was made of text expanding, so I could not have
> anticipated the update, but this worked, as far as I can tell.
> Let me know if you were looking for some other type of testing.
> Thanks
> -B
>
> On 4/1/11, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hello,
>> I am hoping that a screen reader user on this list would be willing to
>> test
>> the accessibility of this jQuery/CSS expanding content implementation.
>>
>> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>>
>> Thank you very much,
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>>
>>

From: Michael.Moore
Date: Fri, Apr 01 2011 3:27PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Worked for me too with Win XP IE7 and JFW 11.

Mike Moore

From: Birkir R. Gunnarsson
Date: Fri, Apr 01 2011 3:33PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Hi

If you click "seach engine optimization" or "ecommerce" with Jaws 12
(choose link and then activate by pressing enter" the content expands
(text appear below the link), similarly it disappears again when you
hit enter on the link with expanded text, thoug this happened very
slowly for me (but I have occasional issues with inetner connection).
No announcement was made of text expanding, so I could not have
anticipated the update, but this worked, as far as I can tell.
Let me know if you were looking for some other type of testing.
Thanks
-B

On 4/1/11, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello,
> I am hoping that a screen reader user on this list would be willing to test
> the accessibility of this jQuery/CSS expanding content implementation.
>
> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>
> Thank you very much,
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Mary Stores
Date: Fri, Apr 01 2011 3:39PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Hello, Angela

I am using JAWs 11, Windows XP and IE8.

If I press Enter to activate the Web Design and Development link, I see
a level 3 heading of "Need a web site?" Then there is what I believe to
be filler text (Is that latin?) If I press enter again on the Web
Design and Development link, the need a web site content goes away.

If I activate the logo corporate identity link, I get a level 3 heading
of "Need a logo?" followed by that same filler text. Pressing Enter on
the Logo corporate ID link again makes that content disappear.

If I activate the eCommerce link, I see the level 3 heading of "Have
product to sell?" followed by the filler text. If I don't press Enter
on the eCommerce link again but instead press enter on the Search
Engine Optomization link, then I can read both the "need to be heard?"
and filler text and "Have product to sell?" and filler text.

Hope I explained this allright.

I think your content expansion thing works.

Mary



Quoting Angela French < = EMAIL ADDRESS REMOVED = >:

>
> Hello,
> I am hoping that a screen reader user on this list would be willing
> to test the accessibility of this jQuery/CSS expanding content
> implementation.
>
> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>
> Thank you very much,
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Jared Smith
Date: Fri, Apr 01 2011 10:48PM
Subject: can screenreader user please test expanding content?
← Previous message | Next message →

Apologies for the spam everyone. The offender has been blocked. We've
only had a few instances like this in the 11 years this list has been
active. For some reason they always tend to occur when I'm on
vacation.

Jared

From: Dylan Barrell
Date: Sat, Apr 02 2011 9:36AM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Angela,

I tested you site using Worldspace FireEyes and found the following a11y issues:

1) There are no visible focus styles for the keyboard focusable anchor
tags that toggle the accordion open (example <a href="#">
eCommerce</a>)
2) There is no language set for the page
3) There are no alt texts on your images in the content (but this may
be because it is not real content)
4) The color contrast of your h1 on the page is below the WCAG 2 AA
threshold of 3:1 for text of that size (contrast ratio is 2.32:1)

On the plus side, the page passed all the dynamic content analysis
rule in FireEyes so it looks like a screen reader user will be able to
access it without difficulty.

These tests took me about 5 minutes to administer with FireEyes which
is free and can be downloaded from here:

http://worldspace.deque.com/

--Dylan

From: Birkir R. Gunnarsson
Date: Sat, Apr 02 2011 12:21PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Actually, the page does not have a title either *grin* or did not when
I tested it yesterday. But I only tested the JQuery functionality
without thinking about the other issues, but thanks Dylan, I will go
download this app and test it for accessibility, could come in handy.

On 4/2/11, Dylan Barrell < = EMAIL ADDRESS REMOVED = > wrote:
> Angela,
>
> I tested you site using Worldspace FireEyes and found the following a11y
> issues:
>
> 1) There are no visible focus styles for the keyboard focusable anchor
> tags that toggle the accordion open (example <a href="#">
> eCommerce</a>)
> 2) There is no language set for the page
> 3) There are no alt texts on your images in the content (but this may
> be because it is not real content)
> 4) The color contrast of your h1 on the page is below the WCAG 2 AA
> threshold of 3:1 for text of that size (contrast ratio is 2.32:1)
>
> On the plus side, the page passed all the dynamic content analysis
> rule in FireEyes so it looks like a screen reader user will be able to
> access it without difficulty.
>
> These tests took me about 5 minutes to administer with FireEyes which
> is free and can be downloaded from here:
>
> http://worldspace.deque.com/
>
> --Dylan
>

From: Jeevan Reddy
Date: Tue, Apr 05 2011 2:09AM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Hi Angela,
The Markup is fine, still the symantics of this Jquery/CSS expanding
content is not conveyed to AT.
I've tested with NVDA V2011.1 on Firefox 3.6 and Windows 7.
it's working well with keyboard, but the screen Reader user has no idea what
was happened when he/she clicked on it, i.e wether it is expanded or closed.

using well heading markup will help once the Screen Reader user used the
content couple of times. so i suggest you to convey the user the state of
hte widget. one way of doing it is ARIA. ofcourse older browser browsers
doesn't support ARIA still atleast some users can receive well accessible
information.

On Sat, Apr 2, 2011 at 2:25 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

>
> Hello,
> I am hoping that a screen reader user on this list would be willing to test
> the accessibility of this jQuery/CSS expanding content implementation.
>
> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>
> Thank you very much,
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>

From: Angela French
Date: Tue, Apr 05 2011 2:12PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Thank you to everybody who tested the jQuery expanding content for me. I should clarify that I did not create this page, but rather am looking for an implementation of expanding content (content that will close/expanded for sighted users) that will be completely accessible to screen reader users and non-mouse users.

What I am still unclear about is this: is the content discoverable without any action by the screen readers user? My hope is that the fact that the content in the divs is "hidden" would be transparent to the screen reader user - in other words that it is already expanded. If it requires action by the screen reader user, what is the best way to convey that action is required? In this example, the developer used a background image of a plus sign to indicate to sighted users that that content can be expanded. If expanding the content requires action by the screen reader user, how do you know that it is required, other than the fact that the headline has been made into a link? When you click on it, what indication do you receive that there is additional content present, or does the screen reader just continue to read the page in a linear fashion?

Thank you for any clarification you might provide.

In case the link to the example is still needed, here it is: http://www.sohtanaka.com/web-design/examples/toggle/bad.htm

From: Birkir R. Gunnarsson
Date: Tue, Apr 05 2011 5:57PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Angela

To clarify what happens (IE8, Jaws 12 with latest update, Windows 7).
I open the link and load the page.
The page shows title, a heading level 1 sentence and then 4 links, each level 2.
I just see the link text, no indication of any kind that these links
represent anything special, other than that this is a link and a
heading, so the natural tendency, for me anyway, is to hit enter on
the link to see what happens.
For each of the link I selected it and hit enter.
There is no announcement of any changes, no autorefresh or cursor
movement of any kind, but when I arrow down I see the text now until I
come to the next link.
The same event happens for all of them.
I am just about to study ARIA myself so I cannot give you any smrt
insight into how it would work for you, but I would imagine that some
type of view or control (like treeview) could be used here with states
equal expanded or collapsed.
Another possibility would be to move the focus/cursor to the first
letter of the displayed text, with Javascript.
(but this can be confusing for screen reader users, I certainly don't
like it when the cursor takes off on me and moves without me telling
it to).
Could you simply add text to the link that is hidden but tells screen
readers something like (hit enter to expand text below this link)?
None of these are fantastic ideas and I will be urious to see what the
pros do, but at lesat now you know how the screen reader behaves, at
least Jaws 12.
hth
-b

On 4/5/11, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you to everybody who tested the jQuery expanding content for me. I
> should clarify that I did not create this page, but rather am looking for an
> implementation of expanding content (content that will close/expanded for
> sighted users) that will be completely accessible to screen reader users and
> non-mouse users.
>
> What I am still unclear about is this: is the content discoverable without
> any action by the screen readers user? My hope is that the fact that the
> content in the divs is "hidden" would be transparent to the screen reader
> user - in other words that it is already expanded. If it requires action by
> the screen reader user, what is the best way to convey that action is
> required? In this example, the developer used a background image of a plus
> sign to indicate to sighted users that that content can be expanded. If
> expanding the content requires action by the screen reader user, how do you
> know that it is required, other than the fact that the headline has been
> made into a link? When you click on it, what indication do you receive that
> there is additional content present, or does the screen reader just continue
> to read the page in a linear fashion?
>
> Thank you for any clarification you might provide.
>
> In case the link to the example is still needed, here it is:
> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>
>

From: Mary Stores
Date: Wed, Apr 06 2011 8:03AM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Actually, JAWS 11 with Windows XP behaves the same way.

Mary

Quoting "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >:

> Angela
>
> To clarify what happens (IE8, Jaws 12 with latest update, Windows 7).
> I open the link and load the page.
> The page shows title, a heading level 1 sentence and then 4 links,
> each level 2.
> I just see the link text, no indication of any kind that these links
> represent anything special, other than that this is a link and a
> heading, so the natural tendency, for me anyway, is to hit enter on
> the link to see what happens.
> For each of the link I selected it and hit enter.
> There is no announcement of any changes, no autorefresh or cursor
> movement of any kind, but when I arrow down I see the text now until I
> come to the next link.
> The same event happens for all of them.
> I am just about to study ARIA myself so I cannot give you any smrt
> insight into how it would work for you, but I would imagine that some
> type of view or control (like treeview) could be used here with states
> equal expanded or collapsed.
> Another possibility would be to move the focus/cursor to the first
> letter of the displayed text, with Javascript.
> (but this can be confusing for screen reader users, I certainly don't
> like it when the cursor takes off on me and moves without me telling
> it to).
> Could you simply add text to the link that is hidden but tells screen
> readers something like (hit enter to expand text below this link)?
> None of these are fantastic ideas and I will be urious to see what the
> pros do, but at lesat now you know how the screen reader behaves, at
> least Jaws 12.
> hth
> -b
>
> On 4/5/11, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> Thank you to everybody who tested the jQuery expanding content for me. I
>> should clarify that I did not create this page, but rather am looking for an
>> implementation of expanding content (content that will close/expanded for
>> sighted users) that will be completely accessible to screen reader users and
>> non-mouse users.
>>
>> What I am still unclear about is this: is the content discoverable without
>> any action by the screen readers user? My hope is that the fact that the
>> content in the divs is "hidden" would be transparent to the screen reader
>> user - in other words that it is already expanded. If it requires action by
>> the screen reader user, what is the best way to convey that action is
>> required? In this example, the developer used a background image of a plus
>> sign to indicate to sighted users that that content can be expanded. If
>> expanding the content requires action by the screen reader user, how do you
>> know that it is required, other than the fact that the headline has been
>> made into a link? When you click on it, what indication do you receive that
>> there is additional content present, or does the screen reader just continue
>> to read the page in a linear fashion?
>>
>> Thank you for any clarification you might provide.
>>
>> In case the link to the example is still needed, here it is:
>> http://www.sohtanaka.com/web-design/examples/toggle/bad.htm
>>
>>

From: Angela French
Date: Thu, Apr 07 2011 10:45AM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

Thank you Birkir. In your opinion is it problematic that the JAWS user doesn't realize that the new text has been revealed? In other words, is this expanding text just a display technique that is convenient for sighted users, but has little if no impact on screen reader users? If the "hidden" text is available to you, does it matter that it was hidden until the link was clicked on? In other words, how transparent is it to you that this expanding content block is even being used? Also, I'm wondering, I have read in the past that not all screen readers support display:none , or that this may be a configuration issue on your end. Is the block of text that is styled display:none really unavailable to you until you click on the linked <h2> headline, or can you just skip by the linked headline and read the copy that follows?

Angela

From: Tania
Date: Thu, Apr 07 2011 8:21PM
Subject: Re: can screenreader user please test expanding content?
← Previous message | Next message →

normally as a screenreader user, after hitting enter on a link and nothing
seem to happen, i would arrow down to check whether there were new text.

if you had indicated that hitting enter on a link would open additional info
just before the links would be great.

rgds
tania

----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, April 08, 2011 12:43 AM
Subject: Re: [WebAIM] can screenreader user please test expanding content?


> Thank you Birkir. In your opinion is it problematic that the JAWS user
> doesn't realize that the new text has been revealed? In other words, is
> this expanding text just a display technique that is convenient for
> sighted users, but has little if no impact on screen reader users? If the
> "hidden" text is available to you, does it matter that it was hidden until
> the link was clicked on? In other words, how transparent is it to you that
> this expanding content block is even being used? Also, I'm wondering, I
> have read in the past that not all screen readers support display:none ,
> or that this may be a configuration issue on your end. Is the block of
> text that is styled display:none really unavailable to you until you
> click on the linked <h2> headline, or can you just skip by the linked
> headline and read the copy that follows?
>
> Angela
>
>

From: Angela French
Date: Fri, Apr 08 2011 9:21AM
Subject: Re: can screenreader user please test expanding content?
← Previous message | No next message

Thank you. If we implement that method, we will certainly add that!