Links are the building blocks of web navigation. They are the portals that connect users to information, resources, and actions across the internet. Whether you’re browsing a blog, shopping online, or reading an article, links play a crucial role in how you experience the web.
For a link to be truly effective, it needs to meet fundamental user expectations. Links should be predictable, accessible, and functional across all devices and interaction methods, from mouse and keyboard to touchscreens and screen readers. When creating accessible links, there are three core aspects to keep in mind:
- Writing links that are meaningful and user-friendly.
- Designing links for visibility and interaction.
- Coding links for accessibility, SEO, and device compatibility.
In this article, we’ll dive into each of these aspects to help you design and write accessible links that ensure a seamless experience for all users.
1. Writing Links: Clarity and Context Matter
Anchor text is the clickable part of a link, and it should always provide clear, meaningful context. Users rely on anchor text to understand where the link will take them. Generic phrases like “Click Here” or “Read More” do not give enough information about the content that the link points to, making it harder for users to make decisions.
Examples of poor vs. good link text:
- ❌ “Click here to learn about accessibility.”
- ✅ “Learn about web accessibility best practices.”
By being specific and descriptive, you create accessible links that users can easily understand and navigate.
Structuring Links for Scannability
Research shows that users often scan pages rather than reading them word for word. This means that the structure of your links matters. To make your links easy to scan, follow these tips:
- Place important keywords at the beginning of the anchor text.
- Avoid linking entire sentences—focus on the most relevant words.
- Use consistent phrasing across similar links.
For instance, if you’re linking to multiple articles about web accessibility, keep the format and phrasing consistent across all of them. This will make it easier for users to predict what each link offers, improving accessibility.
Handling Email and Phone Links Correctly
Links that direct users to email addresses or phone numbers need to be formatted correctly. The proper way to link email and phone numbers is as follows:
- Email: mailto:hello@example.com
- Phone: tel:+1234567890
It’s also important to note that displaying contact information directly on the page, rather than relying solely on links, is more user-friendly. For example, showing your email address and phone number on your page is helpful for users who might have trouble interacting with links. For mobile users, providing an easy tap-to-call experience can improve usability.
Linking to Downloadable Files
When linking to downloadable files, it’s essential to set proper expectations for users. Make sure you provide information about:
- The file format (e.g., PDF, DOCX, ZIP).
- The file size (e.g., “PDF, 2MB”).
- Contextual information about what the file contains (e.g., “Download our 2024 SEO Guide (PDF, 5MB)”).
Examples of misleading vs. helpful download links:
- ❌ “Click here to download the file.”
- ✅ “Download our 2024 SEO Guide (PDF, 5MB).”
By providing clear details about what users are downloading, you create accessible links that prevent confusion.
2. Designing Links: Visibility and Usability
To ensure your links are visible and easy to recognize, they should look like links. The most common indicator is underlined text.
- Color contrast: Ensure a minimum contrast ratio of 4.5:1 between text and background for normal text, and 3:1 for underlined text.
- Avoid relying on hover-only indicators, such as a color change without underlining, as they are not accessible to all users.
By following these design principles, you make your links more visible, helping users navigate your site easily.
Interactive States: Hover, Focus, and Active
Links should provide clear visual feedback when users interact with them. This helps users understand what is clickable and what is not.
For hover effects, consider changing the color, underlining the text, or using an animation. For focus states, which are essential for keyboard users, make sure the link is outlined with high contrast, such as:
outline: 2px solid #005fcc;
This ensures that all users, including those with limited mobility or visual impairments, can interact with your accessible links.
Clickable Area and Spacing
On touch devices, links need to be large enough to tap comfortably. The recommended minimum tap target size is 44×44 pixels.
Additionally, make sure links are spaced out enough so that users can tap or click them without accidentally selecting the wrong one. This is especially important on mobile devices, where smaller screens can lead to accidental taps.
Should Links Open in a New Tab?
By default, links should open in the same tab to avoid disorienting users. However, there are situations where opening a link in a new tab is appropriate:
- External links to other websites.
- Downloadable files.
- Preventing users from losing unsaved progress (e.g., in a form).
If a link opens in a new tab, always notify users beforehand. This can be done by adding a phrase like “Opens in a new tab” next to the link:
<a href="example.com" target="_blank" rel="noopener">Example (Opens in a new tab)</a>Coding Links: Best Practices for Developers
Semantic HTML: The <a> Tag Is Essential
When coding links, always use the correct HTML element: the <a> tag. This element provides the necessary structure for links to be accessible.
Correct usage:
<a href="example.com">Visit Example</a>Incorrect usage (breaks keyboard accessibility):
<div onclick="window.location='example.com'">Visit Example</div>Using <a> ensures that all users, including those using screen readers or keyboard navigation, can interact with your accessible links.
Internal Links and Page Anchors
In-page links (or jump links) allow users to navigate directly to different sections of a page. To ensure proper accessibility, use anchor tags with corresponding id attributes.
Example of an in-page link:
<a href="#section">Jump to Section</a>
<h2 id="section">Section Title</h2>
To ensure keyboard focus follows the jump, use tabindex="-1":
<h2 id="section" tabindex="-1">Section Title</h2>Using ARIA for Accessible Link Labels
If you’re using icons for links (such as social media buttons), it’s important to make sure they have accessible names. You can achieve this by using ARIA labels.
Example with ARIA:
<a href="https://twitter.com" aria-label="Visit us on Twitter. Opens External Webpage">
<i class="fab fa-twitter"></i>
</a>Alternatively, include visible text along with the icon:
<a href="https://twitter.com">
<i class="fab fa-twitter"></i> Twitter
</a>Managing External Links Securely
When opening external links in new tabs, always use rel="noopener noreferrer" to prevent security risks:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>This practice helps keep your site secure and protects users’ privacy.
Testing and Improving Links
Manual Accessibility Testing
To ensure your links are accessible, perform manual testing:
- Keyboard navigation: Can you tab to every link?
- Screen readers: Does every link make sense without visual context?
- Test the color contrast using tools like the WebAIM Contrast Checker.
Automated Testing Tools
You can also use automated tools to check for accessibility issues:
- Google Lighthouse: Checks for accessibility issues, including link problems.
- WAVE and a11y.Radar: Other helpful tools for automated accessibility testing.
A Link is a Promise, Not a Surprise
Every link you create is a promise to your users. By following best practices for writing, designing, and coding accessible links, you help guide users seamlessly to their next destination without frustration. Accessible links improve navigation, accessibility, and the overall user experience for everyone.
To ensure your website is fully accessible, consider auditing your links using the strategies outlined in this article. Want to take the next step? Schedule an ADA compliance briefing with 216digital to assess your site’s accessibility and learn how to improve it.
