216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us
  • How to Write and Design Accessible Links

    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:

    1. Writing links that are meaningful and user-friendly.
    2. Designing links for visibility and interaction.
    3. 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.

    Greg McNeil

    February 11, 2025
    How-to Guides
    Accessibility, descriptive link text, How-to, Links, Web Accessible Links, Website Accessibility
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.