Add guidance on using longer supporting text for questions

[christopherthomasdesign]

What

New guidance to explain how to structure a question page when you need to explain the question in more depth than is appropriate for hint text.

Why

We've seen this come up as a discussion point on Slack a few times. We've also seen lots of examples of hint text that is too long to be read out by a screen reader every time a user focuses on the related input.

Questions

The example we used was from 'apply from teacher training'. It's quite a good one, although the explanatory text is arguably a bit on the short side. Could those sentences reasonably be hint text?

I think it's borderline. If anyone's found an example that might explain the approach better, please suggest one!

[netlify]

✔️ You can preview this change here:

🔨 Explore the source changes: 0b2cc6f

🔍 Inspect the deploy log: https://app.netlify.com/sites/govuk-design-system-preview/deploys/6151c9c1f0c2ef000701107e

😎 Browse the preview: https://deploy-preview-1716--govuk-design-system-preview.netlify.app

[joelanman]

Agree that example is short enough to be hint. Agree on the problem - that very long hint text can be verbose via a screen reader, but equally if we can keep them relatively short and marked up as hints, we should because screen reader users won't miss them by tabbing to the form fields.

I'd suggest possibly the Open Register question on Register to Vote, though we'd need to agree with them that it should update to this pattern:

[frankieroberto]

Looks good! I’ve definitely used the approach of having h1, then guidance, then label/legend in a couple of services, instead of having long hint text.

The one tricky thing is finding alternative wording for the h1 vs the label/legend, as often they're saying essentially the same thing. One option is to have one version be in question form ("Why do you want to nominate this person?") and the other one be a shorter non-question form ("Nomination reason").

I wonder whether it would be better to make the example be a page that includes a textarea or input? I'm not sure whether or not it would be ok to have guidance text between a legend and a set of radios or checkboxes?

[htmlandbacon]

I wonder whether it would be better to make the example be a page that includes a textarea or input? I'm not sure whether or not it would be ok to have guidance text between a legend and a set of radios or checkboxes?

I've seen a couple of radio examples using this format:

Heading

Paragraph

Paragraph

Hidden legend, duplicate of the heading
Yes - Radio button
No - Radio button

Which means you have to scroll back up to get the question on mobile / the error looks a bit off

[christopherthomasdesign]

Thanks @frankieroberto and @htmlandbacon! I think we agree with your comments and suggestions. I was wondering if either of you had any more examples you could share of pages using this kind of pattern? Anecdotally I've seen loads but struggling to find a good one now that we need to use something specific! Anything you could share would be a big help. Cheers.

[frankieroberto]

@christopherthomasdesign here's an example from our service. Longish guidance text which includes a link. h1 and legend are essentially the same, but the latter formed as a question.

[frankieroberto]

@christopherthomasdesign another example from our service. This one also uses hint text on one of the radio answers.

[christopherthomasdesign]

Thanks for the examples @frankieroberto – I may use the first one if that's ok with you?

[frankieroberto]

Looking good! Left some small comments.

[trang-erskine]

All looks fine.

[lfdebrux]

👍 🙌

[EoinShaughnessy]

Thanks for all your help with this, @htmlandbacon and @frankieroberto - we really appreciate it. Looks like a great improvement.