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.
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.
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.
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.
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:
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.
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.
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.
Published on: November 06, 2023 by Ryan Brooks, Senior Web Marketer