Links

[Tosin-Balogun]

Use this issue to discuss the guidance on links in the service manual.

Related issues

• anchor links - in page and between pages
• links - external

[thelittlelostgirl79]

I think our page on links needs expanding to address linked text within sentences, especially to clarify which words should be linked text, and which shouldn't.

Example I've just seen on Moving to a new home: housing options

GOV.UK: contact your local council to find out about sheltered housing schemes in your area

To my mind, the words "to find out about sheltered housing schemes in your area" would not be part of the linked text, as this is not the action you take when you click the link, it's a secondary action. However, the entire sentence is linked text.

Also, in a preceding paragraph, we have:
Ask your local council or housing association for details of any schemes in your area.
Again, we direct the user to GOV.UK but don't include this in the linked text.

This is an example of two different approaches to linked text within the same content.

I think we need more examples and "rules" on our guidance page about:

• which words to make into linked text
• using the URL/name as a prefix (as in GOV.UK:)
• linked text within sentences were other words are not directly related to the link
• matching linked text for internal links to the H1 of the page they take the user to (eg. I changed "help in the home" to "help at home from a paid carer" which was the H1 on that page)

[sarawilcox]

Thanks @thelittlelostgirl79, I'll follow this up.

We have a similar task in our backlog: #182

[mcheung-nhs]

A minor thing but could we update the link for "Read more about opening new windows and tabs on W3C" to point to the latest WCAG 2.1 page (https://www.w3.org/WAI/WCAG21/Techniques/general/G200) rather than the older WCAG 2.0 version (https://www.w3.org/TR/WCAG20-TECHS/G200.html).

[sarawilcox]

That makes sense, @mcheung-nhs. I'll put a task in the team backlog for this.

[sarawilcox]

For PDFs, we include size in KB or MB in the link text. GOV.UK does it with their ICS downloads.

[StephenHill-NHSBSA]

Suggestion

I'd like to make a suggestion to this part of the page, about when it's ok to open a link in a new window or tab:

Avoid opening new windows or tabs

Avoid using links or buttons that open new windows or tabs.

There are 2 exceptions to this:

• for instructions or other help with filling in a form (for example, a date picker)
• if a user has logged into a secure site and the link would take them away from it

Read more about opening new windows and tabs only when necessary (on W3C, WCAG2.1).

If links do go to a new tab or window, warn the user by saying: "Link name (opens in new window)". (Include all of this in the link text.)

I think it would be good to follow the guidance in the GOV Design System (https://design-system.service.gov.uk/styles/typography/#opening-links-in-a-new-tab) and add another exception (or add further clarity to the first point) which says...

If you need a link to open in a new tab - for example, to stop the user losing information they’ve entered into a form - then include the words ‘opens in new tab’ as part of the link.

Reasoning

We're having a discussion internally around the 'footer' component (https://service-manual.nhs.uk/design-system/components/footer) and whether these links should open in the same window, or a new one.

Given a number of our services are transactional by nature, I believe they should open in a new window to avoid users potentially losing any information they may have entered into a form.

We would aim to do this (and to meet the WCAG 3.2.5 criterion) by doing something like...

<p>The following links open in a new tab:</p>
<ul class="nhsuk-footer__list">
  <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Privacy policy<span class="nhsuk-u-visually-hidden"> (opens in new tab)</span></a></li>
  <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Cookies<span class="nhsuk-u-visually-hidden"> (opens in new tab)</span></a></li>
  <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Terms and conditions<span class="nhsuk-u-visually-hidden"> (opens in new tab)</span></a></li>
  <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Accessibility<span class="nhsuk-u-visually-hidden"> (opens in new tab)</span></a></li>
</ul>

[cazzzac]

@StephenHill-NHSBSA, this article could be of use https://javascript.plainenglish.io/how-to-make-an-accessible-opens-in-a-new-tab-icon-in-12-lines-of-react-e99ce5f25b5d

Personally, I'm in favour of new tab icons with accessible text beneath. But I'm not sure whether GDS needs verbose new tab text for sighted users, or if the icon would suffice.

The icon is fairly standard across the web, so it depends on whether it's a core part of the service. In your example above with footer items, it would make sense to preface it with text, rather than having an icon or new tab text per item.

[StephenHill-NHSBSA]

@StephenHill-NHSBSA, this article could be of use https://javascript.plainenglish.io/how-to-make-an-accessible-opens-in-a-new-tab-icon-in-12-lines-of-react-e99ce5f25b5d

Personally, I'm in favour of new tab icons with accessible text beneath. But I'm not sure whether GDS needs verbose new tab text for sighted users, or if the icon would suffice.

The icon is fairly standard across the web, so it depends on whether it's a core part of the service. In your example above with footer items, it would make sense to preface it with text, rather than having an icon or new tab text per item.

I'm a bit wary of icons to be honest. There's the well known phrase that 'metaphors change with time' so what might be well understood at one point, might be totally misunderstood the next. Take the floppy disk icon for example.

Again, I like the advice that the GOV Design System say:

If you’re displaying lots of links together and want to save space and avoid repetition, consider doing both of the following:

• adding a line of text before the links saying ‘The following links open in a new tab’
• including (opens in new tab) as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers

[sarawilcox]

GOV.UK removed their external link icon a few years ago. There's a blog post about it: https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/. We've also got some info about external links in this GitHub issue: Links - external and internal

Our current guidance about when to open a new tab is based on W3C guidance: G200: Opening new windows and tabs from a link only when necessary but I think we could specify the additional exception.

Let's see if we get further comments, but I'll mark this as an issue we could potentially discuss and approve at the next Content Style Council meeting (probably in September).

[steph-w-nhs]

Our team wondered if we needed to include the file size of the PDF if we link to the HTML page to download it.

The link guidance states:

We prefer to link to an HTML page containing the PDF. That way, if the PDF is changed or updated, users can still find the latest information.
If we need to link to a PDF, we:
open it in the same tab
add “PDF only, [file size in MB or KB]” in brackets to the end of the link text, for example: “weight loss progress chart (PDF only, 545KB)”

Our decision was to include the file size in the link. This is because:

Although we're linking to an HTML page, there's nothing on it apart from the PDF link, which immediately downloads if you click on it. And the HTML page doesn't say it's a PDF or how big the file is. So I think it is good to include a mention that the info is only available in a PDF and what the file size is in the link text, as you've done.

[edwardhorsford]

A few things it would be good to expand the guidance on:

I was looking for guidance on external links. In the GOV.UK design system, this guidance exists in the styles>links section. In the NHS design system it's in the content section.

I think it would be good to mention external links from the styles section and then link to the content section.

For the content section I think we could also mention:

• What can be done if there are many external links. On GOV.UK they suggest using a sentence before the links.
• Specific content for the native NHS App - that will be opening links either in an overlay or in the user's browser - we could have suggested content for this and note that it needs to be dynamic (unless we can find a generic set of words to use).

[sarawilcox]

Re above: GOV.UK advises: "The following links open in a new tab". (https://design-system.service.gov.uk/styles/links/#external-links)
Note: GOV has a separate Links page.