Links in web content are commonly used to take users to other pages or documents to provide more information they might need.
Studies show that most users inevitably skim the page for links and headings, therefore your link titles should be punchy and clear with specific calls to action, even out of context.
Provide link text that identifies the purpose of the link. The link text should be unique and easy to speak out loud. Screen readers may only read the link text and not the surrounding text to help people navigate the site.
Title Attributes
The title attribute is used to provide additional information to help clarify or further describe the purpose of a link.
Link’s title attribute should be left empty if the link text alone can identify a link’s purpose. Use the title attribute when additional information is needed to provide users with more context about a link’s purposes.
Example:
- Find academic programs you are interested in.
The title attribute for this link would be title="Willamette University’s Academic Program Lists"
How to write link text:
- Link text is required to accurately reflect the target and purpose of the link.
- Links should make sense out of context.
- If the link takes one to a document or a web application, the name of the document or web application describes the purpose of the link
- Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context.
- Place the distinguishing information of links at the beginning of a link.
- Use unique link text where possible, avoid duplicated link texts in a web application.
- Avoid link text that is longer than a sentence.
Fallback
When link text alone is not able to identify a link’s purposes out of context, consider:
- Giving more context in the link’s title attribute
- Make sure the contents surrounding the link text will help describe the link’s purpose.
Accessible Links Examples:
- There are several things to consider in creating accessible link text.
- WCAG-compliant links should explain their purpose from the link alone.
- Academics Programs
Why are these effective?
- All of these link texts are informative and descriptive while in and out of context. Users who skim through the links can easily understand the link’s purpose.
- All link texts are unambiguous; they are easily recognizable.
Inaccessible Links Examples:
- Click Here to access the link.
- Click this webpage to access the Accessible Link content.
Why are these ineffective?
- None of these link texts are informative while out of context; the user must read the whole sentence to identify the link’s purpose.
- None of the links are informative when in context; the user has to read more of the article to understand the link’s purpose.
- Notice in the first example, the link is empty (href = #). Empty links are often used to hold a drop-down menu containing non-empty links. While mouse users can see the drop-down menu, keyboard users cannot access the drop-down menu, which makes the non-empty links inaccessible to them.
- Ambiguous links, such as “Click here” or a spelled out URL are not unique on a page. This makes it difficult for people to skim through the list of links.
Test for Accessibility
Use SiteImprove and WAVE to check links’ accessibility on a page. To check if links on a page are accessible, make sure:
- All links on a page are not broken; the link's target cannot be empty.
- Link text should appropriately describe the link’s purposes.
- Does the link text describe the purpose of the link when read alone?
- Does the link text make sense out of context?
- Is the link text unique from the other link texts on the webpage?
- Are the links identifiable as links for people who can’t see or distinguish color?
More resources on testing links’ accessibility check out WebAim's article on authoring compliant links.