Open links in a new window or tab

[sophieottaway]

There are several different approaches that we could use to handle links that open in a new tab - to effectively communicate the destination of the link to users with and without visual impairments.

Are we able to agree on a pattern?

Three suggestions I've heard are:

1. Put the "(Opens in a new window or tab)" as part of the link itself (Chris Moore recommended)
2. Put the "(Opens in a new window or tab)" as part of the link itself but add a style to remove the underline (Joe Lanman, GDS suggestion)
3. Use a span with class of visually hidden inside the link to help users with screen readers and standard text outside the link for all other users (Ed Horsford, GDS suggestion)

[stevenaproctor]

@sophieottaway Chris's recommendation comes from G201: Giving users advanced warning when opening a new window, which is part of WCAG 2.0.

Not sure if we should remove the underline. It will make the link look odd. The other option seems over-engineered and clashes with the "don't write content that works specifically for screen readers, write content that works well for everyone" idea from How to create content that works well with screen readers. Not sure what text Ed has suggested.

I have seen research and usability testing where opening links in a new window or tab confuses people who do not understand why the back button is disabled. This happens even when you warn people it is going to happen.

What user need does opening the link in a new window or tab solve?

[vickytnz]

given that Sophie's work is for developers, it's perhaps closer to designing for internal users

[stevenaproctor]

I'm not sure there is a different need between the different users. I think a pattern would apply for all users.

[joelanman]

One time it might help to open in a new tab (not sure there's any point to saying 'window' too) is in a page where the user could lose entered information if they navigated away. It may also be useful in a transaction where the user was worried they could lose information (even if they wouldn't) but that would have to be researched.

In general I'd like to stay away from new tabs, as mentioned people can get stuck when the back button doesn't work in the new tab.

[stevenaproctor]

I would say "window or tab" because we do not know someone's browser settings.

[ian-leggett]

Found this article which may help however it seems to point to the above comments anyway - https://www.webcredible.com/blog/beware-opening-links-new-window/ very old but still credible

[stevenaproctor]

@ian-leggett It is a security risk too unless you use some extra code. https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

[ian-leggett]

I spoke with David Birchall(Frontender) who uses it in - https://github.com/hmrc/api-documentation-prototype/commits?author=davidbirchall he said that this pattern came out of an accessibility workshop he went to in Newcastle on SDES

[adamliptrot-oc]

@ian-leggett that workshop was run by me

[gordonmcmullan]

This is the summary of the discussion of this pattern at the hackday

[stevenaproctor]

This is a cross-government thing and is on the GOV.UK Design System backlog.

Not sure it needs a separate component or pattern. More likely it needs some information added to links in the Design System, GOV.UK style guide and links in content design guidance.

[mikeash82]

Upstreamed to the GOV.UK issues backlog https://github.com/alphagov/govuk-design-system-backlog/issues/156