Links

Why Accessible Links Matter

Accessible links are critical for ensuring that all users can navigate and interact with web content effectively. Key reasons include:

• Navigation Support: Clear, descriptive links help users understand where a link will take them.
• Assistive Technology Compatibility: Screen readers and other assistive technologies rely on link text to communicate functionality and destination to users.
• Enhanced Usability: Accessible links allow for a more usable experience for persons with vision impairments, motor disabilities, and cognitive challenges.

How To

General Practice

Identify Links. Review all links on your page. Without context, does the link text hold meaning? To add a meaningful hyperlink, select the text and use a keyboard shortcut (Command+K for Mac, Control+K for Windows).

Use Descriptive Link Text. Link text should describe the purpose or destination of the link (e.g., “Learn more about accessible design” instead of “Learn More” or “Click here”).

Use Unique Link Text. Screen readers and other assistive technologies allow users to navigate a page by link name, alone. To avoid redundancy and confusion, use unique link text for similar or repeated links (e.g., “Assignments for Unit 1,” “Assignments for Unit 2,” etc., as opposed to multiple “Assignments” links).

Provide Context. Surrounding text or accessible descriptions should make the purpose of the link clear. Where possible, insert the hyperlink as a natural part of your sentence structure (e.g., “To learn more about accessible links, visit our virtual Digital Accessibility Office Hours.”).

Maintain Sufficient Color Contrast. Link text should have a contrast ratio of at least 4.5:1 with their background. Visit Color Contrast to learn how to achieve this.

Ensure Keyboard Accessibility. Links should be easily reachable and operable using a keyboard alone. (You can test this by repeatedly using the Tab key to ensure focus reaches all links, then activating the links using the Enter key.)

Technical Tips

Beware of Empty Links. An empty link is a link without text in it, which prevents an assistive technology user from understanding the purpose or function. Pope Tech offers more information on Fixing an Empty Link.

Similarly, do not use empty anchors (<a href="#">) without descriptive text.

What to Avoid

• Generic Text (“Suspicious Links”): Avoid vague phrases like “Click here” or “Read more” without additional context.
• Lengthy Links: Keep link text concise to improve readability and usability.
• Redundancy: Don’t use the same link text for links with different destinations. Similarly, don’t use different link text for multiple links leading to the same destination.
• Linking Full URLs: Avoid using raw URLs as link text (e.g., “https://example.com”). Instead, describe the destination (e.g., “Visit our homepage”).
• Color-Only Indicators: Do not rely solely on color to differentiate links; ensure they are visually distinct with underlines or bold text.

Additional Resources