WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Need to know if this code snippet is accessible

for

From: Jason Megginson
Date: Jun 10, 2010 12:36PM

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