Accessibility Breakdown | External Links

#a11y #inclusion #webdev

Todays mini series of things you can do right now cover the essentials of checking and enhancing the accessibility (a11y) of external links in your application. As a rule of thumb, it's best not to use them, but sometimes we just can't avoid them! So let's get into it:

Why it Matters:

Accessibility Impact: Clear indications of links opening in new tabs or leading to external websites are vital for users with disabilities to navigate seamlessly.
User Experience: Prevents confusion and ensures users maintain control over their browsing experience.

Quick Check:

Manual Scan: Scan your application for links that may open in new tabs or lead to external sites. Look for links that use target="_blank" inside the anchor tag which indicates opening in a new tab.

<a href="https://example.com" target="_blank">Link Text</a>

Automated Tools: Use accessibility testing tools like Axe or WAVE for detailed reports on accessibility issues, including missing link indicators.
Browser Extensions: Install extensions like Web Developer to show you all your links, including those lacking proper indications.

Using outline external link tool:

Using link details:

Quick Fixes:

Text Indicators: Provide visually hidden text (e.g., <span class="sr-only">(opens in a new tab)</span>) to indicate external links. The span will be hidden except to a screen reader.

<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external-link">
    Visit Example Website
    <span class="sr-only">(opens in a new tab)</span>
  </a>

Visual Icon Indicators: Include an icon with an appropriate alt attribute to indicate the behavior.

<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external-link" aria-label="Visit Example Website (opens in a new tab)">
    Visit Example Website <i class="fas fa-external-link-alt" aria-hidden="true"></i>
</a>

Testing:

Thoroughly test your application post-fix by using a screen reader to ensure all external links are properly indicated and accessible.
Consider writing an Axe test to ensure all external links include a hidden element, indicating they open in a new tab or similar idea.

axe.run(dom.window.document, {
  rules: [{
    id: 'external-link-span',
    selector: 'a[target="_blank"][rel~="noopener"][rel~="noreferrer"]',
    check: function (element, _context) {
      const spanElement = element.querySelector('span.sr-only');
      return {
        result: spanElement !== null,
        message: 'External link should have a <span> indicating it opens in a new tab'
      };
    }
  }]
}

By following these quick steps, you can quickly enhance the accessibility of external links in your application, contributing to a more inclusive online environment for all users. Accessibility is an ongoing journey, so start making a positive impact today! 🌟

Helpful links
Free A11y tools:

A11y Info:

Top comments (3)

Ben Sinclair • May 15

I'd say the first thing you should consider when working with links that open in a new tab is, "does this need to open in a new tab?" Because the answer is probably, "no", 90% of the time!