jQuery - Trigger click event on links with spaceba

Question

It looks like in most browsers, an <input type="submit"> treats both [spacebar] and [enter] as a click, but an <a> link only treats [enter] as a click.

My app uses a number of links formatted to simulate buttons, so a user that is accustomed to tabbing to a button and pressing [spacebar] will be frustrated.

This bit of jQuery solves the problem:

$("a.Button").die("keypress").live("keypress", function(e) {
    if (e.which == 32) {
        $(this).trigger("click");
        e.preventDefault();
    }
});

My question: Is there a reason not to do this? I'm a little reluctant to override the browser's default behavior on something as basic as this, but since I'm already abusing the link tag to make it look like a button, at least this way I'm not violating the user's expectations any further.

Answer 1

There are the standard usability concerns.

I think 'looks like' is key here. If someone is using a screen reader they will 'see' a link and act appropriately.

If someone has javascript turned off the jquery function (obviously) won't run and they will also get link behaviour.

Obviously you've already done the soul searching(!) over using a link like a button so it is a case of dealing with these two cases - screen reader and non-javascript.

If you can't also simulate the button behaviour (on a link) for these two cases then you will be offering different people a different experience - which is a good reason not to use the function. Either the spacebar should fire every use of these link/buttons or none of them.

Answer 2

I think the most important standard to maintain is not the browser's behaviour, but rather the user's expected response.

If you have overriden the display of links by turning them into buttons, the user must be able to treat those "buttons" exactly as they would if it were a real button, otherwise you will confuse and irritate users who have spent years with this "learnt" behaviour.