Explanatory text

Explanatory text surfaces important concise information or 'hints' for visibility to users completing form inputs. Be selective in their application and consider whether they are really needed - forms shouldn't require extensive completion instructions.

• Use where there are specific 'hints' that will inform data input (although a user's preferred data entry format should be accommodated where possible).
• Use where users may not be familiar with the data being asked for (such as policy number).
• Use where more information may be required on why something is being asked.
• Use where information needs to be provided about security or use of data.
• Information should be concisely written to support scanning - longer pieces of information should be catered for within help text.
• A text link may be used for in instances such as forgotten password details.
• See the style guide for detailed typography guidelines.

Explanatory text links

Structure

• Can only be used in form journeys for example login page.
• Can only be used with basic form elements such as single textbox, dropdown.
• Can not be used with radios, checkboxes, groups of textboxes etc.
• Do not use with contextual help within the same form row.
• Link placed to the right should only be used to help the user in recovering from their journey.
• For text that helps the user or has explanatory text consider using explanatory text, contextual help or show more pattern.

Placement

• Links are placed to the right of a form field label.
• Link should be placed underneath and to the right of a form field label and above the form field when a label is too long and causes the link to wrap.

Accessibility

• Links must be tertiary buttons to ensure there is a large enough hit target.

Design anatomy

• 16pt Source Sans Pro Bold.
• Link blue #004FB6.
• 1px solid underline #CCCCCC.

Examples

Standard explanatory text

Explanatory text link

Notes for developers

The explanatory text link must only ever be used in conjunctions with basic form elements ie. single textbox, dropdown; do not use with form elements such as radios, checkboxes etc. If an explanatory text link is to be used in conjunction with standard explanatory text the text link must be first.

When including an explanatiry text link ensure that a tertiary button is used rather than a standard link. This ensure that the hit target is large enough to comply with WCAG guidelines.

Notes for testers

• Ensure that any links can be accessed via the mouse as well as via tabbing using the keyboard.
• Ensure that when hovering over any links the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.

Code Examples

Standard explanatory text

<div class="m-form-row">
	<label class="a-label" for="...">...</label>
	<p class="m-form-row__explanatory-text">...</p>
	<div class="m-form-row__content">
		...
	</div>
</div>

Explanatory text link

<div class="m-form-row m-form-row--has-explanatory-text-link">
	<label class="a-label" for="...">...</label>
	<p class="m-form-row__explanatory-text-link"><a href="..." class="a-button a-button--tertiary [ Modifiers ]"><span class="a-button__inner">...</span></a></p>
	<div class="m-form-row__content">
		...
	</div>
</div>

Classes overview

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

Keyboard operations

TAB

Tabbing to a link the link should become clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus a link, pressing SPACE or ENTER will open the link.