Using ACCESSKEY To Increase Accessibility Navigation

Donald F. Evans

Sept 1, 2006

Question

How can I use ACCESSKEY to increase ease of navigation for screen reader users and for keyboard only users?

Answer

ACCESSKEY attribute can be used in forms and links. It allows the user to do with the keyboard what other users might do with the mouse. You can move focus to a link, move to a form field, change a radio button, etc. It has some real application providing "Jump Keys" to help people move around the web app. As an example, it could be use to provide a quick key to get a user to the content of a webmail app.

By coupling our techique for hidding text off the screen with an ACCESSKEY, you can simulate moving focus directly to any area of the screen. The user might use a "Jump Key" to move to the content area of a webmail app and then use the arrow downkey to read the email. This would save many keystrokes. Our best practice for H tags provides a similiar technique in certain screen readers and some browsers.

Example

Notes:

  • The links below contain accesskeys. When the accesskey is pressed, focus is moved to these links and Jaws speaks them very well.
  • Each link points to a book mark somewhere furthur down the page. When the link is executed, focus is moved to the bookmark and Jaws will follow the focus, so when you press the arrow down key, it will begin reading at the correct place.
  • Using an accesskey on a bookmark does not work. The A tag must have an HREF attribute. In it's simplest form the A or Anchor tag takes one of two forms. That of an Anchor or that of a Link. An Anchor is also called a Bookmark and contains a NAME but no HREF in the attribute list. A link uses an HREF in the attribute list. So, if an Anchor uses a NAME, it is a bookmark or Anchor, and if it uses an HREF it is a LINK. ACCESSKEY will not work with a bookmark. Neither IE or Jaws will move focus to an A tag without an HREF attribute.

  • Top Link
  • Middle Link
  • Bottom Link
  • Page Notes

    This is a content paragraph at the top of the page. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    This is a content paragraph in the middle of the page. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    This is a content paragraph at the bottom of the page. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

    Code:
<span>
<a name="notes" id="notes"></a>
<p>
Notes:
<li>The links below contain accesskeys.  When the accesskey is pressed, focus is moved to these links and Jaws speaks them very well.
<li>Each link points to a book mark somewhere furthur down the page.   When the link is executed, focus is moved to the bookmark and Jaws will follow the focus, so when you press the arrow down key, it will begin reading at the correct place.
<li>Using an accesskey on a bookmark does not work.  Although IE will move focus to the bookmark, Jaws does not follow the focus.
<li>In it's simplest form the A or Anchor tag takes one of two forms.  That of an Anchor or that of a Link.  An Anchor is also called a Bookmark and contains a name but no href in the attribute list.  A link uses an Href in the attribute list.  So, if an achor uses a name, it is a bookmark or anchor, and if it uses an href it is a link.
</span>

<br>
<br>
<li><a href="#top"    accesskey="t">Top Link</a>
<li><a href="#middle" accesskey="m">Middle Link</a>
<li><a href="#bottom" accesskey="b">Bottom Link</a>
<li><a href="#notes" accesskey="n">Page Notes</a>

</span>

<span id="topspan">
<a name="top" id="top"></a>
<p>
This is a content paragraph at the top of the page.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>

<span id="middlespan">
<a name="middle" id="middle"></a>
<p>
This is a content paragraph in the middle of the page.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>

<span id="bottomspan">
<a name="bottom" id="bottom"></a>
<p>
This is a content paragraph at the bottom of the page.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>

    • Other Resources