Web Sandbox

Links - Don’ts

Breadcrumb

Links - Don’ts

I’m going to demonstrate how screen reader users experience links on a page when link text is not meaningful. Specifically, I’ll show what happens when multiple links are labeled “click here” or added as raw urls.

Screen Reader Simulation

This is a simulated screen reader experience using VoiceOver, Apple’s built-in accessibility tool.

  • Turn on VoiceOver (⌘ + F5)
  • Open the VoiceOver Rotor (Control + Option + U) to view page elements like links all at once

Other commonly used screen readers include JAWS and NVDA, and behavior may vary across tools. for more information about these screen readers, click here.

Non-Descriptive Link Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit felis at eros feugiat aliquam. Donec libero ipsum, imperdiet eget sagittis eget, vestibulum nec ex. Quisque in ante faucibus, gravida velit eleifend, vulputate magna. For more information, click here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit felis at eros feugiat aliquam. Donec libero ipsum, imperdiet eget sagittis eget, vestibulum nec ex. Quisque in ante faucibus, gravida velit eleifend, vulputate magna. To download the file, click here.

Click here to learn more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit felis at eros feugiat aliquam. Donec libero ipsum, imperdiet eget sagittis eget, vestibulum nec ex. Quisque in ante faucibus, gravida velit eleifend, vulputate magna.v For more information, click here. 

To download the file, click here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit felis at eros feugiat aliquam. Donec libero ipsum, imperdiet eget sagittis eget, vestibulum nec ex. Quisque in ante faucibus, gravida velit eleifend, vulputate magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit felis at eros feugiat aliquam. Donec libero ipsum, imperdiet eget sagittis eget, vestibulum nec ex. Quisque in ante faucibus, gravida velit eleifend, vulputate magna. Click here to learn more.

Raw URLs as Link Text

By the way, also avoid raw URLS like this: https://procurement.brown.edu/procurement-operations/procurement-operations-job-aids 

Another example to demonstrate this: https://division-research.brown.edu/research-cycle/prepare-submit-proposal/institutional-data-proposals-and-awards/cares-act-funding#cares-act-and-higher-education-emergency-relief-funds

Emails

When including email addresses on a webpage, make them clickable using a mailto link rather than displaying them only as plain text. While plain text email addresses are readable, clickable email links provide a more accessible and user-friendly experience. for instance, if I paste in plain text: web@brown.edu my link.