Hint text guidance

[rotellina]

What

Hint text on Question pages https://design-system.service.gov.uk/patterns/question-pages/

Why

There isn't enough guidance on the use of hint text on question pages.

Hint text Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it https://design-system.service.gov.uk/components/text-input/

There is a lack of explanation and guidance around when copy should be treated as a hint rather than general body copy - specifically when guidance crosses into becoming a hint. Similarly, outside of the complex question pattern https://design-system.service.gov.uk/patterns/question-pages/, there is little information around the differences on how hint copy (as it is implemented in the components) and body copy are communicated to the screen-readers.

[owenatgov]

Hi @rotellina.

As a minor point of order, since this isn't a new backlog item in that it isn't a proposal for a new pattern or component that isn't already a part of the design system, I'm moving it into our govuk-design-system issue list where it can be more easily triaged.

[stevenjmesser]

Hi @rotellina, can you give an example of where you've tried to follow the guidance but it wasn't sufficient? That'll be really useful in making sure the guidance is as helpful as can be. I'll try and help without that example anyway, in case it's useful.

It's worth remembering what a 'hint' is. A hint is a small indication or a small piece of practical information. If you're using hint text to give directions or indicate something that, intuitively, isn't small or needs a detailed explanation, it's probably not a hint. Look at asking complex questions without using hint text in those scenarios where you need to give a lengthy explanation, as it's probably better to use regular body copy.

[JennyLove567]

Hi Steven, I don't have a specific example to add here but I know that within the content design community there is quite a bit of confusion over when to use hint text versus when we should use body text (and even more confusion over when we should use one and style it as the other so that screen readers get the benefit of it).

Part of the difficulty I think is that there is no listing for 'hint text' as a stand alone element within the design system. The guidance you talk about can be quite difficult to find unless you already know where it is.

Perhaps it needs to have its own section either within the styles - typography section or in the component section?

[JennyLove567]

Just adding also - although the 'text input' guidance talks about when not to use hint text, it doesn't link to the example you mentioned about 'asking complex questions' so again users of the system have to already know where to find that.

[rotellina]

In the example above we used hint copy as it is programmatically assigned to the inputs. This is so that if a screen-reader user uses shortcut keys (or other methods) to jump directly to the input the hint will be read out. This is to ensure that the user does not miss vital formatting or other information which will directly impact the answer or format of data they input. Just following the guidance, that text would have been body but we put as hint for accessibility reasons.

[danlaceyhmrc]

Jus to add - It's worth noting that hint text uses some HTML coding wizardry to associate the hint text with the input and label - adding paragraph text (especially in HTML markup) underneath a question-based label could be disruptive to screen-reader users. Adding links to help text could also be disruptive (we've seen this in a recent pattern) - this could imply to screen-reader users and others that they need to follow the link in order to complete the question. But importantly, the current markup makes a clear association with the hint text to the label and the input that is missing if you use a block of pargraph text below the label.

it seems to be better to use the complex question pattern - eg a page heading as a statement, followed by paragraph text, followed by a label, followed by an input) if the user needs more guidance and detail.

Some Play UI components (and the GDS components) are not designed to allow paragraph text below labels.

[stevenjmesser]

Just adding also - although the 'text input' guidance talks about when not to use hint text, it doesn't link to the example you mentioned about 'asking complex questions' so again users of the system have to already know where to find that.

I've drafted an amendment to the guidance. Please take a look and let us know what you think, hopefully that will address it for you.

[JennyLove567]

That would help very much Steven. Thank you. :-)