Brushing it off... hopefully

Today I've been going through my questionnaire using JAWS 7.10. If you go to the page where my questionnaire lives and navigate to Section 1 of it, you will see a subsection called "Contact details" (I'm providing a clickable snapshot below)


I've been trying to ensure that the questionnaire makes sense to those users who can read the page, and those who have to rely on screen reader software to do so. If you're using tab button to navigate running JAWS 7.10 (both on top of IE 7 and Mozilla Firefox 2), you will hear the following:

one to three Contact details, please enter your name edit [tab]
one to three Contact details, please enter your email address edit [tab]
one to three Contact details, please enter your telephone number edit [tab]

This is slightly different to what's visible on the page. The reason being is that "1 to 3 Contact details" is wrapped in the legend tag (resized and taken off the screen to make it invisible using inline CSS) and all the three questions form a fieldset. The screen reader thus repeats whatever's in the legend tag, followed by the question for every text input instance.

For radio button and checkbox questions it's different.



four can we contact you for further information yes radio button not checked one of two [tab]
four can we contact you for further information no radio button not checked two of two

In this case JAWS reads out what's in the legend tag for every radio button option, but it's ignoring the actual question. So, had I not put the question in the legend tag, users would only hear:

yes radio button not checked one of two [tab]
no radio button not checked two of two

This example illustrates the importance of using legend and fieldset tags when designing for diverse user agents.

Hiding Content using CSS

Just as I was on the brink of desperation, I asked Jon about hiding content. It's a simple idea, but it goes a long way. Here's an article on hiding content from view. It can come handy for screen reader accessible design.

Questionnaire again

Well, just a couple of things I ran into

• As I've said - every radio button/checkbox question has to be wrapped in fieldset and legend tags. Yes, it's in the UAAG 1.0 guidelines too. Check out this article on
  Fieldsets, Legends and Screen Readers (Joe kindly pointed me to it)
• This introduces a horizontal scrollbar when increasing the text size in Firefox. But it was useful to find out that in IE it never worked in the first place =)
• Using br tags to break the questions wrapped in legend tags into several lines makes the questions look quite bad
  
• Each question is duplicated (once in the legend, once in where it is placed by create survey's content management system), so watch that Cognitive Load!
• If I only leave one version of a question, the one in the legend tag, quite expectedly, data analysis becomes hell. All the fancy bars and all the stats need separate decyphering
  

Anyways, I'm not giving up and am yet to try a few workarounds (remember, I am working with accessibility gurus, who also happen to be very helpful).