WebAIM - Web Accessibility In Mind

Links and Hypertext
Hypertext Links

Links to Anchors on the Same Page

Links are often used to jump to another location on the present page. The Article Contents links above are an example. In-page links can provide great accessibility functionality, particularly with "Skip" links to bypass page navigation or links to jump over lengthy lists of links or other complex or potentially confusing information.

Screen readers generally identify in-page links by reading "in page link" in association with them. However, sighted users may not be aware that a link jumps to another location within the same page. The user might be confused when the browser page does not change. In-page links should generally be presented so it is visually and/or contextually apparent that they are in-page links.

Links to Non-HTML Resources

Users should generally be alerted to links that lead to non-HTML resources, such as PDF files, Word files, PowerPoint files, and so on. However, there is some debate as to whether the content author or the browser should be the one to alert the user. The trouble is that none of the browsers or screen readers currently alert the user at all, so the debate is more theoretical than practical.

A link to a PowerPoint slide show, for example, could say "Third quarter sales projections (PowerPoint)" or something similar, and a link to a PDF file could say "Tax form 1040 (PDF)" or something similar.

Important

When identifying the link file type, this additional content should be presented inside the link, rather than just after it, so that the information is presented with the link if a screen reader users navigates by links or reads a link list.

Use
<a href="1040.pdf">Tax form 1041 (PDF)</a>
rather than
<a href="1040.pdf">Tax form 1041</a> (PDF)

Links to New Windows, Pop-ups, Other Frames, or External Web Sites

There is much debate about the merits of links that open in new windows, pop-up windows, or other frames. Some people would like to ban them entirely. Others concede that they can be appropriate at times, but nearly everyone agrees that users ought to be alerted when the link does not open in the current window or frame. The accessibility issue is that some users can get confused with the new windows or tabs. Newer screen readers alert the user when a link opens a new window, though only after the user clicks on the link. Older screen readers do not alert the user at all. Sighted users can see the new window open, but users with cognitive disabilities may have difficulty interpreting what just happened. Then when the try to click on the Back button in the browser, nothing happens, because there is no previous link to go back to in a new window or tab.

As with links to non-HTML files, browsers could potentially perform the function of alerting users, but current browsers do not perform this functionality. It is up to the authors to alert the users. Authors can add this information to links by placing it in parenthesis at the end of the link, for example by saying "Biographical sketch (opens new window)." Some sites use icons to convey this same message. Some of the icons used by various web sites appear below.

one piece of paper on top of another, with a red arrow on the right pointing to the right   Similar to the previous icon, but with a blue arrow instead of a red arrow   a box with an arrow pointing outward and upward diagonally to the right   A single piece of paper with an arrow pointing to the right   A piece of paper on top of another piece of paper   two pieces of paper with an arrow between them   A red box overlayed on top of a gray box   An red arrow pointing out of a gray box   A blue circle with a red arrow pointing out of it to the right   A world globe with a ring around it, similar to Saturns ring   An red arrow pointing to a world globe

Sometimes these icons are used to indicate that a link is to an external site, rather than that it opens a new window, so there's potential for some confusion. As with file types above, these icons (with appropriate alternative text) must appear within the link rather than just after it.

Note

Sometimes background images (often in the form of CSS sprites) are used to present these icons. Because background images do not present text and cannot be given alternative text, additional effort is required to ensure that screen reader users are presented the same content that sighted users see in the background image.

See our article on alternative text for more details.

Groups of Links

Adjacent links

When using a screen reader, it can sometimes be a little difficult to tell when one link ends and where an adjacent link begins. JAWS says "link" before each link, which minimizes this problem, but it can be a little more difficult with other screen readers. One solution is to provide a non-link character between each link. The vertical bar ( | ) is used quite often for this purpose. Another solution is to put the links in an ordered or numbered list. Screen readers tend to pause between list items, helping the user audibly distinguish between separate links.

Long lists of links

Long lists of links may be cumbersome to listen to if the person is interested in narrative content rather than navigational content. One method to get around this potential problem is to provide a "skip" link at the top that allows users to skip over the list of links. This is essentially the same concept as "skip navigation" links. On pages where the main content is navigational content (such as a table of contents), such a solution is probably unnecessary.

In many cases, users will have less trouble understanding long lists of links if the lists are broken into smaller chunks with descriptive headings. The smaller chunks present less of a cognitive load on all users, which can especially benefit users with cognitive disabilities.