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 link details:
---
## 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:
Top comments (3)
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!
Agreed! if we don't have a true need to, we shouldn't make it more difficult for our users!
dev.to/duncanma/dont-code-links-to...