Accessibility Breakdown | External Links
Tags: a11y, inclusion, webdev
Published: 2024-05-15 16:00:00

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:
![external link icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pyrreh2h7tvbnqkm25l.png)

## 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
<a href="https://example.com" target="_blank">Link Text</a>
```

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

```react
<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 <span> element, indicating they open in a new tab or similar idea.

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

- [NVDA Screen Reader
](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj7uqDNm_D6AhUiEFkFHfvrB9QQFnoECBYQAQ&url=https%3A%2F%2Fwww.nvaccess.org%2Fdownload%2F&usg=AOvVaw3AAc5nrFrg0lylpULGjjxr)
- [Axe DevTools Chrome Extension](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
- [WAVE Browser Chrome Extension
](https://wave.webaim.org/extension/)
- [Web Developer Chrome Extension](https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
- [ANDI Accessibility Testing Tool
](https://www.ssa.gov/accessibility/andi/help/install.html)

A11y Info:

- [WCAG Standard Guidelines
](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [A11y Project
](https://www.a11yproject.com/)