What are link accessibility best practices?
-
Ensure link text is descriptive and meaningful to provide context when read in isolation.
-
Use clear and concise text to facilitate easy voice command navigation.
-
Include non-color indicators like underlines or distinct font styles. Ensure they are persistent and not hover-dependent.
-
Meet WCAG standards: 4.5:1 contrast ratio for AA compliance (normal text), 3:1 for large text.
-
Provide clear focus styles for keyboard navigation.
-
Utilize aria-labels for context-specific purposes.
-
Avoid redundant links to the same destination.
-
Ensure links are at least 44px wide and 22px tall for usability.
-
On mobile, avoid overly large touch targets to prevent accidental activation.
-
Use image links sparingly and include meaningful alt text describing their purpose.
-
Consolidate multiple links to the same destination into a single interactive element.
Deep dive
Your app or website will inevitably be used by people with disabilities. If it falls under the AAA compliance category, meeting accessibility guidelines isn’t optional—it’s mandatory. Links are no exception, so let’s explore link accessibility best practices.
How do people with disabilities interact with link UI?
People with disabilities interact with links in diverse ways, depending on their specific needs and the assistive technologies they use:
-
Screen reader users: Screen readers allow users to navigate a page by listening to its content. Many users prefer to hear the links instead of the entire page, meaning only the hypertext, not the content that surrounds it, will be read. That’s why it’s important to ensure that text is descriptive and meaningful, providing clear context even when read in isolation.
-
Speech recognition users: Speech recognition software enables users to control applications through voice commands. These users speak the link text aloud to follow it, so clear and concise text is essential. Ambiguous or overly long links can create unnecessary confusion and hinder navigation.
-
Keyboard-only users: Some users rely solely on a keyboard to navigate, using the Tab key to move through interactive elements. That’s why it’s important to ensure that the current focus is always visually apparent. You can use techniques like highlighting or outlining the focused UI element.
-
Colorblind users: Colorblind users may struggle with color-based cues for identifying links, such as links displayed in a different color from the text. To address this, include non-color indicators like underlined text or distinct font styles.
What should I consider to create accessible links?
We’ve already covered the importance of meaningful and descriptive link text for accessibility. To avoid repetition, we won’t cover it in this article but be sure to check it out and apply these hyperlink accessibility best practices to your work.
Color contrast
Links must adhere to Web Content Accessibility Guidelines (WCAG) contrast standards:
-
AA Compliance: Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
- AAA Compliance: Higher contrast levels are often required for government or disability-focused sites.
⚒️ Use an online Contrast Checker or Figma’s Contrast plugin to verify your colors.
Non-color indicators
While color differentiation helps sighted users, additional indicators are necessary for accessibility:
-
Use underlining or icons.
-
Ensure non-color indicators are persistent and not hover-dependent, as hover-only styles require stringent contrast compliance that can limit design flexibility.
-
Provide clear, noticeable focus styles for keyboard navigation.
Focus styles
Custom focus styles enhance accessibility for keyboard-only users. Browser defaults like dotted lines or faint outlines are often insufficient. Instead:
-
Design salient focus styles that stand out against backgrounds.
-
Test focus visibility across different interactive elements.
Screen reader optimization
Screen readers provide auditory feedback for visually impaired users. To improve their experience:
-
Use descriptive link text to convey the purpose or destination.
-
Replace ambiguous phrases like "Read More" with context-specific labels using the aria-label attribute.
-
Avoid redundant links, such as linking an article title, image, and introductory text to the same destination.
Link size and placement
Interactive links should be appropriately sized and positioned for usability:
-
Ensure links are at least 44px wide and 22px tall for easy activation.
-
On mobile, avoid excessively large touch targets that might be triggered unintentionally during scrolling.
Image links
Images as links should be used sparingly and must include meaningful alt text:
-
The alt text should describe the link's purpose, not the image itself.
-
Treat image links as functional elements, ensuring they meet all accessibility criteria.
Avoid adjacent links
Placing multiple links to the same destination next to each other can confuse assistive technology users. To avoid this:
-
Wrap related elements, such as images, headings, or "More" buttons, into a single link.
-
Consolidate adjacent links into one interactive element to improve navigation.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs and accessible hyperlinks.
-
Is the link text clear and descriptive? Does it explain where the link leads without relying on the surrounding context?
-
Would it make sense on its own? Can users understand its purpose when read out of context, such as by screen readers?
-
Is it distinguishable? Does it visually stand out from regular text through color, underlining, or other styling?
-
Does the link meet contrast requirements? Is there sufficient contrast between the link text and its background for easy readability?
-
Is it easy to activate? Can users select it without difficulty, including those using assistive devices?
-
Does it avoid ambiguous labels like "click here"? Are phrases like "learn more" replaced with more specific language?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common links accessibility mistakes.
-
Using vague text.
-
Ignoring visual distinction from regular text.
-
Insufficient color contrast against the background.
-
Relying solely on color and not using additional indicators, such as underlines.
-
Small or inaccessible click targets.
-
Forgetting focus indicators for links when navigated using keyboards.
-
Breaking keyboard navigation.
-
Opening links in a new tab or downloading files without warning.
-
Using the same text for different links.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content about accessible link text!
-
Guidelines on designing better hyperlinks by Slava Shestopalov
📚 Keep exploring
Never stop growing. Explore resources on link accessibility, thoughtfully handpicked by Cieden’s designers.