Links That Rely on Visual Cues
Why positional language breaks for screen reader users
Links that describe their location using spatial language - "see above", "click the button below", "follow the link on the right" - only make sense in a specific visual layout. When that layout changes, or when a user cannot perceive the layout visually, these descriptions become meaningless or misleading.
What to avoid
<p>For more details, <a href="/details">click the button below</a>.</p>
<p>For pricing information, <a href="/pricing">see above</a>.</p>- Screen reader users navigate content linearly - "above" and "below" have no meaning when listening to a page
- Responsive layouts move elements around - "the button on the right" may be somewhere else on a mobile screen
- The link text does not describe where the link goes or what the user will find there
Best practice
<p>For more details, <a href="/details">read the full details page</a>.</p>
<p>For pricing information, <a href="/pricing">view our pricing page</a>.</p>Link text is descriptive and independent of visual layout. The destination is clear regardless of how the page is rendered or navigated. Works the same for sighted users, keyboard users, and screen reader users.
Sensory characteristics in instructions
The same principle extends beyond links to any instruction that relies on sensory characteristics like shape, color, or position:
- "Click the green button" - relies on color perception
- "Select the round icon in the top right" - relies on visual shape and position
- "See the red error message above" - relies on color and position
- "Click the Submit button"
- "Select the Settings icon"
- "See the error message below the form field"
Why it matters
Layout-dependent link text breaks when the layout changes - across devices, screen sizes, or user-configured styles. Screen reader users have no concept of spatial position in a visual layout. Writing layout-independent link text ensures instructions work for everyone, everywhere.