Hyperlinks: Ensuring Accessible Navigation

Why Hyperlinks Matter

Hyperlinks are the backbone of the web, guiding users to additional resources, related content or actions like filling out a form. For users with disabilities, well-crafted hyperlinks are critical for effective navigation. Accessible hyperlinks ensure that all users — including those using screen readers or relying on keyboard navigation — can understand and use links as intended.

Using Hyperlinks to Support Accessibility

Accessible hyperlinks help users identify the purpose and destination of a link without additional context. This is achieved through:

  • Descriptive Link Text: Ensure the clickable text clearly describes where the link will take the user or what action it performs.
  • Avoiding Generic Text: Links like “click here” or “read more” are ambiguous and inaccessible when read out of context.

By following these principles, hyperlinks can enhance the usability and accessibility of your content for all visitors.

Example of Accessible Hyperlinks

Scenario 1: Descriptive Link Text (Avoid linking URLs)

Scenario 2: Avoiding Ambiguity

Scenario 3: Using Links with Surrounding Context

  • When a link is part of a sentence, ensure it still makes sense when read independently by a screen reader.
  • Accessible Sentence: “Visit our campus tour page to schedule your visit.”

General Rules for Hyperlinks

  • Be Descriptive: The link text should clearly explain its purpose without requiring additional context. Avoid generic phrases like “click here.”
  • Use Concise Text: While links should be descriptive, they should also remain concise. A few words are typically sufficient to convey the purpose.
  • Provide Unique Link Text: Avoid using the same text for different links on a single page unless they point to the same destination.
  • Underline Links: Links should be visually distinct from regular text. Elon’s CMS ensures this, but avoid manually styling text to mimic links (e.g., underlining plain text).
  • Use Meaningful URLs for Hyperlinked Text: When sharing URLs, avoid linking raw URLs like “www.elon.edu.” Instead, use descriptive link text like “Visit Elon’s website.”
  • Avoid Links in Images: If an image needs to function as a link, ensure the alt text describes the destination or purpose of the link.

Common Mistakes to Avoid

  • Generic Link Text: Phrases like “Click here” or “Learn more” do not provide enough context for screen reader users.
  • Empty Links: Links without meaningful text can confuse users of assistive technologies.
  • Multiple Links with Identical Text: Repeated use of identical link text for different destinations can make navigation difficult.
  • Relying on Visual Indicators Only: Color and underlining are crucial for sighted users, but always ensure the link text itself is descriptive for screen readers.

Final Tips

  • Test with a Screen Reader: Use a screen reader to verify that hyperlinks are clear and descriptive when read aloud.
  • Think About Context: Hyperlinks should stand alone as meaningful, but also integrate naturally into the surrounding text.
  • Avoid Overlinking: Limit the number of hyperlinks in a single paragraph to avoid overwhelming users.

Accessible hyperlinks create a smoother navigation experience and ensure that everyone can engage with your content effectively and confidently.