Links

Notes for developers

Visible labels and accessible names

When a button needs to be more descriptive of what it is or where it is going, but there is a requirement to show simplified text, then an extra span with the class u-hidden--visually is required within the a tag to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

<a href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></a>

This also helps to ensure that all buttons and links are unique through the page, rather than having multiple instances of links simply saying "Read more".

Links to external websites

If a link is taking the user to an external website, ensure that it is clear that it will do so by making the title attribute descriptive of what it will do and where it will go, for example:

<a href="https://www.google.com" title="External site - www.google.com" rel="external">Google</a>

Telephone numbers

By default, iOS, Android and some other devices will interpret text as a phone number. When the user taps / clicks on these numbers, the device's call application will launch; in order for as many devices as possible to correctly recognise a phone number, the following formats should be used within the UK:

• 555 555 5555
• 55555 555 555

Read more about national conventions for writing telephone numbers.

Some devices may turn the detected telephone number into a link, so the number may change to the relevant link style, this can cause problems where large numbers are detected incorrectly as a telephone number. We recommend that automatic telephone number detection is disabled by using the following meta tag in the head of your pages and any telephone numbers are wrapped in a link/anchor tag:

<meta name="format-detection" content="telephone=no" />

When adding in a link to a telephone number ensure that the format of the number only contains "0-9", "-" and "+", no spaces or other special characters, for example:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

---

Notes for testers

• Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a link the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.
• Ensure that text within links is descriptive of what or where the link is going; additional descriptive text can be hidden visually from the user to help make the link understandable, especially if there area number of links such as "Find out more" on the page which go to different locations.
• Ensure that all links are device agnostic - they must not specify how a user should be interacting with a link, eg. click.
• Ensure that any instructions are fully device agnostic - they must not refer to how the user should interact with an element, eg. click, or when an element may be relocated (unless it always directly follows or precedes the instruction) no matter what device is being used.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.