switch content mouse dependency

[rubycat]

1) Script Title: Switch Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.htm

3) Describe problem:
Is there a way to make this terrific script input device independent? You know, for people who can't use a mouse? The content is inaccessible to non-mouse users (i.e., tabbing through the page won't work) which makes for lousy accessibility.

[ddadmin]

The easiest way I can think of is just to provide "Contract All" and "Expand All" links on the page, like in the DD demo. Users can tab their way to them, and press enter to mass contract/ expand all the switch contents.

[rubycat]

Thanks for the quick response. Unfortunately, that's not a solution for me as the contract/expand functionality isn't desired. You said that's the easiest way. Is there a less easy way?

[ddadmin]

If you want each switch content header to be accessible via keyboard, you can use HTML's tabindex attribute, along with a little bit of JavaScript to make the header respond to keyboard events. So, first give each header a "tabindex" attribute with value "0", for example:

<h3 id="bobcontent1-title" class="handcursor" tabindex="0"> What is JavaScript?</h3>

In your CSS, I recommend highlighting the tabbed header with a border, using:

<style type="text/css">

.handcursor:focus{
border: 1px dashed black;
}

</style>

Then, inside switchcontent.js, find and add to the below line:

this.headers[i].onclick=function(){instanceOf.toggledisplay(this)}
this.headers[i].onkeypress=function(){instanceOf.toggledisplay(this)}

The code in red is new. That should do it. You can now tab to each header, and press a key (such as "Enter") to expand/ contract it.

[rubycat]

Hey that does the trick! Problem now is that because all the other crud on the page doesn't use tabindex (the navigation etc. works with the natural flow of the document) no matter what value I use in tabindex for the switch content headers, upon landing on the page and tabbing, it goes straight to the first switch content header. Is there any other way to pull all this off? (I can't assign tabindex to all the other stuff.)

Did I explain that okay?

[ddadmin]

Hmmm you might want to do some research into the behavior of tabindex. In some browsers it may very well be an all or nothing deal, meaning if you don't add such an attribute to all links on your page, the ones with it will always come up first when tabbing.