DEV Community

Cover image for Accessibility Breakdown | External Links
Ashley Smith for Developers @ Asurion

Posted on

7 1 1

Accessibility Breakdown | External Links

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

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>


Enter fullscreen mode Exit fullscreen mode
  • 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>


Enter fullscreen mode Exit fullscreen mode

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'
      };
    }
  }]
}


Enter fullscreen mode Exit fullscreen mode

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:

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (3)

Collapse
 
moopet profile image
Ben Sinclair •

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!

Collapse
 
ashleysmith2 profile image
Ashley Smith •

Agreed! if we don't have a true need to, we shouldn't make it more difficult for our users!

Collapse
 
duncanma profile image
Duncan Mackenzie •

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay