Accessibility and JavaScript Mouse Events

One of the most annoying things as a fellow developer trying to get his sites to pass accessibility checks is the "Make sure event handlers do not require use of a mouse" pass - which seems like an unavoidable scenario… I.e. you want something to happen when the user clicks the mouse… Nothing unreasonable there? Except when the user doesn’t have a mouse that is!

So we need a solution for those users too...

<input type="text" id="forename" onclick="this.value='';" onkeypress="this.value='';" />

Mmmm there's my first problem – I can’t simply add an onkeypress event as it would wipe out everything as I type… Not very user friendly.

Being lazy I was obviously annoyed at this as it meant I had to think about how to make this action accessible for all users…

Here’s a messy version of something that worked in my scenario:

<script>
<!--
function clearText(obj){
var defaultValue="DEFAULT VALUE";
if(obj.value==defaultValue){
obj.value="";
}
}
//-->
</script>

<input type="text" id="first_name" onclick="clearText(this);" onkeypress="clearText(this);" value="DEFAULT VALUE" />


It's messy but it does solve the problem and my page successfully got a WCAG priority 2.. AKA "a pass".

The point is you have to offer a solution to all of your users, not just those with a mouse. So next time you type that fatal line of code: onclick, remember those people who can't use a mouse.

I guess that is the concept of accessibility after all – allowing everyone to use your website!