- Taxonomic name: A-TEXT
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Body copy
Design and usage
- All body copy has been built to work on light and dark accent colours, with the exception of dividing text (which should only be used on white).
- Do not allow copy to span more than eight columns at tablet or desktop screen sizes to ensure readability.
- Anchor
-
It must be understandable from the copy within the anchor tag where the link is going, even when removed from context.
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.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.
- Emphasis and strong
-
These should both be used sparingly as they can make text hard to read; do not use on whole paragraphs.
- Abbreviation
-
Ensure that all abbreviations / acronyms within copy have the relevant expansion applied, apart from extremely well-known ones such as DVD.
- 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
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 and any telephone numbers are wrapped in a link/anchor tag. See developer notes for how to achieve this.
- Highlighted text
- Use this highlight style sparingly so as not to diminish its visual impact.
Examples
Interactive example
Code example
<a>...</a>
<em>...</em>
<strong>...</strong>
<small>...</small>
<s>...</s>
<abbr title="...">...</abbr>
<sub>...</sub>
<sup>...</sup>
<p>...</p>
<h2 class="a-text-highlight">...</h2>
<p><strong class="a-text-highlight [ Modifier ]">...</strong></p>
<p class="a-text-icon [ Modifier ]">...</p>
<p class="a-text-dividing">This is a dividing text block</p>
<p class="big-content">This is big content</p>
<p class="big-content-bold">This is big content bold</p>
Development and test
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="https://www.google.com" title="External site - www.google.com" rel="external">Google</a>Telephone number links
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 text descriptive text can be hidden visually from the user to aid in 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 where an element may be located (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.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-text-highlight |
Text modifier to highlight the copy | h1, .a-heading--1
h2, .a-heading--2
h3, .a-heading--3
strong
|
Must not be used on a dark accent. | |
.a-text-highlight--warning |
Text highlight modifier for warnings | p strong.a-text-highlight |
Only for use on strong tags within paragraphs. Must not be used on a dark accent. | |
.a-text-icon |
Base style for text icon to the left of text | Yes | p |
|
.a-text-icon--address |
Address with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-icon--telephone |
Phone number with icon positioned on the left | .a-text-icon |
||
.a-text-icon--email |
Email address with icon positioned on the left | .a-text-icon |
||
.a-text-icon--author |
Author with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-icon--calendar |
Calendar with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-icon--clock |
Clock with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-icon--duration |
Duration with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-icon--view |
View with icon positioned on the left of the top line | .a-text-icon |
||
.a-text-dividing |
Base style for text with a grey background used to divide a page | Yes | p |
Must not be used on a dark accent. |
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.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: The underline colour for links when placed on Abeille Assurances Yellow has been updated from #999 to #737373, to provide better consistency in the colours used within Framework.