Links
Links are fundamentally the most important interactive element of a website. Making links accessible is critical to including users of all abilities.
Screen Readers and Links
Screen readers like JAWS and VoiceOver give users the option to read all the links on a webpage. When pulled out of context in this way, inks with meaningful text are more useful.
Clearly Indicate the Link Destination
Unclear link text examples:
Click here to learn more about accessible hyperlinks.
Learn Accessibility 101 Register
Learn Accessibility 102 Register
Clear link text examples:
Learn more about links and accessibility from Gian Wild at AccessibilityOz.
Learn more about links and hypertext and link text and appearance from the fine folks at Web Accessibility in Mind.
Register for Accessibility 101
Register for Accessibility 102
Link Text Guidelines
What to do:
Write links that make sense out of context. Use descriptive link text detailing the destination; not just “click here,” or other similar phrases.
Link text should be made up of phrases rather than single words, so that users with limited motor control will not have difficulty hitting links.
If you use an image to create links, make sure the destination, e.g., wikipedia.org, is included as an image
Altattribute.
What not to do:
Don’t capitalize text as it is difficult to read. It’s all one big rectangle.
Avoid special characters as they will likely not be read by screen readers.
Avoid URLs as link text.
Avoid forcing links to open new windows. It is disorienting for users and breaks natural fallbacks like the back button.
Don’t link directly to downloads. See File Download Shortcode for sample markup.
Repetitive Links
Where there are multiple links on a page that either say the same thing or go to the same source, like a blog roll or search results page, be sure to identify links in unique ways.
If links point to different locations, check for
titleattributes to distinguish them.If links have generic text “Download”, “Read more,” check for the
titleforARIAattributes to provide context though aria labels.Another option is to use off-screen text to hide text for screen readers only. Use with caution.
Example using aria-label:
aria-label:Example using aria-labeledby:
aria-labeledby: Another example using aria-labeledby:
aria-labeledby: Example using off-screen or visually hidden text:
Resources
WCAG 2.0 Success Criterion 2.4.4 Link Purpose (In Context) (Level A)
Using aria-label for link purpose, by WCAG Working Group
Using aria-labelledby for link purpose, by WCAG Working Group
“Learn More” Links: You Can Do Better, by Katie Sherwin at Nielsen Norman Group.
A Link is a Promise, by Kara Pernice at Nielsen Norman Group.
Links on a Webpage, at Accessibility and Usability at Penn State.
Links That Open in a New Window
Read through the resources before using the target attribute. Often there is a more accessible solution.
Although changing the default link behavior is not a preferred practice, there may be some exceptions where it is appropriate. In such cases, be sure these links aren’t introducing accessibility issues.
Identify links that open in new windows
Check that
target="_blank"is setVerify that some indication, of the action to occur, is given programmatically
Examples:
Resources
Links and Accessibility, by Gian Wild at AccessibilityOz.
Why Your Links Should Never Say “Click Here” by Anthony T at Smashing Magazine.
Text Links: Best Practices for Screen Readers by Sailesh Panchang from Deque outlines a simple test kit for testing screen readers.
Using Aria-Label for Link Purpose, from the WCAG Working Group wiki.
When to Use
target="_blank", answer is never. Read more from our friend Chris Coyier at CSS-Tricks.
Last updated
