Crawford Design

Logo

Navigation

Clear Meaningful Navigation

Navigation should be clear, meaningful and make sense when read out loud on its own or as part of a sequence. Avoid using meaningless language like “click here.” Link text should be short and descriptive and say something like “Employee Resources” or “Download Version 4.3.”

Navigation should indicate the current location on a Web site.

Keep Navigation Consistent

Navigation should be consistent. If the main navigation is at the left hand side of a web page, keep it there on every page. Don’t move the navigation around the page. Keep the formatting of the navigation consistent as well. If the background color of the navigation is red, keep the background color red on every page.

Differentiate Navigation from Surrounding Content

Clearly delineate navigation from the rest of the content. When someone looks at a web page, it should be quite obvious what and where the navigation is located. On the Employee Intranet the main navigation stands out and is clearly recognizable as navigation.

Adding a Header to the Nav

Make sure to label navigation with the header element. When someone with a screen reader visits a Web site he/she can list the headers and select then go to the navigation header.

Lists

Use lists to structure navigation. When screen readers encounter a list, it announces there is a list and how many items (links) are in the list. Lists are very easy to style and horizontal and vertical navigation can be created using lists.

Avoid Images

Avoid using image links for navigation. When a screen reader reads a list of links it will announce the word graphic with every link. This can get quite annoying to screen reader users especially when there is a long list of links.

Include a Search

For sites that are more than 50 pages, make sure to include search functionality and place it before the main navigation. One of the easiest ways for screen reader users to find content on a very large Web site is to read through search results rather than using navigation.

Navigation Belongs on Top

Put very little content before the main navigation of a Web site. In visual browsers, there can be more content before the nav, but in the XHTML structure the navigation should be right at the beginning of the page so screen readers encounter it first. A few elements that can be placed before navigation are a search box, an h1 and a skip to main content link.

Skip to Content

Adding a link at the top a web page that skips to the main content helps screen reader users skip over navigation.

Site Map

Be sure to include a site map for every Web site. This allows users to find pages without using search or navigation.

Breadcrumbs

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of web pages.

Focus

To help people navigate forms, tables of contents, or navigation, the ":focus" CSS puesdo class applies a style to an element when the user sets focus on it. Using it, for example, you can easily highlight the form element the user is currently typing in. Note that ":focus" is currently not supported in Internet Explorer (as of IE 8.0), but is partially supported in Mozilla and fully supported in Safari.

input:focus, textarea:focus{
background-color: lightyellow;
}

References

Top