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. ```react

Link Text


- **Automated Tools**: Use accessibility testing tools like [Axe](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero) or [WAVE](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) for detailed reports on accessibility issues, including missing link indicators.

- **Browser Extensions**: Install extensions like [Web Developer](https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) to show you all your links, including those lacking proper indications. 

Using outline external link tool:
![Using outline external link tool on web developer extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8zduqh2dg6barfesats.png)


Using link details:
![Using link details tool on web developer extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z66fxsq8pwhou4usulfe.png)



---

## 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.

```react


<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!