Javascript fallback examples

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

  1. Use a backend script to deal with it
  2. Use Javascript sorcery and fallback options to make the navigation element work in any case.

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.

Example: Navigation button

<input type="button" 
onclick="self.location='http://www.netdecisions.com'" 
value="Homepage" />

Backend solution(PHP):

<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.

Javascript sorcery solution:

<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

Example collapsible elements

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.

Scenario 1: Element directly below link

<script language="JavaScript" type="text/javascript">
<!­­
document.write('<a href="#" 
onclick="collapse(\'details\');return false">
&#187;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.

Scenario 2: Element away from link

<p><a href="#details" 
onclick="collapse('details');return false">
&#187;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.