Summary
You can improve both the usability and accessibility of links by making them concise, descriptive, and meaningful out of context.
Links are one of the most basic elements of any digital experience. Learning to write good link text can improve your emails, web pages, course websites, documents and digital content.
Impact
Well-written and well-placed links help both sighted people and those who use screen readers or other adaptive technology to consume content. 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 touching a button and hearing a list of all the links on a page. Well-placed links provide enough context to help all users make an informed decision about which links they want to follow.
Dos and Don'ts
You can improve both the usability and accessibility of links in online documents and webpages by linking text that is meaningful out of context, concise, and descriptive.
Do Link Meaningful Text
Embed most links within other text. Write as you normally would, then highlight the text you want to make into a link, and insert the link. In many applications, the shortcut is control and K on a Windows machine or command and K on a Mac.
Type out email addresses and then link the email address.
Example
There are several things to consider in creating accessible link text.
Learn the difference between accessible, usable, and universal design.
The article, "The Veil of Ignorance", challenges readers to imagine awakening in a new reality in which they are no longer the person they were with a potentially new social/economic status, gender, ethnicity, appearance, disability or combination. How would this impact the readers approach to design, from building and devices to the Internet?
Don't display the actual URL as a link.
Adaptive technologies users will have to listen while their screen reader reads every single character of the URL.
Don't link to an email address in other text. For example, if you link the name of the person or organization to an email address, users won't automatically know that the link will open an email client rather than a web page, PDF, or other document.
Example
See above for the correct way.
There are several things to consider in creating accessible link text. Learn more.
Click here to learn the difference between accessible, usable, and universal design.
The article, "The Veil of Ignorance", challenges readers to imagine awakening in a new reality in which they are no longer the person they were with a potentially new social/economic status, gender, ethnicity, appearance, disability or combination. How would this impact the readers approach to design, from building and devices to the Internet?
Clearly explain in the linked text what information your readers will find when they click on a link. Help them scan the link quickly to determine whether they want to click through and read it.
The linked text should match, in part or in whole, the title of the page returned by the link.
Example
Learn best practices for writing links.
Don't
Don't make users have to click a link just to find out where it goes. Avoid link text such as:
- Click here
- More
- Read more
- Listen to a sample
- Info
Don't link entire sentences. The longer link is more likely to break across lines on the webpage or document, making it look like two links, and it may also repeat most of the information found on the linked page.
Example
Multiple occurrences of a link in the content of a page can result in undesired consequences.
- Duplicate links lead users to wonder whether both instances point to the same resource.
- Duplicating links can significantly increase the number of links on a page through which screen reader and keyboard-only navigation users must navigate.
- Most screen readers and screen magnification applications include a feature for creating a simple list of links on a page, which may lead to confusion when there are multiple occurrences of the same link text.
Do
Repeat links only in instances where they make sense or are mitigated, such as multiple "Back to Top" links and links in breadcrumbs, menus, and other dynamic content.
Don't
Don't include link text or code multiple times for the same link, such as by including alternative text (alt text) for a logo and then repeating the alt text in linked text.
Make links in the main content look like links. Browsers underline them by default, and users understand what that means.
Make it visually apparent that users can click on links in menus and other navigation areas.
Don't
Don't style links to look like buttons.
- Links go to new pages.
- Buttons submit information or perform another action.
- Buttons are operable with the spacebar or enter key.
Examples
- People who use voice control software may see something that looks like a button and tell the software to "click the button," but the software may not know to select it if it is really a link.
- People with low vision who use screen reader software may see something that looks like a button, but hear the screen reader say "link" and be confused.
- If a person using a screen reader calls the help desk and gets instructions to "click the button" that's really coded as a link, they could have trouble finding it.