WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Need to know if this code snippet is accessible

for

From: KINNUNEN, DANIEL
Date: Jun 10, 2010 2:12PM

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

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jason
Megginson
Sent: Thursday, June 10, 2010 12:41 PM
To: WebAIM Discussion List; UW WebAccessibility Group
Subject: Re: [WebAIM] Need to know if this code snippet is accessible

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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Thursday, June 10, 2010 1:13 PM
To: 'WebAIM Discussion List'; 'UW WebAccessibility Group'
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/>;