Skip to content

Commit

Permalink
Add hidden "Error:" prefix to error messages
Browse files Browse the repository at this point in the history
We've standardised on using a simpler, more 'instructional' language for our messages, but this means that most error messages are less explicit about the fact that the field is in an error state.

I think we are therefore relying slightly more on the visual presentation of the error message to help the user understand that they have 'done something wrong'.

Thinking specifically about the way that a screen-reader user would encounter an error message:

> National Insurance number, text field. It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Enter a National Insurance number in the right format. You are currently inside a text field. To enter text in this field, type.

I don't think it's entirely clear that "Enter a National Insurance number in the right format" is an error.

This attempts to counter that by adding a visually hidden "Error:" prefix to the error message:

> National Insurance number, text field. It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Enter a National Insurance number in the right format. You are currently inside a text field. To enter text in this field, type.
  • Loading branch information
36degrees committed Feb 25, 2019
1 parent 68bd09b commit a15fddf
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 2 deletions.
3 changes: 3 additions & 0 deletions src/components/error-message/error-message.yaml
3 changes: 3 additions & 0 deletions src/components/error-message/template.njk
33 changes: 31 additions & 2 deletions src/components/error-message/template.test.js

0 comments on commit a15fddf

Please sign in to comment.