Quicktips for Navigation
Link Tips
Make sure all the links are active. Download Xenu Link Sleuth and run it monthly to check for broken links.
Avoid vague link labels like “click here,” “read more,” “link to,” etc. Link labels should be unique.
Do alert the user if the link opens a new browser, or if it goes to a pdf or word document.
Avoid use of javascript links. Some older assistive technology does not use javascript.
Avoid hyperlinking an entire paragraph or using long text as a hyperlink. Screen reader users cannot skim and must listen to the entire text.
Consider using simple link labels that describe the destination. Be aware that links sometimes have a long string of numbers, slashes and text that are not easily understood. Also consider the needs of users that print your document. In a printed document, the url is unavailable when a simple link label has been used. It may be appropriate to do a friendly label with an active link, and place the url after the link in plain text in a parenthesis. For example Bobby (www.cast.org).
Use the tabindex attribute to control the order of the tabbing through the hyperlinks.
For the cognitively impaired, do not use underlines for any text that is not a link. When link underlines are removed with CSS, create a hover pseudo class to make it obvious to the user that text is a link.
Alt-text for image links explains the function of the link rather than a description of the image. It is not necessary to say “link to” or “image of” in your alt-text.
Navigation Tips
Use a vertical bar (|) or a list format to create a pause between link items when read by a screen reader. You can use CSS styles to remove the bullets and display the list horizontally.
Provide skip links wherever possible. Skip links “jump” over the navigation and start a screen reader at the main content. You can make skip links “invisible” to sighted users if required.
Don't use dropdown boxes for navigation unless you provide a ‘go' button.
Avoid 'fly-out' menus that rely on mouseover events.
Use non-breaking spaces (shown in the markup as ) surrounding the letters in an a-z list to make the link target larger for mobility impaired users. Alternatively, use CSS styles to create padding around each letter.
Use relative font sizes so the user can increase the text size locally. Due to the zoom capability of current browsers, some say that absolute sizes can be used. However, consider that a zoomed browser page is much more difficult to read than a page that has retained its width but increased its font size.
Only use client-side image maps, and make sure the link shape has alternative text for those who can't see the images.
Provide keyboard shortcuts by inserting an accesskey attribute. Use numbers instead of letters to avoid using alt-key combinations already in use by the browser software. If you must use letters, press the alt-key to see what letters are already being used in the menus. (IE uses F, E, V, A, T, and H, Mozilla uses F, E, V, G, B, T, and H.) Opera doesn't offer accesskeys, but it can read content out loud if the page is formatted according to their guidelines. “2” has sometimes been used to skip to the main content, and “9” has been used to go to the contact email or comments page. Access keys are not recommended, because Window Eyes and Jaws also make use of access key combinations, so the access keys you assign may not work.
If images are used for navigation, use a rollover image to provide feedback (for instance, an underline or glow). Be aware color-blind and low vision users need plenty of contrast. Make sure alt-text is provided or some users won't be able to navigate your site.
Use the link tag to point to previous and next pages in a series. These links are not visible in browsers like Internet Explorer. Alternate browsers alert users to these links to help navigate through your web site.
Parker Owens, Web Accessibility Coordinator, EKU, 254 Case Annex, Richmond, KY
(859) 622-2743, parker.owens@eku.edu
