Every day, we click on links that take us to different sites, tabs, and windows, and we don’t really think twice about them. But for a person who is blind or visually impaired, that can create a difficult situation when navigating. If your goal is to make your website accessibility compliant, you’ll need to notify users that they’ll be going to a new tab or window before they click on the link. In this article, we’ll discuss why this is an issue, how you can identify non-compliant links, and how to remediate them.
For the purposes of this post, we’ll be using the term “tab” to refer to the new window that opens from a link since the terms “tab” and “window” can be used interchangeably in this context.
Why This Is an Accessibility Issue
If the context of the web browsing experience changes without the user being notified, it potentially creates a confusing situation when trying to navigate back to previous pages for users who are blind or visually impaired. This is outlined in more detail in the Change on Request section of Web Content Accessibility Guidelines (WCAG) 2.1’s guidelines for the AAA 3.2.5 check.
Specifically, this has to do with the function of a browser’s back button. If a link goes to a page that replaces the existing page, the back button allows the user to go back to the previous page. However, if a link opens a new tab, the back button is non-functional because it doesn’t know the browsing history anymore. A user must close or swap tabs to go back to the previous page.
Unfortunately, screen readers cannot tell the difference between links that open in a new tab or window by themselves to alert users with blindness or visual impairments. Without that notification, the user is put into a new browsing context that they were not aware of and will have issues going back to previous pages.
How To Identify Non-Compliant Links
The first step is knowing what links qualify for this check just in case you’re using software to identify accessibility errors on your website.
- Links that contain the target attribute of “_blank” – A link that opens in a new tab will contain the target attribute of “_blank” in the source code. The source code of a link can be checked by using a browser’s built-in dev tool, which is accessible from the F12 button, or by right-clicking on the link and selecting “View Source.”
- Links that do not mention opening in a new tab in the following places:
- The text of the link
- The ALT text of any images inside the link
- The aria-label text
- The aria-labelled-by text
- Content contained in the pseudo-elements of “:before” and “:after”
If a link satisfies both conditions, then it will be flagged as non-compliant.
It can be time-intensive to manually check every link on the website, so we recommend tools like SilkTide that can crawl the website and find these links automatically.
How To Resolve the Accessibility Issue
Step 1: Determine the Purpose of the Link
The first step is to determine if a link needs to open a page in a new tab or not. The easiest way for a link to be compliant is to not use the target attribute of "_blank" at all. But this might not be a realistic solution since there are still situations where it might be considered a bad user experience if a page doesn’t open in a new tab.
Here are some appropriate reasons to use the “_blank” target attribute:
- Making sure users don’t lose progress in a shopping cart or form steps
- Taking users away to a different web domain or external website
- Taking users away from a secure section of a website
Step 2: Notify Users A Link Is Opening in A New Tab
There are multiple ways to accomplish this, so the solution comes down to what works best for your situation. We’ll start with an example URL:
<a href=”https://www.discovertec.com” target=”_blank”>Example Link Text</a>
Our link text is “Example Text Link” and the target of the anchor tag is “_blank”, which lets us know it’s going to open in a new tab.
The most straightforward way to notify a user that a link is going to open in a new tab is to state it in the link text.
<a href=”https://www.discovertec.com” target=”_blank”>Example Link Text (opens in a new tab)</a>
This solution is something that everyone will see regardless of accessibility needs, but it also could be deemed unnecessary for all users to see. Plus, it could disrupt the flow of the content.
A non-disruptive way to let people who use screen-readers know is this:
<a href=”https://www.discovertec.com” target=”_blank” aria-label=”Example Link Text (opens in a new tab)”>Example Link Text</a>
Instead of using the link text, we’re now utilizing the “aria-label” attribute and using a version of the link text that includes the new tab message, while not interfering with the actual link text.
If your link is an image, here’s an example of how to make that compliant:
<a href=”https://www.discovertec.com” target=”_blank”><img src=”image.jpg” alt=”Example Link Text (opens in a new tab)” /></a>
In this case, we modify the ALT text to include the new tab message.
Step 3: Setup A Maintenance Plan
Cleaning up links is great, but doing it just once isn’t getting the job done with a website that has new pages constantly being added to it. You’ll want to set up a weekly or monthly recurring task to go back onto the website and make sure all links are still compliant. Determine the frequency of this task based on how often the site is updated. Once again, we recommend seeking out a tool that will reduce the manual labor portion of remediation.
Accessibility Consultation Remediation
If you’re still unsure about how to make your website accessibility compliant, or you need a company to help, please reach out to us at DiscoverTec for the support you need. We’re more than happy to schedule a free accessibility consultation to either perform remediation or just point you in the right direction.
