Links and Navigation
Page Contents
Required Readings
The readings are on the WebAIM web site.
- Read the article "'Skip navigation' links" at http://webaim.org/techniques/skipnav/
- Read the article "Links and Hypertext" (all 3 pages) at http://webaim.org/techniques/hypertext/
Creating Effective Navigation
Many people have written many different opinions as to what constitutes "effective" navigation on the web. For the purposes of this class, I'm going to keep it quite simple. Here are the two requirements:
- Create the navigation using an unordered list.
- Provide a visual cue for users to know which page they're on.
Unordered lists
When creating your main site navigation, create it using a bulleted list, then use CSS to apply styles to the navigation. The sample web sites (Abigail's web sites) use this strategy. Other sites use this strategy as well, such as WebAIM.org, A List Apart, Microsoft.com, George Mason University, etc.
Visual Cues
You want to provide visual cues to sighted users that let them know where they are within the web site. You can do this by highlighting the text of the "active" page, or changing the background color of the highlighted tab, or using some other similar cue. Here are a few examples of sites that do this:
Notice that all of these examples use slightly different visual techniques. Some of them might be more effective than others, but it does not matter what technique you use, as long as users can interpret it without having to think about it.
