Recipe 7.16. Styling Access Keys in Web Forms

Problem

You want to create a visual indicator to show which characters are access keys in a form.

Solution

Use the descendant selector to isolate characters within the label tag that represent access keys.

First, create a CSS rule with a selector that states the text within an em tag that are within a form are underlined:

form em {  text-decoration: underline;  font-style: normal; }

Wrap an em element around a letter in the label element that represents the access key:

<form  name="msgform" method="post" action="/">  <label for="fmtitle" accesskey="i">T<em>i</em>tle</label>  <select name="fmtitle" >   <option value="ms">Ms.</option>   <option value="mrs">Mrs.</option>   <option value="miss">Miss</option>   <option value="mr">Mr.</option>  </select>  <label for="fmname" accesskey="n"><em>N</em>ame</label>  <input type="text" name="fmname"  />  <label for="fmemail" accesskey="e"><em>E</em>mail</label>  <input type="text"  name="fmemail"  />  <label for="fmstate" accesskey="a">St<em>a</em>te/Province</label>   <input type="text" name="fmstate"  />  <label for="fmcountry" accesskey="y">Countr<em>y</em></label>  <input type="text" name="fmcountry"  />  <label for="fmmsg" accesskey="m"><em>M</em>essage</label>  <textarea name="fmmsg"  rows="5" cols="14"></textarea>  <input type="submit" name="submit" value="send"  /> </form>

Discussion

An access key allows users with disabilities to navigate quickly through sections of a web page. However, access keys also allow users without limited surfing ability to make use of access key navigation. By underlining characters that represent access keys, users can quickly navigate a form without switching to a mouse or other pointing device.

Access keys are supported in Safari, Internet Explorer for Windows 4+, Mozilla, Firefox, Netscape Navigator 6+, and Opera 7+.

See Also

For more information about styling access keys see http://www.alistapart.com/articles/accesskeys/.