Begin site navigation:
End site navigation.
Electronic Braille notetaker. Hyperlinks are the fundamental essence of the World Wide Web. Originally, HTML was designed as a simple document management language, and hyperlinks were used to link content from one document to another. The technology behind the language fostered a collaborative environment, permitting researchers in different buildings, offices or countries to share, view and comment on documents.
Today, the World Wide Web is quite different, but links still serve the same purpose. Links call up different Web sites, documents, applications, rich media, files, e-mail addresses, and more. Because there are so many ways to use links, it is important to consider the variety of visitors to your site and to ensure that your links are descriptive and clearly identifiable.
Links can be confusing for some users. For example, when a series of link names are spoken by a screen reader, the names can run together as one long sentence, which makes it hard to distinguish one link from another. Links can also be troublesome targets for persons who have difficulty controlling a pointing device. Placing long lists of text-based links close together in rows or columns increases the probability of a mouse error. Additionally, enclosing text links in brackets, braces, parentheses or other punctuation can be confusing or distracting to most users.
A method shall be provided that permits users to skip repetitive navigation links. [Section 508, Part 1194.22, Paragraph (o)]
Clearly identify the target of each link. [W3C WCAG 1.0, Guideline 13.1, Priority 2]
Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. [W3C WCAG 1.0, Checkpoint 10.1, Priority 2]
Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [W3C WCAG 1.0, Checkpoint 10.5, Priority 3]
A variety of methods are required and recommended to ensure that your links are meaningful and easy to access by the largest audience possible. Below are some techniques based on link type.
Place navigation links and buttons in a consistent location throughout your site. Provide a way that
permits users to skip repetitive navigation links. Navigation menus at the top of the page and on the
left-hand side of the page are usually the first thing someone encounters on a page. For
screen-reader users, this means having to hear a number of links on every page before reaching the
interesting content of a page.
To do this, create a 1-pixel transparent GIF and place it before the navigational elements. In the ALT
attribute for the GIF, use verbage such as "Skip the navigation bar." Assign a URL to the GIF that
jumps users to an anchor tag placed elsewhere on the page that designates the main content of the
page. The link will be invisible to sighted users, but assistive technology devices will read the
ALT text and allow users to activate the link.
Technique:
<a href="#content"><img src="/images/spacer.gif" alt="skip to content" /></a>
Use descriptive, concise link names. Links should make sense when they are read one at a time or out
of context from the rest of the content on the page. Most screen readers will pull out all of the
links of a page, providing users with a way to navigate quickly. Just imagine trying to make sense
out of a list of links like this:
Click here
Click me
Click this
Web developers should clarify the target of a link with an informative link title using the TITLE attribute. This is particularly appropriate for navigational link elements.
Technique:
<a href="default.asp" title="City and County of Denver Home Page">Home</a>
Provide sufficient space between links to assist users who have difficulty with fine motor movements. Providing space around links, and using separators between, also makes it easier for sighted users to differentiate among links. The pipe character ( | ) is a good alternative for separating consecutive links, and most screen readers have adapted to reading this as a break between navigational links. Avoid enclosing text links in brackets, braces, parentheses or other punctuation.
Avoid using pop-up windows or causing a hyperlink to open in a new browser window. This changes the focus of the active browser window, which can be very confusing to users, especially to those who can't see that this has happened. If you are going to open a link within a new browser window, inform the user prior to the hyperlink.
Technique:
DenverGov.org Home
DenverGov.org Home
(Note: this link opens in a window.)
Mailto links are helpful to provide visitors with a quick and convenient method of sending feedback or requesting information. However, it should not be assumed that clicking on a mailto link will cause an E-mail client to launch automatically. Some systems may be incapable of this type of automated function, while others may simply not be set-up to do so. Users should have access to the full E-mail address for mailto links, which they can use to manually address a message.
Technique:
E-mail
denelect@ci.denver.co.us
When appropriate, links within text that refer to other pages or Web sites should display the URL. For example, if you are including a list of links to which you are referring a visitor, include the name of the organization and the full URL. Doing so helps "market" that URL to visitors, and also displays the URL when the page is printed whereas otherwise it would not.
Technique:
Denver International Airport (DIA)
www.flydenver.com
Presenting a color distinction between active and visited links helps people scan pages quickly. Without knowing what links one has visited on a page, redundant clicks may be made to try to access information. Also, some browsers store visited link information, which can be helpful to Web surfers if they want to revisit a page, but cannot remember which link they clicked on.
Links that take a visitor outside of the DenverGov.org domain should be clearly identified.
Technique:
City-related link:
<a href="/external.asp?ctype=1&link= http://www.denverartmuseum.org">www.denverartmuseum.org</a>
External link:
<a href="/external.asp?link=http://www.cnn.com">www.cnn.com</a>
