Add hidden "Error:" prefix to error messages #1221
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1221
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1221
36degrees
force-pushed
the
add-visually-hidden-error-text-to-error-message
branch
from
65cc81c
to
427f148
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1221
|
This seems like a really nice improvement to make it super explicit that there's an error. Does it need to be done at the same time as a new feature? Would you ever want to remove this? In theory we could add this feature without extending the API if we were confident. If not, this seems like a good way to do it 👍 |
|
I figure you need to be able to customise the text for internationalisation if nothing else. You might also want to disable it in some cases, if the error message you're using is more explicit. |
| @@ -53,4 +53,33 @@ describe('Error message', () => { | |||
| expect($component.attr('data-test')).toEqual('attribute') | |||
| expect($component.attr('id')).toEqual('my-error-message') | |||
| }) | |||
|
|
|||
| it('includes a visually hidden "Error" prefix by default', () => { | |||
There was a problem hiding this comment.
These tests are very good 👍
|
I think based on the work with the error summary and the conclusions reached in https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/ we can be pretty confident this will work as intended. Would you agree? |
|
While I'd normally err on the side of testing again I think that we should go ahead with this based on the recent work on improving the visually hidden text helper, error summary work and GOV.UK Publishing's navigation work. This will also be included in the upcoming audit. |
36degrees
force-pushed
the
add-visually-hidden-error-text-to-error-message
branch
from
427f148
to
dffa3ee
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1221
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.
36degrees
force-pushed
the
add-visually-hidden-error-text-to-error-message
branch
from
dffa3ee
to
b1a417d
Compare
This is because of alphagov/govuk-frontend#1221
This is because of alphagov/govuk-frontend#1221
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:
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:
(As discussed in alphagov/govuk-design-system-backlog#47 (comment))