U.S. Department of Energy - Energy Efficiency and Renewable Energy
Communication Standards and Guidelines
Coding Navigation and Other Links
When designing, redesigning, and maintaining Web pages, follow these guidelines.
General
- Make sure that all links work throughout the site, including text, graphical, and mailto links.
- Code all links on the EERE server as relative to the root or relative to the document. Do not hard link to the live or development server (e.g., to http://www.eere.energy.gov/).
When H2 headers are used as links, they should appear as the H2 above. The H2 linked header uses the following styles and this red arrow graphic  . You may need to add these styles to your main style sheet and the arrow to your images folder. h2 a:link {text-decoration:none;color:#990000;}
h2 a:visited {text-decoration:none;color:#990000;}
h2 a:hover {text-decoration:underline;color:#000066;}
Code the linked H2 as follows:
<h2><a href="mylink.html">H2 Linked Header Example</a> <img src="/images/h2_red_arrow.gif" width="5" height="9" alt=""></h2>
The use of "Back to Top" anchor links is discouraged unless a document is very long. If used, use the .backtotop class to format as shown below. Always use the phrase "Back to Top". /* Back to Top Anchor Link */
.backtotop {
text-align: right;
font-size :70%;
}
.backtotop A:hover {
color: #990000;
}
.backtotop :link, .backtotop :visited {
color : #000066;
}
Example: <p class="backtotop"><a href="#content">Back to Top</a></p>
Skipping Repetitive Navigation
Repetitive navigation is defined as navigation that appears throughout a site (or at least several pages), such as the top and left navigation in the EERE template. Anchor links to skip navigation are built in to the RedDot template so no additional coding is needed. For sites not in RedDot, use an anchor link immediately after the <body> tag to skip past repetitive navigation. This can be hidden from sighted visitors by using the .hide style in the EERE style sheet.
<body>
<a href="#content" class="hide">Skip navigation to main content</a>
[navigation code]
<h1 id="content">Geothermal Energy</h1>
Image Maps
Client-side image maps should be used instead of server-side image maps if at all possible. If you must use a server-side map, provide a text alternative on the page for all links.
Client-side image maps allow the use of alt descriptions to give the user information about each link. Alt descriptions are required to be included with the use of client-side maps.
|