Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add hidden "Error:" prefix to error messages #1221

Merged
merged 2 commits into from Mar 1, 2019

Conversation

@36degrees
Copy link
Contributor

commented Feb 25, 2019

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.

(As discussed in alphagov/govuk-design-system-backlog#47 (comment))

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1221 Feb 25, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1221 Feb 25, 2019 Inactive

@36degrees 36degrees force-pushed the add-visually-hidden-error-text-to-error-message branch from 65cc81c to 427f148 Feb 25, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1221 Feb 25, 2019 Inactive

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2019

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 👍

@nickcolley nickcolley added this to the 2.8.0 milestone Feb 25, 2019

@36degrees

This comment has been minimized.

Copy link
Contributor Author

commented Feb 25, 2019

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', () => {

This comment has been minimized.

Copy link
@nickcolley

nickcolley Feb 25, 2019

Contributor

These tests are very good 👍

@nickcolley
Copy link
Contributor

left a comment

Great work.

Do you think we need to test this in our support matrix for assistive technologies, or can we be confident since we've tested the visually hidden helper recently?

@36degrees

This comment has been minimized.

Copy link
Contributor Author

commented Feb 25, 2019

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?

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2019

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 36degrees force-pushed the add-visually-hidden-error-text-to-error-message branch from 427f148 to dffa3ee Feb 25, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1221 Feb 25, 2019 Inactive

36degrees added 2 commits Feb 25, 2019
Add hidden "Error:" prefix to error messages
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 36degrees force-pushed the add-visually-hidden-error-text-to-error-message branch from dffa3ee to b1a417d Mar 1, 2019

@36degrees 36degrees merged commit b155ec0 into master Mar 1, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@nickcolley nickcolley deleted the add-visually-hidden-error-text-to-error-message branch Mar 1, 2019

@36degrees 36degrees referenced this pull request Mar 5, 2019
jonheslop added a commit to alphagov/pay-selfservice that referenced this pull request Mar 6, 2019
jonheslop added a commit to alphagov/pay-selfservice that referenced this pull request Mar 7, 2019
jasiekmiko added a commit to UKGovernmentBEIS/beis-opss that referenced this pull request Mar 15, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.