Accessibility UI Guidelines: Links
Links
2.5 Links
Links are fundamental elements for navigation and interaction on the web. Ensuring that links are accessible is crucial for providing an inclusive experience for all users, including those using assistive technologies.
2.5.1 <a> Element
Use clear and descriptive text for links that convey their purpose without requiring additional context. Avoid vague phrases like "click here" or "read more."
<!-- Descriptive Link Text -->
<a href="/about">Learn more about our mission</a>
<!-- Non-Descriptive Link Text -->
<a href="/about">Click here</a>
2.5.2 Avoiding Redundant Links
Ensure that each link on a page has a unique purpose. Avoid placing multiple links with the same text leading to different destinations, as this can confuse users relying on screen readers.
<!-- Unique Link Purposes -->
<a href="/services">View our Services</a>
<a href="/contact">Contact Us</a>
<!-- Redundant Links -->
<a href="/services">Learn More</a>
<a href="/about">Learn More</a>
2.5.3 Visible Focus Indicators
Ensure that links are easily identifiable when navigated using a keyboard. Visible focus indicators help users understand which link is currently focused.
/* Custom Focus Style for Links */
a:focus {
outline: 3px solid #005fcc;
background-color: #e0f0ff;
}
2.5.4 Link Purpose and Destination
Provide context about the link’s destination or purpose within the link text itself. This helps users understand where the link will take them without additional information.
<!-- Contextual Link Text -->
<a href="/download/report.pdf">Download the Christmas Menu (PDF)</a>
2.5.5 Distinguishable Links
Ensure that links are visually distinct from regular text. Use underlining, color differentiation, or other styling techniques to make links easily recognisable.
/* Distinguish Links from Regular Text */
a {
color: #005fcc;
text-decoration: underline;
}
a:hover, a:focus {
color: #003399;
text-decoration: none;
}
2.5.7 Opening Links in New Tabs
If a link opens in a new tab or window, inform users of this behavior to prevent confusion. This can be done through link text or by using ARIA attributes.
<!-- Informative Link Text -->
<a href="https://externalwebsite.com" target="_blank" rel="noopener noreferrer">
Visit our Partner (opens in a new tab)
</a>
<!-- Using ARIA to Indicate New Tab -->
<a href="https://externalwebsite.com" target="_blank" rel="noopener noreferrer" aria-label="Visit our Partner, opens in a new tab">
Visit our Partner
</a>
2.5.8 Testing Links for Accessibility
Regularly test links using various assistive technologies, such as screen readers, to ensure they are announced correctly and function as intended. Tools like automated accessibility checkers can also help identify potential issues.
// Example: Using a screen reader to verify link accessibility
// Ensure that all links are announced with their purpose and destination
Best Practices for Links
- Use Clear and Descriptive Text: Link text should clearly indicate the destination or action, avoiding vague phrases like "click here."
- Maintain Consistent Styling: Ensure that all links have a consistent visual style throughout the website to aid recognition.
- Provide Contextual Information: Include additional context in the link text or through ARIA labels when necessary, especially for links that open in new tabs.
- Ensure Keyboard Navigability: All links should be accessible via keyboard, with visible focus states to indicate the current selection.
- Avoid Broken Links: Regularly check and update links to prevent broken or dead links, enhancing the user experience.
- Use ARIA Attributes Judiciously: Only add ARIA labels or roles when additional context is necessary and cannot be conveyed through link text alone.