Helper text

Helper text is additional context and guidance that is always visible below an input. The text instructs a user on what needs to be completed to move to the next question in the form or process.

Considerations

Consider the following ways to convey more information:

View a pattern and guide on how to show more information.

Anatomy

Helper text can be used with any input.

1. Input label + optional / required
2. Text Input
3. Helper Text

Examples of helper text within different inputs

1. Input label + optional / required
2. Input control(s)
3. Helper Text

Language and Tone

Keep it concise

Helper text should be short and to the point. Avoid long paragraphs or complicated explanations.

Use plain language

Write in a language that is easy to understand for your target audience. Avoid technical jargon or complex terms.
Web writing style guide - Plain language

Provide examples

Examples can help clarify the type of input you are looking for. For example: if you are asking for a phone number, provide an example of the format you are expecting.

Be specific

Use specific language to describe what type of information you are looking for.

Use specific language to describe what type of information you are looking for.

Write numbers using digits E.g. “342” except when the number starts the sentence or is the number ‘one’.
Web writing style guide – Numbers and measurements

Usage

Helper text generally falls into 3 different categories. Examine the patterns and examples below to use helper text properly.

Disclosure – Why are we asking this question

Disclosive helper text helps a user understand the data, task or system associated with the input. It can be used to provide context or to explain what is expected from the user and can help users understand what information they need to provide and why it is needed.

Examples of disclosive helper text:

• Your full name is used for verification
• Emails will be sent in your language of choice
• This will be viewable to clients
• Providing optional info helps us assist you better
• This address will receive your printed certificate
• Your birthdate is used to verify your eligibility

Do

Refer directly to the content in the Text field using words such as This, These, and The when possible.

Dont

Don’t be ambiguous with unknown outcomes and phrasing of objects, groups and places.

Do

Use phrasing that communicates specific actions to objects, groups, and places.

Do

Use phrasing that informs the user what the data provided will be used for.

Instructional – Directions for how to use the input

Instructional helper text is used to provide instructions on how to interact with a particular input field or control. It can be used to explain how to use a particular feature, what actions are possible, or what the result of a certain action will be.

Examples of instructional helper text:

• Search by staff name or certification number
• Select an existing project or create a new project name
• Use arrow keys to choose from options
• Type in your search terms to see results
• Select a file to upload for verification
• Select a date from the calendar for scheduling
• Drag and drop files to upload for review
• Select an option from the dropdown menu to filter results

Do

Begin with an Action (Directive Verb) e.g. Search, Start, Select, Find, Deposit; phrasing that follows should briefly describe or summarize directions.

Dont

Don’t begin with polite phrases or adverbs e.g. Please, Thank you, or Quickly.

Do

Summarize directions or intended interaction.

Dont

Don’t be vague with the data you need.

Restrictive – Rules and requirements that the input needs to meet

Restrictive helper text indicates limitations or requirements that must be met when filling out a form or using a control. It can be used to communicate restrictions on input format, length, or content. Restrictive helper text can help users avoid errors and ensure that their input meets the required criteria.

Examples of restrictive helper text:

• Must be 8 or more characters with one uppercase letter and one number
• Must be 5MB or smaller
• Choose a date within the last six months
• Password must contain 1 uppercase letter and 1 number
• File size limit: 5MB

Do

Be specific about the information you are asking for.

Dont

Don’t rely on error validation to provide all of the specific formatting information required.

Do

Be specific about the required formatting.

Dont

Don’t use character symbols in lieu of words. eg. > || >= || != for greater than, less than or not equal to.

Formatting

Helper text should be a short succinct statement, sentence case, with no period or punctuation.

Do

Use sentence case with no punctuation at the end of the helper text.

Dont

Don’t use a period at the end of the helper text.

Accessibility

For screen reader accessibility, consider using the aria-describedby attribute as helper text for the input control. This allows screen readers to provide additional context that would be present for a sighted user.

References

W3C - Using the aria-describedby property to provide a descriptive label for ui controls
Aria described by Introduction to Accessibility