Styling Access Keys in Web Forms






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 id="msgform" name="msgform" method="post" action="/">
 <label for="fmtitle" accesskey="i">T<em>i</em>tle</label>
 <select name="fmtitle" id="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" id="fmname" />
 <label for="fmemail" accesskey="e"><em>E</em>mail</label>
 <input type="text"  name="fmemail" id="fmemail" />
 <label for="fmstate" accesskey="a">St<em>a</em>te/Province</label> 
 <input type="text" name="fmstate" id="fmstate" />
 <label for="fmcountry" accesskey="y">Countr<em>y</em></label>
 <input type="text" name="fmcountry" id="fmcountry" />
 <label for="fmmsg" accesskey="m"><em>M</em>essage</label>
 <textarea name="fmmsg" id="fmmsg" rows="5" cols="14"></textarea>
 <input type="submit" name="submit" value="send" class="submit" />
</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/.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows