The worst accessibility sin you can make is to make your navigation dependent on Javascript.
The problem is, that a lot of elements considered to be good usability actually need javascript to function properly.
Most of the time, this is due to the fact that HTML elements are being used for something which is not their purpose, like a button acting as a link.
Now, to make these things work although there is no Javascript available we have two options
If possible, use the first option, it is much safer and does not clutter the code unneccessarily.
However if there is no chance to change the backend code, use noscript to replace the elements with their accessible equivalents, and write the elements that cause trouble via javascript.
<input type="button" onclick="self.location='http://www.netdecisions.com'" value="Homepage" />
<input type="submit" name="home" onclick="self.location='http://www.netdecisions.com;return false'" value="Homepage" />
And the PHP would be
<?PHP if($_GET['home']=='homepage'){ echo header('http://www.netdecisions.com')}?>
The return false prevents javascript browsers to send the data back to the server, non-javascript browsers go back to the server, call the PHP script (of course it needs to be the form action) and set the header to load the other page.
<script language="JavaScript" type="text/javascript"> <! document.write('<input type="button" onclick="self.location=\'http://www.netdecisions.com\'" value="Homepage" />') // don't forget to escape the '! //> </script> <noscript> <a href="http://www.netdecisions.com">Home</a> </noscript>
Javascript enabled browsers show the button, browsers without Javascript write out a link that points to the same page
Details
Details
Details
Details
Details
Details
Details
Details
A function to show and hide this element could be:
if (document.getElementById && document.createTextNode){canDOM=true} function collapse(id){ if (canDOM && document.getElementById(id)){ elm=document.getElementById(id); elm.style.display= elm.style.display=='none'||elm.style.display==''?'block':'none'; } }
The first line checks if the browser is a DOM capable browser, the second check was implemented to rule out Opera 6, which claims to be one, but doesn't do it properly.
The function collapse() checks if the browser knows DOM or not and checks if the element to be collapsed or expanded is available (ensure to think of all scenarios), then it checks if the display style of the element is empty or 'none' and sets it to 'block' or if it is 'block' sents it to 'none'.
The HTML will be as follows:
<div class="domhidden" id="details"> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> </div>
We give the element a class that is called 'domhidden' and an ID to identify it. We then add a new style to the document, if the browser is capable of Javascript and DOM which hides the elements with the class 'domhidden'.
if (canDOM){document.write('<style type="text/css">.domhidden{display:none;}</style>')}
This means that a browser with Javascript will hide all the elements, when the page is loaded. Javascript disabled browsers will show the elements.
To call the function we use a link, and depending on the location of the collapsible element, we either use a link that points to an anchor in the collapsible element, or one that links nowhere. If we add a link that points nowhere but the Javascript, then we should write it via Javascript.
<script language="JavaScript" type="text/javascript"> <! document.write('<a href="#" onclick="collapse(\'details\');return false"> »Details</a>'); //> </script> <noscript>Details:</noscript> </p> <div class="domhidden" id="details"> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> </div>
If the browser supports Javascript, it writes out a link, if not, simply a text.
<p><a href="#details" onclick="collapse('details');return false"> »Details</a></p> <p>Normal text</p> <p>Normal text</p> <p>Normal text</p> <p>Normal text</p> <p>Normal text</p> <p>Normal text</p> <div class="domhidden" id="details"><a name="details"></a> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> </div>
Javascript enabled browsers willl call the collapse() function and not return to the page, browsers without Javascript will jump to the anchor inside the details div.