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.

Examples

Standard explanatory text

Explanatory text link

Notes for developers

If an explanatory text link is to be used in conjunction with standard explanatory text the text link must be first.

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">
	<label class="a-label" for="...">...</label>
	<p><a href="...">...</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.