Ontario.ca homepage
Français

Ontario Design System

Hint text

Use clear and concise hint text to guide users as they fill out forms.

  • Content: 
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-hint {
	color: colours.$ontario-greyscale-70;
	display: inline-block;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	width: globalVariables.$full-width;
	max-width: globalVariables.$standard-width;

	// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices
	a[x-apple-data-detectors] {
		color: inherit;
		cursor: none;
		text-decoration: none;
	}
}

.ontario-hint-expander__container {
	max-width: globalVariables.$standard-width;
}

.ontario-hint-expander__button {
	color: colours.$ontario-colour-link;
	cursor: pointer;
	background: none;
	border: none;
	display: flex;
	font-family: typography.$ontario-font-open-sans;
	font-weight: fontWeights.$ontario-font-weights-normal;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	text-align: left;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	padding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;

	&-icon--close {
		display: none;
		margin-right: spacing.$spacing-1;
	}

	&-icon--open {
		display: inline-block;
		margin-right: spacing.$spacing-1;
	}

	&:hover {
		color: colours.$ontario-colour-link--hover;
	}

	&:active {
		color: colours.$ontario-colour-link--active;
	}

	&:focus,
	&:active {
		@extend %ontario-focus;
	}
}

.ontario-hint-expander__content {
	border-left: 4px solid colours.$ontario-greyscale-20;
	color: colours.$ontario-colour-black;
	background-color: colours.$ontario-greyscale-5;
	display: none;
	padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 (spacing.$spacing-4 + spacing.$spacing-1);
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;

	& *:last-child {
		margin-bottom: spacing.$spacing-0;
	}

	& img {
		width: globalVariables.$full-width;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			width: 50%;
		}
	}
}

.ontario-hint-expander__content.ontario-expander__content--opened {
	display: block;
}

.ontario-hint-expander__container.ontario-expander--active {
	.ontario-hint-expander__button-icon--close {
		display: inline-block;
	}

	.ontario-hint-expander__button-icon--open {
		display: none;
	}
}

.ontario-input + .ontario-hint-expander__container {
	margin-top: calc(-1 * spacing.$spacing-5) !important;
}

.ontario-checkboxes__item .ontario-hint-expander__container,
.ontario-radios__item .ontario-hint-expander__container {
	margin-left: spacing.$spacing-2;
}

