Overview

Accessible hyperlinks allow individuals that use screen readers to quickly identify where the hyperlink will take the individual without having to rely on the surrounding text. It also allows an individual to quickly identify the purpose of the link if the individual listens only to a list of links within a document.

Definitions

Text hyperlink – Uses a word or phrase to take visitors to another page, file, or document.

Image hyperlink – Uses an image to take visitors to another page, file, or document.

Bookmark hyperlink – Uses text or an image to take visitors to another part of a web page.

Minimum Compliance

Clear, Readable, Visually distinct (different color than surrounding text), Color contrast compliant, Keyboard accessible, Unique link text for each link, Underline hyperlink text, Use the same color for all hyperlinks in each document or web page.

Examples (all open in new tabs)

Accessible: Lesson 2.6: Hyperlinks

Not accessible: https://classroomaccess.oit.ncsu.edu/simple-wayslesson2/part-6-hyperlinks/

Concise: Creating Accessible Hyperlinks

Not concise: This page lists ways in which accessible hyperlinks can benefit screen reader users

Descriptive: Benefits of Accessible Hyperlinks

Not descriptive: Benefits

If a hyperlink downloads a file, be sure to mention that.

• Example: Campus Map (PDF, 5.62 MB)

If a hyperlink opens in a new browser tab or window, be sure to mention that.

• Example: NC State University Homepage (opens in new tab)

Avoid link text like “Click Here,” “More,” and “Read More.”

Exceptions/Considerations

There are times when spelling out a full web address is appropriate, like when the URL itself is important to a marketing or business goal

Resources

WebAIM Link Contrast Checker (opens in new tab)

Call to action – What can I do now

Thoroughly test all links on every page using the above as guidance.  Be sure that anything that can be accomplished with a mouse can also be done with a keyboard.