Minimal example of Access Key visualization

Introduction

From the HTML 4.01 Specification, regarding access keys:

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

Visualization

Current graphical browsers do not display the access keys specified in a HTML document. You can do this client-side with no scripting whatsoever, using CSS2. Currently (July 2002) only Mozilla and Opera seem to support it. It uses CSS2 attribute selectors and the :before and :after pseudo-elements.

Example

The code

	<!-- [ ... HTML ... ] -->
	
	<!-- insert this in your document head or style sheet -->
	<style type="text/css">
	/* Select all elements that have their accessKey attribute set */
	*[accesskey]:after
	{
		/* Possible server-side sniffing before writing the style sheet:
		        if (platform == "mac") ⇒ "Cmd+";
		   else if (platform == "win") ⇒ "Alt+";
		   --- 'else' (other platform+key combinations) ad nauseam ---
		   else ⇒ "Access Key+";
		*/
		content: "[Alt+" attr(accesskey) "]";
		margin: 0 .5em;
		padding: 0 .25em;
		/* ... */
	}
	</style>

	<!-- [ ... HTML ... ] -->

	<form action="f00bar">
	<fieldset>
		<legend>Example form</legend>
		<a href="http://www.google.com/" accesskey="1" />a link</a><br />
		<input type="text" id="txt" accesskey="2" value="a text box" /><br />
		<input type="button" id="btn" accesskey="3" value="a button" onclick="alert('f00!');" /><br />
	</fieldset>
	</form>

	<!-- [ ... HTML ... ] -->

The result

Conclusion

CSS2 offers a mechanism for displaying the access key of a HTML element. Above is but a basic example. Experiment with different style settings, but beware: browser support for generated content is still far from optimal.