Explain opening new tabs
Silktide finds links that open in a new tab or window and reports the ones that don't say so. Visitors should be warned before a link takes them out of the page they are on.
Why this matters
Opening a new tab without warning breaks the visitor's expectations: the back button stops working, and they may not realise a new tab exists at all. users may not hear any cue that the context changed, and people with cognitive difficulties or limited web experience can be left stranded, unsure how to return. A few words of warning in the link text prevent all of this.
The best fix is often not to open new tabs at all - let visitors choose. Where you must, this check verifies the link says so, supporting success criterion 3.2.5 (Change on Request), a requirement.
How to fix it
- Prefer removing
target="_blank"so the link opens normally. - Where a new tab is justified, add an explanation to the link text:
<a href="products.html" target="_blank">
Products (opens in new tab)
</a>
- For an image link, put the explanation in the :
<a href="products.html" target="_blank">
<img src="products.jpg" alt="Products (opens in new tab)">
</a>
- To cover many links at once, can append the text automatically:
\/* Adds the warning to every new-tab link *\/
a[target="_blank"]::after {
content: " (opens in new tab)";
}
- Alternatively use an label, which changes
what is announced without changing the link's appearance. Note that
aria-labelreplaces the link's text entirely, so it must repeat it:
<a href="products.html" target="_blank" aria-label="Products (opens in new tab)">
Products
</a>
An icon alone does not pass - the warning must exist as text a screen reader
can announce (an icon's alt text counts).
How Silktide tests this
- Find every link on the page with
target="_blank", the attribute that opens a new tab or window, skipping any elements you have excluded from checking. - Gather each link's readable text: its text content, alternative text and
title text of elements inside it, any ARIA label, and text added with CSS
::beforeand::after. - Pass the link if that text contains a recognised explanation: "new tab", "new window", "new browser tab", "new browser window", or "external link" (Welsh equivalents are also recognised).
- Report every other new-tab link.
Troubleshooting
My link explains itself in other words
Only the phrases above are recognised. If your wording is a genuine equivalent, such as "opens in a pop-up", either standardise on a recognised phrase or the finding.
"Window" or "tab"?
Nearly all modern browsers open target="_blank" links in a tab, so "opens in
new tab" is usually the clearer wording, though both pass.