Links

Hyperlinks are used only in-line within blocks of text. If you need a link outside of text use a tertiary button instead

All in-line links

Structure

• All links and basic link icons built to work on light and dark accent colours.

Accessibility and screen readers

• It must be understandable from the copy within the anchor tag where the link is going, even when removed from context.
• When a link needs to be more descriptive of what / where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually - see developer notes for how to achieve this.
• PROHIBITED: Anchors must not open in a new window, eg. target="_blank", unless it would disrupt a user's journey (for example, when within a large form). Read more about opening links in new windows.

Placement

• To be used in-line within blocks of text
• PROHIBITED: Not to be used outside of text blocks - use buttons instead

Links with icons

Structure

• The icon always follows the text, never before it
• Text is always bold weight, underlined
• Padding between text and icon is 5px
• First letter case is dependent on it's location within a sentence eg. if the link follows a fullstop it's first letter is capitalised; otherwise, it is lower-case
• PROHIBITED: There are some buttons with icons that aren't available as in-line links with icons
• PROHIBITED: Changing font weights

Examples

Notes for developers

When a link needs to be more descriptive of what / where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually, for example:

<a href="..." aria-label="Read more about car insurance">Read more</a>
<!-- or -->
<a href="...">Read more<span class="u-hidden--visually"> about car insurance</span></a>

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="http://www.google.com" title="External site - www.google.com" rel="external">Google</a>

Anchors must not open in a new window, eg. target="_blank", unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.

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>

Specialism icons

This icon set is part of an extension to the Framework rather than a core module; include the following code in your header to attach the relevant additional stylesheets:

<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile.css" rel="stylesheet" />
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile-unmq.css" rel="stylesheet" />
<![endif]-->

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.

Code Examples

<a href="...">...</a>
<a class="a-link-icon [ Modifier ]" href="..."><span class="a-link-icon__inner">...</span></a>

<a class="a-link-icon a-link-icon--edit a-link-icon--edit-no-onward" href="..."><span class="a-link-icon__inner">...</span></a>

<a class="a-link-icon a-link-icon--specialism [ Modifier ]" href="..."><span class="a-link-icon__inner">...</span></a>

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.