Logo

dev-resources.site

for different kinds of informations.

Accessibility Breakdown | External Links

Published at
5/15/2024
Categories
a11y
inclusion
webdev
Author
ashleysmith2
Categories
3 categories in total
a11y
open
inclusion
open
webdev
open
Author
12 person written this
ashleysmith2
open
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:

inclusion Article's
30 articles in total
Favicon
The Hidden Cost of RTO: Who Gets Left Behind?
Favicon
New Year, New Era: Why 2025 Won’t Be Business as Usual [by an autistic Software Architect]
Favicon
Open-Source for All
Favicon
Diversity and Inclusion: Using Staff Augmentation for Workforce Equity
Favicon
The Impact of Artificial Intelligence on the Laser Industry
Favicon
How accessible are online voter registration websites in U.S.?
Favicon
State of JS 2024 Outreach and Diversity Report
Favicon
Justin Trudeau’s Bold Move: Khalistan – Canada’s Latest “Land of Opportunity”
Favicon
Diversity, Equity, and Inclusion: How DEI Shapes Organizational Culture?
Favicon
PASSION - PRUTL the universal framework for Peace Respect Trust Unity and Love...
Favicon
international drivers license Italy
Favicon
Chicago Innovation Awards Nomination
Favicon
Beyond the Binary - More Inclusive Gender Options with Compose
Favicon
Web Accessibility
Favicon
Daniel Siegel Alonso Explains How Music Builds Bridges Among People
Favicon
Empowering Diversity: Imposter Syndrome and Economic Inclusion in Tech Worldwide
Favicon
Web accessibility, how to design web pages for everyone
Favicon
Accessibility Breakdown | Dynamic Content
Favicon
Accessibility Breakdown | External Links
Favicon
Accessibility Breakdown
Favicon
Building for Accessibility
Favicon
What challenges did I have when I included a local version of my name in social media?
Favicon
International Women's Day - But is it really a problem?
Favicon
Optimize for What You Can Do: A Coder's Guide to Customization and Inclusivity
Favicon
A Love Letter to the Underrepresented in Tech
Favicon
One World, One Web, One Love
Favicon
Bridging the Empathy Gap - Inclusive Web Development for Everyone
Favicon
Women Developer Academy Europe 2023 - My Experience
Favicon
From Bias to Belonging: Creating Inclusive Communities in Tech
Favicon
La ironía de “querer un mundo diferente”, sin “pensar diferente”.

Featured ones: