Using Accesskey to Jump to Areas of Content to Provide Better Accessiblity

On the CompuServe Forums, we have a requirement to provide a "Jump Key" that will assist screen reader users in easily reaching the message area of the page. Ideally, Alt+J could be used from anywhere on the page to move Jaws focus directly to the message content. Also, we would also like to have Alt+N to execute the Next Message button, Alt+P to execute the Previous Message button, and Alt+R to execute the Reply To button.

Answer

The following example uses the AccessKey attribute of the Anchor tag to accomplish this requirement.
The following line:

<a name="#message"><a href="#message" accessKey="J" class="offScreen">Message Area</a></a>

Using Alt+J causes the A HREF to execute and move focus to the A NAME.
When a screen reader user looks at a list of links, this shows up as meaningful text, "Message Area".
The link text is hidden off the screen so it does not appear to the visual user.
Using accesskey with the accesskey attribute on the button's anchors is self explanatory.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jump Key Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
	.offScreen{
		position:absolute;
		overflow:hidden;
		width:1px;
		height:1px;
		top:-10px;
	}
</style>
</HEAD>
<BODY>
<div name="content" id="content">
<!--
The A HREF is needed to use the accessKey.
Once an href is added to the page, we need the A NAME= to point the href to something.
-->
<a name="#message"><a href="#message" accessKey="J" class="offScreen">Message Area</a></a>
<p>
This is the content area that will contain the text of the message.<br>
Using the Alt+J keys will jump you to this area.
</p>
</div>
<div name="buttons" id="buttons">
<p>
This next area contains three buttons.  Next, Previous and Reply.  You can jump to the buttons using their access keys, Alt+N, Alt+P and Alt+R respectively.
</p>
<a href="/next.html" accesskey="N"><input type="button" name="next" value="Next"></a>
<a href="/reply.html" accesskey="R"><input type="button" name="reply" value="Reply"></a>
<a href="/previous.html" accesskey="P"><input type="button" name="previous" value="Previous"></a>
</div>

</BODY>
</HTML>

Using Accesskey to Jump to Areas of Content to Provide Better Accessibility

Donald F. Evans

May 2005

Question

Answer

Example

Other Resources