How do I set up an access key on my links and form fields?

Question: How do I set up an access key on my links and form fields?

I got the following question from MissPete:

I have been noticing in the HTML the use of access keys, I was wondering if you could explain to me how and why they work, and are used.

Answer:

What you're looking for is not specifically CSS, but rather an HTML attribute - accesskey.

You can use the accesskey attribute on the a, area, button, input, label, legend, and textarea tags.

To use an accesskey, you place the attribute inside any of those elements on your page. Then when your customers hit the Alt or Cmd key in conjunction with the letter you've defined, that link is activated or if it's a form field, that form field gets the focus.

For example, you might have a link to your home page that you want accessed through Alt-h (or Cmd-h on a Mac). You would write:

<a href="/" accesskey="h">Home</a>

Or if you wanted to create a first name field on your form and have it be accessed with the Alt-f (Cmd-f) key, you would write:

First Name: <input type="text" id="firstname" name="firstname" accesskey="f" />