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