Making hypertext links accessible is one of the most basic and most important aspects of web accessibility. Some types of links are more accessible than others, and some types of links are completely inaccessible to people with certain types of disabilities. Because links are so basic to the functionality of web content, inaccessible links are one of the most severe barriers to overall accessibility.
Links must have a non-empty
href attribute in order to be considered true links and to be accessible to keyboard users.
Screen Readers and Links
Screen readers generally inform users that a piece of text (or a graphic) is a link
Most screen readers say “link” before each link. For example, a “products” link would be read as “link products” by JAWS. This sometimes becomes an issue with graphics used as links. The
alt text for a graphic does not need to say “link” or “link to.” Otherwise, JAWS users will hear “link graphic link to Products,” which is redundant.
Screen reader users often navigate from link to link, skipping the text in between
Tabbing from link to link is a way of skimming web content, especially if users are trying to find a particular section of a web site.
Links should make sense out of context. Phrases such as “click here,” “more,” “click for details,” and so on are ambiguous when read out of context. At the same time, it would be overkill to ensure that every detail about a link destination is discernible by listening to the link context. Users wouldn’t want to hear “Products page on which a list of all of our products are presented, including software products and training products, with a list of prices and availability by region (this page uses the same navigation template as the page you are now on).” Perhaps a better alternative would be a link that simply says “Products.”
Place the distinguishing information of links at the beginning of a link. Don’t put extra information first, For example, don’t say “Link opens in a new window: Products.” Instead, say “Products (opens in a new window)” (or something along those lines). This is especially important in this example if several links open in a new window. With the explanatory information first instead of the main information, screen reader users would have to listen to the phrase “link opens in a new window” over and over again. They will have a harder time distinguishing between different links, or at least it will take them longer.
Avoid uninformative link phrases
Links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as:
- click here
- read more
- link to [some link destination]
In fact, the phrase “click here” is unnecessary, even if it precedes a more meaningful phrase. For example, a link that says “click here to access today’s weather” can be shortened to “today’s weather.” In some cases it may make sense to precede a link phrase with “more” or “read more about,” (e.g. “more about global warming”), but if these extra words can be avoided, it is probably best to avoid them (e.g. “global warming” may convey the same meaning as “more about global warming,” depending on the context).
Links should never be empty. They must always contains text or images with alternative text. An empty link can be navigated to, but it does not present any content. This can be very confusing for keyboard and screen reader users.
URLs as links
Web addresses, or URLs, present two types of challenges:
URLs are not always human-readable or screen-reader friendly. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person. In most cases, it is better to use human-readable text instead of the URL. The human readable link Constructing Accessible Web Sites is more user-friendly than the link to purchase the book by the same title on Amazon.com, which consists of a 108-character link full of numbers, slashes, and text that is not very human-readable. (http://www.amazon.com/exec/obidos/ASIN/1590591488/qid=1116957951/sr=2-1/ref=pd_bbs_b_2_1/103-5755258-8204633)
Does this mean that URLs should never be used as links? No. If the URL is relatively short (such as a site’s homepage), the URL may be used as the link text. The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.
Images that are the only thing within a link MUST have alternative text.
If a linked image does not have alternative text, a screen reader may read the image file name or the URL being linked to.
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.
When identifying the link file type, this additional content should be presented insidethe 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.
<a href="1040.pdf">Tax form 1041 (PDF)</a>
<a href="1040.pdf">Tax form 1041</a> (PDF)
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