Skip to content
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
  • Why ‘Click Here’ Hurts Your Website’s Accessibility

    If you’ve spent any time browsing the web, you’ve probably come across links like “click here” or “read more.” While these phrases seem simple enough, they can actually be confusing or even frustrating—especially for people using screen readers to navigate a site. That’s where descriptive link text comes in. It’s essential for making websites more accessible to everyone, including those with disabilities. So, let’s dive into why using meaningful link text is so important and how you can write it to improve both web accessibility and overall user experience.

    What is Descriptive Link Text?

    Descriptive link text is just what it sounds like—clickable text that clearly explains what the link is for. Instead of generic phrases like “click here” or “read more,” a good descriptive link gives enough context so users know exactly where the link will take them. This is a win for all users but especially important for people with disabilities who rely on screen readers to navigate the web.

    Imagine trying to navigate a website where every link says “click here.” For someone using a screen reader, that’s a frustrating experience because they have no clue where any of those links will lead. Descriptive link text fixes that by making sure all users, no matter how they access the web, have a clear, easy-to-understand experience.

    Why “Click Here” and “Read More” Are Problematic

    Using generic phrases like “click here” or “read more” might seem harmless, but they can actually create confusion. When someone using a screen reader encounters a page full of links that all say “click here,” they’re left with no context about where the links go or what they do. It’s like being handed a bunch of blank signposts with no labels.

    Let’s take a look at an example:

    • Bad Link: Click here to read more.
    • Better Link: Learn more about our services.

    In the second example, the user knows exactly what they’re clicking on, which makes the experience more apparent and more helpful, especially for people using screen readers.

    Empty Links and Their Impact on Accessibility

    Another issue when it comes to web accessibility is empty links. An empty link is one that has no text or meaningful content for a screen reader to announce. For people using screen readers, these links are useless—they navigate to them but get no information about what they do. And for those using keyboard navigation, empty links can be frustrating roadblocks.

    To avoid this, always make sure your links contain text, or if you’re using an image as a link, ensure there’s alternative text (alt text) that clearly describes what the link does.

    How Descriptive Link Text Boosts Accessibility

    One of the best things about the web is its potential to be accessible to everyone. But if we don’t put some thought into how we design and label things like links, we end up excluding a lot of people. Descriptive link text makes websites more accessible and improves the overall user experience in a few key ways:

    • Clarity for Screen Reader Users: Screen readers read links out loud. If the link text is too vague, it isn’t very clear. Descriptive text helps users know exactly what to expect before they click.
    • Better Navigation: Clear, simple language helps everyone, especially users with cognitive disabilities or learning differences, by reducing the mental effort needed to figure out what a link does.
    • Faster Browsing: Descriptive links let users quickly scan a page and understand where each link will take them. This makes it easier for everyone to find what they’re looking for without guessing.

    WCAG Guidelines for Descriptive Links

    The Web Content Accessibility Guidelines (WCAG) provide a set of best practices for making the web usable by everyone. According to WCAG SC 2.4.4 Link Purpose, each link should make its purpose clear, either from the link text itself or from its surrounding context.

    Here are a few essential tips from WCAG on how to write compelling link text:

    • Be Concise and Relevant: Your link text should be short but informative. Don’t go overboard, but include enough detail so users know where they’re headed.
      • Example: Instead of “click here for more,” try “Learn more about accessible landmarks.“
    • Skip the Redundancies: You don’t need to add words like “link” or “website” to your link text. Screen readers already announce that it’s a link, so saying “click here to visit the website” is unnecessary. Just say, “Visit our website.“
    • Avoid Empty Links: Every link should have meaningful content. Empty links are confusing and serve no functional purpose for users navigating with keyboards or screen readers.

    Examples of Effective and Ineffective Link Text

    • Ineffective Link Text:
      • Click here
      • Read more
      • Learn more
      • Here
    • Effective Link Text:
      • Download the 2024 Annual Report
      • Explore our upcoming events.
      • Read more about creating accessible web links.

    In these examples, the goal is to make it crystal clear where the link will take the user, leaving no room for confusion.

    Best Practices for Writing Descriptive Link Text

    • Think About Context: Consider what the user needs to know about the link’s destination. This is especially important for screen reader users who may jump between links without reading the surrounding text. Make sure the link text alone provides enough information.
    • Keep It Short and Sweet: Your link text should be informative but not too long. For example, “Contact Us for Support” is much clearer than “Click here if you need to get in touch with our support team.“
    • Use Natural Phrasing: Don’t feel like you always need to add a “click here” to your sentence. Sometimes, the best link text is already part of your content. For instance, instead of “click here to learn more about our programs,” use the “learn more about our programs” link.
    • Avoid URLs as Links: Long URLs are difficult for screen readers to interpret, especially if they contain numbers and special characters. Instead of linking a URL directly, use descriptive text like “Visit 216digital’s a11y.Radar Monitoring Page.”
    • Alt Text for Image Links: If an image serves as a link, make sure the alt text conveys the purpose of the link. For example, if a shopping cart icon leads to the cart page, use alt text like “View Cart” rather than just “Cart.”

    Linking It All Together

    Incorporating descriptive link text is a small change that can have a significant impact on your website’s web accessibility. By ditching generic phrases, using clear and concise language, and following WCAG guidelines, you’ll make your site more navigable for everyone—especially users who rely on screen readers.

    Creating an inclusive web experience doesn’t have to be complicated, but it does take attention to detail. If you’re unsure whether your website’s accessibility measures, including your link text, are up to standard, it might be time to seek expert advice. At 216digital, we offer ADA briefings that help you identify areas for improvement and ensure your site meets accessibility requirements.

    Take the next step towards a more accessible web presence and schedule a complimentary ADA briefing with 216digital today. We’re here to guide you through the process and help you create a site that’s welcoming and usable for everyone.

    Greg McNeil

    October 14, 2024
    How-to Guides, Legal Compliance, WCAG Compliance
    Accessibility, Alt text, descriptive link text, WCAG, WCAG Compliance, Web 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.