Technique SCR35:Making actions keyboard accessible by using the onclick event of anchors and buttons

Example 1: Link that runs a script and has no fallback for non-scripted browsers

This approach should only be used when script is relied upon as an Accessibility Supported Technology.

Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.

The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.

<script> 
  function doStuff() {
    //do stuff
    return false;
  }
</script>
<a href="#" onclick="return doStuff();">do stuff</a>

Example 2: Link that runs script, but navigates to another page when script is not available

This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.

<script> 
  function doStuff() {  
  //do stuff
  return false;
}
</script>
<a href="dostuff.html" onclick="return doStuff();">do stuff</a>

A working example of this code is available. Refer to Creating Action Links using JavaScript.

Example 3: Button that runs a script and falls back to a form post for users without script

This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting.

<script>
function doStuff() {
  //do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
  <input type="submit" value="Do Stuff" onclick="doStuff();">
</form>

A working example of this code is available. Refer to Creating Action Buttons using JavaScript.

Example 4: Button that runs a script, implemented with input type="image"

Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.

<script>
function doStuff() {
  //do stuff
  return false;
}
</script>
<input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();">

Example 5: Button that runs a script, implemented with input type="submit", input type="reset" or input type="button"

This approach should only be used when script is relied upon.

<input type="submit" onclick="return doStuff();" value="Do Stuff">

Example 6: Button that runs a script, implemented with button

This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon.

<button onclick="return doStuff();">
  <img src="stuff.gif" alt="stuff icon">
  Do Stuff
</button>