E-mail List Archives
Thread: Need to know if this code snippet is accessible
Number of posts in this thread: 9 (In chronological order)
From: Angela French
Date: Thu, Jun 10 2010 12:15PM
Subject: Need to know if this code snippet is accessible
No previous message | Next message →
Hello,
I have a test page posted at: http://checkoutacollege.com:8080/accordion2.htm . When the user clicks on the "read description" text, a block of text is revealed below. I need to know if this "accordion" methodology is accessible. It relies on the click event, so I'm thinking it's not. It also relies (for the sighted user's benefit) on the initial display property being set to none, until such time the user clicks on the "read description" text. Can screen readers read content that has been set to display:none?
Can anyone help me with this? If this method is not accessible, can anyone suggest a method that would work? The real page would have about 37 Program Titles and descriptions. The descriptions are a paragraph long, so for the sighted user, this results in a page that is visually very long. That is why I wanted to try this "accordion" or expanding content idea, but not at the expense of making it inaccessible.
Thank you for your input.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
From: Carin Headrick
Date: Thu, Jun 10 2010 12:27PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
Herm. It works, but it's not inherently obvious that that text is clickable.
But I can press enter on it and the description does appear below.
Carin
----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >; "'UW
WebAccessibility Group'" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 10, 2010 1:13 PM
Subject: [WebAIM] Need to know if this code snippet is accessible
Hello,
I have a test page posted at:
http://checkoutacollege.com:8080/accordion2.htm . When the user clicks on
the "read description" text, a block of text is revealed below. I need to
know if this "accordion" methodology is accessible. It relies on the click
event, so I'm thinking it's not. It also relies (for the sighted user's
benefit) on the initial display property being set to none, until such time
the user clicks on the "read description" text. Can screen readers read
content that has been set to display:none?
Can anyone help me with this? If this method is not accessible, can anyone
suggest a method that would work? The real page would have about 37 Program
Titles and descriptions. The descriptions are a paragraph long, so for the
sighted user, this results in a page that is visually very long. That is
why I wanted to try this "accordion" or expanding content idea, but not at
the expense of making it inaccessible.
Thank you for your input.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
From: Jason Megginson
Date: Thu, Jun 10 2010 12:36PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
The "read description" elements are clickable with JAWS, but they are not
in the tab order. This is a significant barrier to sighted keyboard only
users.
For screen reader users, it is not clear that the text expands or hides
text. I would ensure that the DIV tags would be accessed in the tab order.
You can add tabindex=1 to these elements and place a onKeyUp event
ensuring that the "Enter" key is passed to the function displaying and
hiding the text below.
I would really recommend that these objects be structured as links
(anchors) rather than DIV elements.
When the text is expanded (visible) the text "read description" is bold. I
recommend either changing the text to "hide description" or placing a
title attribute on the clickable text denoting the current state of the
object (i.e. expanded, collapsed).
In regards to display:none, I recomomend this approach because JAWS and
Window Eyes will ignore text with display:none. I have found that Window
Eyes will read "hidden" text with the CSS visibility:hidden property.
Jason Megginson
SSB BART Group
(O):703-637-8964
(C):703-244-7755
From: deblist
Date: Thu, Jun 10 2010 12:39PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
As a keyboard only user, I can reach and access the links by direct search for them and then pressing enter, but they aren't accessible links by any of the standard mechanisms. That is, I can't get to them in Firefox via mouseless browsing, and I can't get to them in Opera via the usual keyboard commands for accessing links. So from a keyboard only point of view, I would call this minimal accessibility. Yes, it's possible, but nobody's going to figure out how to do it.
-Deborah
From: KINNUNEN, DANIEL
Date: Thu, Jun 10 2010 2:12PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
One thought: If using tabindex, I'd suggest using tabindex="0" in most
cases, rather than tabindex=1. Using "0" inserts the element into the
tab ring without disrupting the normal tab order on the page.
Dan Kinnunen
From: Rakesh.Paladugula
Date: Thu, Jun 10 2010 11:51PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
I have tested the page using JAWS. My findings are..
1. By navigating with "Tab" key I am not able to focus the "Read discription" element.
2. By navigating using arrow keys I am able to focus on "Read discription. Now the problem is "Read discription" is neither a link nor a clickable element. So a user may ignore entering on it to find the hidden discription. Also there is no intimation on pressing enter on "Read discription" the newly visible text is hidden.
My suggestion is
1. Make it a tab focusable element. Make clear that by pressing enter on it gives some text after the element and by re-pressing the enter on the same it will close the content.
(or)
2. Give a tab focusable technology to it and provide a mechanism to close the newly opened content at the end of the new content.
(or)
3. Provide tab focusable technology to "read discription" and ensure that when content in "read discription-1" opens all other "read discriptionss" are closed. On opening "read discription-2" already opened "read discription-1" should be closed automatically.
i have checked the page using Internet explorer 6 and JAWS 11. Other browser with other assisstive technology may present the content differently.
Thanks & regards
Rakesh Paladugula
From: ckrugman
Date: Mon, Jun 14 2010 1:33AM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
When I went to the page and clicked on it using JAWS nothing happened other
than I was taken either to the desktop or my "Favorites" menu opened. I find
that this happens frequently on many inaccessible web pages using Windows
Vista and IE8 with JAWS 11 latest version.
Chuck
----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >; "'UW
WebAccessibility Group'" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 10, 2010 10:13 AM
Subject: [WebAIM] Need to know if this code snippet is accessible
> Hello,
> I have a test page posted at:
> http://checkoutacollege.com:8080/accordion2.htm . When the user clicks on
> the "read description" text, a block of text is revealed below. I need
> to know if this "accordion" methodology is accessible. It relies on the
> click event, so I'm thinking it's not. It also relies (for the sighted
> user's benefit) on the initial display property being set to none, until
> such time the user clicks on the "read description" text. Can screen
> readers read content that has been set to display:none?
>
> Can anyone help me with this? If this method is not accessible, can
> anyone suggest a method that would work? The real page would have about
> 37 Program Titles and descriptions. The descriptions are a paragraph
> long, so for the sighted user, this results in a page that is visually
> very long. That is why I wanted to try this "accordion" or expanding
> content idea, but not at the expense of making it inaccessible.
>
> Thank you for your input.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
>
>
From: Angela French
Date: Mon, Jun 14 2010 1:12PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | Next message →
Chuck, Thank you for testing. Although I don't have the new code snippet up on my test site, I ended up wrapping an anchor tag around the "read description" text so that it is actionable. I can now tab to it and use my Enter key to expand the content. Would this make it accessible now by a JAWS user?
From: ckrugman
Date: Fri, Jun 18 2010 11:27PM
Subject: Re: Need to know if this code snippet is accessible
← Previous message | No next message
Hi Angela,
I'm behind in going through emails this week. I just went back to the web
page and the problem is that JAWS isn't identifying any actual links.
Therefore, nothing happens when I click on anything on the page. Using JAWS
11 withIE8 and Windows Vista.
Chuck
----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, June 14, 2010 11:12 AM
Subject: Re: [WebAIM] Need to know if this code snippet is accessible
> Chuck, Thank you for testing. Although I don't have the new code snippet
> up on my test site, I ended up wrapping an anchor tag around the "read
> description" text so that it is actionable. I can now tab to it and use
> my Enter key to expand the content. Would this make it accessible now by
> a JAWS user?
>
>