.ontario-checkboxes__label + .ontario-hint-expander__container,
.ontario-radios__label + .ontario-hint-expander__container {
	margin-top: spacing.$spacing-3;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin-top: spacing.$spacing-4;
	}
}
  • URL: /components/raw/hint-text/hint-text.scss
  • Filesystem Path: fractal/components/components/form/hint-text/hint-text.scss
  • Size: 3.8 KB
  • Content: 
    .ontario-hint-expander__button:focus,.ontario-hint-expander__button:active{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-hint{color:#4d4d4d;display:inline-block;margin:0 0 1rem 0;width:100%;max-width:48rem}.ontario-hint a[x-apple-data-detectors]{color:inherit;cursor:none;text-decoration:none}.ontario-hint-expander__container{max-width:48rem}.ontario-hint-expander__button{color:#06c;cursor:pointer;background:none;border:none;display:flex;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:1rem;text-align:left;margin:0 0 1rem 0;padding:0 .25rem 0 0}.ontario-hint-expander__button-icon--close{display:none;margin-right:.25rem}.ontario-hint-expander__button-icon--open{display:inline-block;margin-right:.25rem}.ontario-hint-expander__button:hover{color:#00478f}.ontario-hint-expander__button:active{color:#002142}.ontario-hint-expander__content{border-left:4px solid #ccc;color:#1a1a1a;background-color:#f2f2f2;display:none;padding:1rem 1rem 1rem 1.25rem;margin:0 0 1rem .25rem}.ontario-hint-expander__content *:last-child{margin-bottom:0}.ontario-hint-expander__content img{width:100%}@media screen and (min-width: 40em){.ontario-hint-expander__content img{width:50%}}.ontario-hint-expander__content.ontario-expander__content--opened{display:block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--close{display:inline-block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--open{display:none}.ontario-input+.ontario-hint-expander__container{margin-top:-1.5rem !important}.ontario-checkboxes__item .ontario-hint-expander__container,.ontario-radios__item .ontario-hint-expander__container{margin-left:.5rem}.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:.75rem}@media screen and (max-width: 40em){.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:1rem}}
  • URL: /components/raw/hint-text/hint-text.css
  • Filesystem Path: fractal/components/components/form/hint-text/hint-text.css
  • Size: 2.1 KB

Guiding principle: Help the user be successful the first time.

When to use this component

Use hint text to help users understand how to complete fields in a form. When adding hint text, the first choice should always be to display hint text without using a hint expander. Only use the hint expander option for less important or more complex information.

  • If the information is very important and most or all users will need it, make it part of the form field label.
  • If the information is fairly important and many users will need it, provide hint text that is visible by default.
  • If the information is less important and only a minority of users will need it, put it in a hint expander.

Hint text

Use hint text when you need to:

  • explain why you are asking a certain question
    • example: “We will only email you if there’s a problem with your order”
  • provide clarifying details
    • example: “For example, A1A 1A1”
  • tell the user where to find the information you’re asking for
    • example: “Find taxes payable on line 435 of your notice of assessment”

Hint expander

A hint expander is a block of hint text that can be shown or hidden using a toggle.

Before deciding to use a hint expander, try to clarify the field label or simplify the hint text so that a hint expander isn’t needed.

Use a hint expander when:

  • the hint text is long and won’t be needed by the majority of users
  • you want to give the user the option to see a helpful image, such as a picture of a driver’s licence showing where to find the licence number
    • remember, you will also need text that explains the image

Hint expanders are specific to hints within forms. On standard content pages, use an accordion instead.

Write clear link text

When writing link text for the hint expander toggle:

  • use short and descriptive language
  • help users understand what they will see before they click
    • for example, if the hint expander is an image of a circled permit number, the hint expander link text could say “Where is my permit number?”

Technical specifications

Do:

  • left-align hint text
  • put hint text after the field label
  • use a unique ID that ties the hint text to the specific input
  • include visually hidden text inside the label that describes to screen readers the availability of a hint expander

Don’t:

  • put placeholder text inside text inputs. This is a bad practice for accessibility.
  • include photos or more than two sentences in hint text (use a hint expander instead)
  • use manual line breaks (<br> tags)
  • nest hint expanders
  • use more than one hint expander per label
  • add form elements inside of a hint expander (for example, a radio button or a text field)

Technical note

The hint expander requires the following JavaScript:

In order for the JavaScript to work with the above script, the hint expander structure, classes and data-toggle attributes must be included/written as shown in the example.

Accessibility

In order for hint expanders to have meaningful sequence, they should be added after the associated form element so the user can understand the context of the information.

Since the hint expander information is after the form element, add text in the associated label (only visible to screen readers) to let the user know there is additional context below. Example: <span class="ontario-show-for-sr">More information on (label name) is available in the next element</span>

Hint expander button

Buttons are used as the hint-expander control so that they can be tabbed by keyboard users and accessible to screen readers. The button requires three attributes to pass accessibility requirements:

  • An id that corresponds to the aria-labelledby value for the hint expander content, to associate the content with the hint expander button.
  • An aria-expanded attribute initially set to false, which toggles to true when the hint expander content is expanded.
  • An aria-controls attribute that is associated with the content container id, to denote that the button has control over and affects the hint expander content.

Hint expander content

  • An id that corresponds to the aria-controls for each button.
  • An aria-hidden attribute initially set to true, which switches to false when the hint expander content is expanded and therefore visible.
  • An aria-labelledby value that corresponds with the hint expander button.

If you have any questions or feedback, please get in touch.