In order to provide easy access to the information on each page of your site all navigations/menus must be made accessible for a variety of devices including browsers and screen readers. Users must also be able to access all links via the keyboard.

Note on Keyboard traps: If keyboard focus can be moved to a component of the page using a keyboard, make it so the focus can be moved away from that component using only a keyboard. If the user needs to do anything tricky (beyond standard’s or arrow keys) in order to get out of the keyboard trap, make it clear to them what they need to do.

Navigation/Menu Layout

Navigations/menus can be displayed horizontally and/or vertically. The determining factor is commonly the amount of screen real estate one has to work with.

Navigation samples

Navigation samples: a vertical navigation (left) and a horizontal navigation (right)

Proper Coding for Navigation/Menus

Regardless of the choice of layout all navigation/menu systems should use a list (either ordered or unordered) for basic structure.

<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

Text Based

  • Minimum requirement: All links should use live text.
  • Images may be used as background elements or as icons, but all link labels should be live text. This allows users to employ screen readers and/or increase link text size to assist readability.

Descriptive Links

  • Minimum requirement: The purpose of each link can be determined from the wording of the link text alone. For example: “To download brochure, click Here” should be replaced with “Download brochure”.
  • There are advanced techniques to provide link context to screenreaders when the visual design makes it absolutely unavoidable to have insufficiently detailed links, although this is still not best practice. For more information

Drop Down Menus

  • Minimum Requirement: Users can access menus and sub-menus without a mouse.
  • Why is it important? Keyboard and screenread users are able to access the website. This will also benefit the usability of multi-platforms development, such as touch technology.
  • For more information, see

Skip links

  • Minimum requirement: A mechanism is available to bypass blocks of content that are repeated on multiple web pages. They can be invisible to mouse users as long as they are visible to keyboard and screenreader users.
  • Ideally visible skip links should be incorporated into your design.
  •  For a clever way to make skip links only appear for screenreader and keyboard users, see http://webaim.org/techniques/skipnav/

Focus Order

  • Minimum requirement: Tabbing through links and input fields on a web page follow a logical order.

Show Focus

  • Show Focus: Specify a value (border, background color, etc.) for the :focus selector for all links.
  • What is it? The :focus selector is used  for styling an element targeted by the keyboard, or activated by the mouse. If your site uses a style sheet reset, note that all :focus attributes may be turned off by default.
  • Why is it important? A user relying on keyboard navigation will use their keyboard’s tab key to move from link to link or anchor to anchor. There needs to be a visual indicator on the selected link that marks their current location on the page. The indicator should be visible according to the contrast guidelines elsewhere in this document.
<style type="text/css">

a:focus {
background:yellow; 
color:red;
}

</style>

Breadcrumbs

Because they cannot see the layout of the site visually impaired users may be confused by breadcrumbs. To a screen reader the links suddenly appear in the middle of a page. In specialized cases like this Invisible Content may be an appropriate solution. (this may need a little clarity, I’m confused by the solution here)

Hot spots on client-side image maps

Assign text to each image map “hot spots” on client-side image map. This feature means that someone using a screen reader can easily identify and activate regions of the map.

Steps to creating a client-side image map:

  1. Identify an image for the map. First, an image must be used in a client-side image map. This image is identified using the tag. To identify it as a map, use the “usemap” attribute.
  2. Use the tag to “areas” within the map . The tag is a container tag that includes various tags that are used to identify specific portions of the image.
  3. Use tags to identify map regions . To identify regions within a map, simply use tags within the container tags. Making this client-side image map accessible is considerably easier to describe: simply include the “ALT” attribute and area description inside each tag.

The following HTML demonstrates how to make a client-side image map:

<img src=”navbar.gif” border=”0″ usemap=”#Map”> <map name=”Map”> <area shape=”rect” coords=”0,2,64,19″ href=”general.html” alt=”information about us” > <area shape=”rect” coords=”65,2,166,20″ href=”jobs.html” alt=”job opportunities” > <area shape=”rect” coords=”167,2,212,19″ href=”faq.html” alt=”Frequently Asked Questions” > <area shape=”rect” coords=”214,2,318,21″ href=”location.html” alt=”How to find us” > <area shape=”rect” coords=”319,2,399,23″ href=”contact.html” alt=”How to contact us” > </map>

Additional Resources

Keyboard accessible drop-down menus:

Dropdown Menu Test: Customized OAA Menubar
Courtesy of Terrill Thompson from the University of Washington, license statement pending

ARIA Menu Demo: Vertical Dropdown

ARIA Menu Module R2.4

Courtesy of Bryan Garventa, available to use under the MIT open source license.