Search topics
Links that open a new tab without saying so
A shop's size guide link opens in a new tab with nothing in its words to say so, so people who don't see the tab open find that, in many browsers, Back no longer takes them to the shirt.
<a href="/size-guide" target="_blank"> The problem
People who can't see a new tab open, or don't notice it, lose the page they were on: in many browsers, Back no longer takes them there.
A clothing shop's product page sells a linen shirt in four sizes. Under the price, a sentence says "Not sure which size to choose?" and links to the size guide. The shop wants people to come back and buy, so the link opens the guide in a new tab, with target="_blank". Nothing in its words says so. A screen reader user moves to the link and hears "See the size guide, link". They follow it and the guide is read out, as any new page would be. They measure a shirt they own, find they need a medium, and press Back to choose it. Back does nothing: the guide is the first page in a new tab, so in Chrome, Edge or Firefox on a computer the browser has no page to go back to and greys the button out. The shirt page is still open, one tab to the left, but nothing told them it would be there.
The same link fails in other ways:
- The link has an arrow-in-a-box icon after its words, the usual sign of a new tab, but the icon is
aria-hidden="true", so a screen reader still hears only "See the size guide, link", and people who don't know the icon don't read it as a warning. - A content system adds
target="_blank"to every link that leaves the site, such as the delivery company's tracking page, so most of the page's links open new tabs and none says so. - A click handler calls
window.open()on a button or a link, with the same result and no attribute to see in the markup.
Success criterion 3.2.5, Change on Request, is level AAA. A change of context, such as a new window or tab, may happen only when the user asks for it, or when there is a way to turn such changes off. Failure F22 covers this link: a link that opens a new window, with no text to say that it will, opens a window the user didn't ask for. Following a link asks for a new page; it doesn't ask for that page to open somewhere else. The browser lets a page do this with one attribute, and says nothing about it, so the person finds out after the change.
H83 is a sufficient technique when a link opens a new window: it keeps target and puts the warning in the link text, so everyone knows before they press it. Opening the page in the same tab passes as well, because then nothing changes that the link didn't ask for; G200, an advisory technique, recommends opening new tabs only when they are needed. An icon on its own is not text: when it has no name, as here, a screen reader says nothing about it, and the people who see it still have to know what it means.
On a phone, a new tab replaces the whole screen, and the page that was open waits out of sight in another tab, which is easy to miss.
3 of 10 groups affected
- No vision (affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Without vision A screen reader user hears "See the size guide, link", follows it, and hears the size guide. Nothing says a tab opened, so when they press Back to choose a size, nothing happens, and the shirt seems to be gone.
- Limited vision Someone using a screen magnifier is looking at the link, not at the tab strip at the top of the screen, so they don't see the new tab appear. They read the size guide, then find Back greyed out.
- Limited language, cognitive and learning abilities People who find it hard to keep track of where they are lose the shirt page twice: once when it is replaced on screen, and again when Back, the usual way back, does nothing in many browsers. Some start the search again, or give up.
The link has a clear name, so axe and other scanners pass it; none of their rules looks at target. EaseWeb's audit lists the links with a target other than _self, _parent or _top, or with window.open() in an onclick attribute, whose name and description say nothing about a new tab or window, as a lead, because 3.2.5 is AAA and only a person can judge whether the new tab is needed and whether the words warn of it. A click handler added by a script, as in the last case above, isn't in the markup, so the audit doesn't see it. A code assistant asked to add an external link can add target="_blank" and rel="noopener noreferrer" by habit, with an icon and no words, and a request to make it accessible can add aria-hidden="true" to that icon, which leaves screen reader users with nothing at all.
Try it
Tab to the size guide link and follow it, then press the browser’s Back to get back to the shirt.
The panel under the window shows what a screen reader says. Did anything warn you that a new tab would open, and does Back take you to the shirt?
Broken Can you fix this?
Screen reader says:
(Tab to the link)
The fix
Open links in the same tab, or say in the link's words that it opens a new one.
- 1Open links in the same tab, unless the page would lose something.
- 2When a link opens a new tab, say so in its words, not only with an icon that has no name.
- 3Put the warning in the link's name, after its visible words, not in a title.
A link that opens a new tab without saying so
<p> Not sure which size to choose? <a href="/size-guide" target="_blank">See the size guide</a></p>Open the guide in the same tab
<p> Not sure which size to choose? <a href="/size-guide">See the size guide</a></p>Why this fix: Open links in the same tab
target="_blank" makes the browser open the guide in a new tab, and the link's name is "See the size guide", with nothing to say where it will open. The person learns about the new tab only after it has opened, if at all.
Without target, the guide opens in the same tab, and Back returns to the shirt, with the page as it was. People who want the guide beside the shirt can still open it in a new tab themselves, with a middle click, Ctrl or Command and a click, the context menu, or a long press on a phone. Nothing changes that the link didn't ask for, so there is nothing to warn about.
All three pass 3.2.5. Open the guide in the same tab: it is the only option that keeps Back working in every browser, it needs no words, and people who want a new tab can still open one. Keep a new tab only when the page would lose something without it, such as help opened beside a form that is half filled in, and then put the warning in the link's words, where everyone sees and hears it. Name the icon when the design has one and the words can't be shown; it warns screen reader users but leaves people who don't know the icon guessing.
Where several links open new tabs, a line before them, such as "The links below open in a new tab", saves repeating the words on each, as GOV.UK suggests; add the warning to each link's name too, in hidden text, since a screen reader user who jumps from link to link never hears that line.
Don't put the warning in a title attribute. Browsers show it as a tooltip under a mouse, and most show nothing for a keyboard or a touch screen, and screen readers don't read it reliably. A warning in aria-describedby alone, as one of G201's examples has it, reaches screen reader users only, and some screen reader settings don't read descriptions; technique H83 puts the warning in the link text, which everyone gets.
Keep the visible words at the start of the name, as above, so the name still begins with the label people see; see buttons and links named differently from their text.
Every way of opening a new window needs the same warning: a target with any other name, such as target="help", and a script that calls window.open(). A form that would lose what people typed if they left it is better fixed by keeping what they typed, so that its help can open in the same tab, than by opening the help in a new one.
Fixing this with an AI coding assistant? Get this guide as Markdown, or get every guide in your coding agent.
Verify the fix
4 checks.
Test with: Keyboard, Screen reader, Zoom, Mouse
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the page's links or the content system that writes them change.
Limits
This is a starting pattern, not a guarantee for every page. It covers links that open new tabs; a link that opens a PDF or downloads a file should also say so, with the file's type and size, and the document itself has to be accessible; see scanned and untagged PDFs that screen readers can't read. Whether a link's words say where it goes is a separate failure; see banner and image links with no name. Windows that open with no link pressed at all, such as on page load, fail the same criterion in another way. Test with the screen readers, magnifiers and phones your visitors use.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
References
- WCAG Understanding: change-on-request (opens in a new tab)
- WCAG Technique F22 (opens in a new tab)
- WCAG Technique H83 (opens in a new tab)
- WCAG Technique G200 (opens in a new tab)
- WCAG Technique G201 (opens in a new tab)
- design-system.service.gov.uk: links (opens in a new tab)
- nngroup.com: new-browser-windows-and-tabs (opens in a new tab)
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.