alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
497 stars 231 forks source link

Error messages: add new guidance on matching error message text to input label #3097

Closed dav-idc closed 10 months ago

dav-idc commented 1 year ago

What

Add new guidance on matching error message text to input label.

It'll go in the error message component guidance, just above the 'Be clear and concise' heading.

Other details:

Why

In a recent DAC audit they noted a usability issue with our error summary link text not matching the labels for inputs.

Here's the preview page that DAC tested:

And here's the GitHub issue that was created based on the DAC audit report:

While the issue DAC identified had more to do with old content for error messages in our GOV.UK Frontend review app not being updated, it pointed to a bigger gap in our guidance. We decided it would be best to expand our guidance on how exactly to match error messages to input labels.

This issue has a sibling issue that will add examples of error messages to the address pattern:

Who needs to work on this

David

Who needs to review this

Calvin, Charlotte

Done when

CharlotteDowns commented 11 months ago

@dav-idc is there anything I can do to move this along?

dav-idc commented 10 months ago

Here's my draft of the content @CharlotteDowns and @calvin-lau-sig7!

I'm going to re-assign this ticket to Charlotte now. 🙇‍♂️

Add this directly above the 'Be clear and concise' section:

Match up error messages to labels

Error messages should directly include language from the question or fieldset label. This helps match up the error message with the form field for which it applies. Here are some examples of label and error message pairs. Example 1:

  • Label: ‘How many hours do you work a week?’
  • Error message: ‘Enter how many hours you work a week’

Example 2:

  • Label: ‘Address line 1’
  • Error message: ‘Enter address line 1, typically the building and street’

Remove this from the 'Be consistent' section:

~Use the question or form label in the error to provide context. For example, ‘Enter how many hours you work a week’ for ‘How many hours do you work a week?’~