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. 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.
<a href="https://example.com" target="_blank">Link Texta>
-
Automated Tools: Use accessibility testing tools like Axe or WAVE for detailed reports on accessibility issues, including missing link indicators.
-
Browser Extensions: Install extensions like Web Developer 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.,
(opens in a new tab)) to indicate external links. The span will be hidden except to a screen reader.
<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 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:
