Research has shown that sighted users typically scan pages for links to help them find what they’re looking for. People using screen readers can do something similar by hearing a list of all the links on a page. Because of this, link text must clearly explain where a link will take users. It should provide enough context to help users make an informed decision about which links they wish to follow.
Descriptive links will:
- Improves the readability of your content, since everyone will be able to scan for links & find what they’re looking for.
- Provide context to individuals with low or no vision who may be using a screen reader or other assistive technology.
- Help improve search engine optimization.
Meaningful Link Text
Ensure the text you add links too is meaningful and descriptive. It should accurately describe the link’s destination and/or purpose (e.g. “read more about best practices for creating accessible links“). Site visitors shouldn’t have to read surrounding text to understand where a link leads. This is both time consuming and frustrating.
Link text should make sense out of context. Avoid uninformative link phrases such as:
- click here
- read more
Screen reader users navigate websites using a variety of techniques. One of those is to pull up a list of links (a feature of most screen readers) and navigate through that list. Given this, link text should be able to stand alone independently of its context. Links like “click here” and “more” are meaningless out of context.
Another feature that screen reader users may take advantage of is the ability to order page links alphabetically. This is particularly useful if the user already has a specific link in mind, such as a contact form or staff listing. It is important to keep the most important keywords at the beginning of your link text. “Staff listing” will appear alphabetically as expected. “View our staff listing” will not.
Speech recognition users can click links with a voice command like “click” followed by the link text. Therefore it’s helpful to keep link text short and easy to say.
Links should be direct and avoid extraneous words when possible. For example, a link that says click here to access today’s weather can be shortened to today’s weather, or check out the UNC Online home page could be shortened to UNC Online.
SEO (Search Engine Optimization)
From an SEO perspective, an accessible website helps your site ranking. Search engines such as Google operate much like a blind person using a screen reader. The robots that index your site only understand text. Using descriptive link text that is helpful to your site visitors will also provide details to the search engines and improve the overall SEO of your website.
In other words poor link text hurts your sites usability, accessibility, and SEO.
URLS as Link Text – Don’t do This
Don’t display the actual URL as the link text. Screen reading software will read every single character of the URL to the listener.
Correct: Urology Residency Program
Opening Links in New Tabs or Windows – Bad for Accessibility
We, along with the World Wide Web Consortium (W3C) do not recommend opening links in new tabs or windows. The practice of opening a new tab without the user’s consent takes the control out of the user’s hands. This can be disorientating to screen reader users or users with cognitive disabilities.
Visitors can always choose to open links in a new browser window or tab if they want. For example, they can right-click on a link and select “Open Link in New Tab” or “Open Link in New Window.”
If you must do it, then warn users before they click on a link that it will open in a new tab. You can use text like “opens in a new tab.”
Why opening a new tab is bad for accessibility
- New tabs are unexpected, unpredictable, non-default browser behavior.
- New tabs break back-button history navigation.
- New tabs are disorienting for some visually impaired users.
- New tabs take away user control. Users can opt-in to a new tab with keyboard or mouse controls, but cannot opt-out.
Unacceptable reasons to open a new tab
- No: A link is “external”, and leads to another website or domain.
- No: The website maintainer wants to avoid losing user traffic to other sites.
- No: A new tab will be convenient for the user (other than the two acceptable reasons mentioned below).
Acceptable reasons to open a new tab
- Yes: Navigating away will disrupt a multi-step workflow. For example, context sensitive help links on a form.
- Yes: Navigating away will break a secure login session. For example, a banking transaction session.
Links should be visually apparent to users. Links should be underlined and/or a different color than the text surrounding it. If these styles are not used, it can become difficult for a user to discern a link from the surrounding text and miss out on additional information or resources. Underlining or a different color are especially important to users on mobile devices where hover and focus features are not available.
Avoid Misleading Cues to Click
Ensure that other items on your page do not look like links. For example, underlining text or coloring text blue can easily confuse site visitors. In other words, items that are not links should not have characteristics that suggest that they are links.
Sometimes, images have links wrapped around them. In these instances, the screen reader will read the image’s alternative text as the link text. The alt text must include both the content and function of the image. If the image is decorative, then only function is necessary. A screen reader will read the file name if no alt text is provided.
Example Alt Text for a Decorative Image could be something like “Staff Listing.”
Example Alt Text for an Informational Image could be something like “Diagram showing 200 inches of total snow; linking to monthly subtotals.”
Links to Non-HTML Resources
When providing a link to a non-HTML resource such as a PDF, Word document, PowerPoint, etc., the link text should reflect this. If you are providing links to large file downloads, e.g., greater than 3MB, this information would be useful to include in the link text as well.
Mastering Web Accessibility: Generic Links
This video by Boise State shows how generic links cause accessibility issues and demonstrates two easy steps to write more accessible links.
2 min. 3 sec.
The Web Content Accessibility Guidelines (WCAG) 2.0 was adopted in 2008 and developed by the World Wide Web Consortium (W3C) as the governing standards for electronic and information technologies used within federal departments and agencies.
- 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
- WCAG 2.0: G200: Opening new windows and tabs from a link only when necessary – The objective is to limit the use of links or buttons that open new windows or tabs within Web content.
- WebAIM Links and Hypertext – This helpful resource gives a brief introduction to links and hypertext.
- Accessible Link text (Penn State) – Look at examples of inaccessible and accessible link text and review guidelines for in-text links.
- Screen Reader Demonstration – A short video by the University of Minnesota demonstrating a screen reader, reading through accessible and inaccessible links.