Careful use of accessible JavaScript

• March 7th, 2007
• Posted by Stewart
• Permalink
• 0 Comment(s)

JavaScript can really pose some difficult accessibility issues for users when not used correctly and with consideration. But there are some steps you can follow in your designs to make sure your site accessible to a larger audience. By designing with these steps in mind means you will not be ignoring the 3-6% of users* who cannot, or will not use JavaScript.

The Importance of JavaScript

In all the work that you do, you should never design a site that requires JavaScript. The reason for this is because you may find that some of your users will not use JavaScript and will therefore mean that they cannot use your site. Only use JavaScript to enhance the users experience. By “enhance” I mean improve the users experience by adding thoughtful, helpful features that helps them get what they want.

Because, remember, approximately 3-6% of web users have JavaScript disabled*.

Movements

One of the reasons people disable JavaScript is because sometimes it gets abused. Some of your users may have physical disabilities such as mobility difficulties. If you have a script that moves elements around the screen, or makes it hard to see or click, it may be hard for these users to use them. Bear this in mind.

JavaScript in Hyperlinks

Using JavaScript in a link is bad news. If you are using something like this-

<a href="javascript:Logout()">Logout</a>

Then you are making this link useless and inaccessible to users who can’t use JavaScript. A much more effective way would be to use a regular link (which everyone can use) and then add the enhancement of JavaScript. How about this simple JavaScript Logout script:-

<a href="logout.php" onclick="return (confirm('Are you sure?'));">Logout</a>

By doing it this way, you are really adding some benefit to users with JavaScript and still ensuring that other users can use the regular HTML link! This script will ask the user to confirm logging out, and if they do, it will follow the link as usual. If they do not confirm logging out, it will return false.

Did you know that if you return false on a link, it will not follow it?

<a href="http://www.away.com" onclick="return false;">doesn't work</a>

This effectively stops the link from being followed for those who can use JavaScript! In the real world this would not be particularly useful but it demonstrates it’s uses.

Clever use of AJAX

AJAX has been the buzz word for the past year or two and in essence is a really simple way of getting content without having to refresh the page. But the jury is still out on how accesible it really is. There is no doubt that it adds real benefits to users when they are used cleverly but for users with screen-readers, it can sometimes be totally missed. Keep this in mind when using AJAX in your designs. If the user would not be able to see or use your ever so clever AJAX feature, can they access it another way?

A good example of this is on GET plc’s online ordering system. When users place orders for products they are asked to enter the product code. I simply use an AJAX pop-up with suggestions as they type. If the user cannot see or use the pop-up, they can still continue entering the product code.

So try disabling JavaScript and browsing your sites and see if they fail to work! If it doesn’t work for you with JavaScript disabled, it doesn’t work for 3-6% of your users.

Resources

• WebAIM: Creating Accessible Javascript
• Source: http://www.w3schools.com/browsers/browsers_stats.asp
• Source: http://www.thecounter.com/stats/2006/January/javas.php