RE: DHTML show/hide sections & screen readers

-----Original Message-----
From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf
Of Rebecca Cox
Sent: 11 May 2005 07:03
To: w3c-wai-ig@w3.org
Subject: DHTML show/hide sections & screen readers



Hi all

I'm working on some pages where there is javascript run onpage load to
hide some divs (by adding CSS display: none), which are then shown when
the user clicks on a link (CSS changes to display: block). Its all in a
window.onload, no script or CSS in the HTML.

I am wondering how screen readers do with this - eg if my use of onclick
is going to cause any issues here. And in general, how do people using
screen readers eg Jaws, find this sort of DHTML? If anyone knows of any
articles etc on this I would be very interested.

My test page is up at http://users.actrix.co.nz/rebecca.cox/dhtml/

Cheers,
Rebecca

Hi Rebecca

In a nutshell it might cause a problem with screen readers, especially older
ones. Also there are other accessibility issues to consider with JavaScript
such as it's reliance on the mouse.

That said, I am definitely not saying you shouldn't use. You might want to
research the <noscript> tag which hides scripts from browsers not using it.
You can then embed an alternative.

The place is as good as many others for more information

http://ltg-projects.ummu.umich.edu/~melledge/accessibilitysite/Noscript.html

If you try the code below just after the <script> tag and switch off
JavaScript in your browser you will get some idea of how it works

Cheers

Stu

<noscript>
<body>





<h1>Show hide script test page</h1>

<p>Test page for a script which sets content blocks to display:none on page
load, then sets them to display:block onclick.</p> 

<h2>Heading for section 1</h2>


<p>Content for section 1.</p> 

<dl>
<dt>Heading for sub section 1a</dt>
<dd id="subsection0">
Content for sub section 1a.

</dd>


<dt>Heading for sub section 1b</dt>
<dd>
Content for sub section 1b.
</dd>
</dl>

</div>

<h2>Heading for section 2</h2>

<div>
<p>Content for section 2.</p> 


</div>
</div>

</body>
</noscript>

Received on Wednesday, 11 May 2005 11:37:43 UTC