Does this page look plain and unstyled?

Tools, wizards, articles and tutorials on Web Accessibility for the conscientious web developer

Subscribe to Accessify's RSS Feed   

Reasons for using the HTML to JavaScript converter

You may be wondering: "Why would I want to use this tool?" and "What has this got to do with accessibility?". Here are some thoughts:

Why would I use the HTML to JavaScript converter?
If you want to use a piece of navigation across a site, it is sometimes a good idea to use a shared JavaScript file (in other words, JavaScript code saved in a .js file). The reasons for this are:

  • By saving as a JavaScript .js file, it means that a substantial part of a page can be cached by the browser - which will make subsequent reloads quicker.
  • To change navigation site-wide, you only have one file to amend - easy!

But surely using <script> goes against improving accessibility?
Not necessarily. You can use a script, but if you do, be sure to include a <noscript> alternative. So, using the example above you might use JavaScript to render navigation for more modern browsers, but for older browsers that perhaps do not support JavaScript, or for those who have disabled it, you would provide links in the <noscript> section.

What other accessibility advantages does this tool offer?
One of the problems with navigation systems in some sites is that they can be a little too clever. If you acknowledge this fact, by putting such navigation in a block of JavaScript and not in plain old HTML, you are in fact providing an easy way of letting people override it. You can't simply switch off a section of HTML, but you can with JavaScript. So, you can make it work for you rather than against you.

I'm still not convinced - sell it to me
Here's a useful tip - let's say you want your site to look great in a standard PC/Mac web browser, but also to look good in a PDA. Not always that easy. Now, this site uses CSS for layout, but we have used a <table> to set out the search box. The problem is, the table width is too wide to view on a PDA, and so causes horizontal scrolling. So, we've hidden the search box for PDAs by running the HTML through the converter tool, and then pasting the resultant JavaScript code into an external .js file. Here's the beauty of it - Pocket PC format does not recognise any JavaScript held in external files. Bingo! So, for those that support scripts in .js files, you get the 'proper' search box, for while for those that don't, we have a simpler version.

It's just one way of exploiting one particular short-fall of one particular browser, and it's one we've used on numerous occassions.

Try the tool out for yourself.



This page is styled using Cascading Style Sheets (CSS). If you can read this message, the chances are that your browser does not properly support CSS or you have disabled this yourself. The content on this site is perfectly readable without style sheets, though; it just doesn't look quite so fancy.

site statistics

This site is partnered with MIS Web Design and Top4Office for Copiers and Digipro for Photocopiers. Web design by Swindon Internet & PR Services.

How you can help support this site: Learn web design from the creator of this site, or help him by requesting some PR Photography