Update guidance on error styling and messages #1302
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
You can preview this change here: Built with commit ed83578 https://deploy-preview-1302--govuk-design-system-preview.netlify.app |
36degrees
pushed a commit
to alphagov/govuk-frontend
that referenced
this pull request
Jul 17, 2020
We rely on the input border getting thicker [1] in order to meet WCAG 2.1 1.4.11: Non-text Contrast. [2] However, when the text input or textarea is in the error state, it already has a thicker border, and so the border only changes from red to black (alongside the addition of the yellow outline). The contrast between the red and the black is only 2.75:1, so the change in state from error to focused may not be perceivable by some users. Reduce the error border width on inputs down to 2px, which is the same as the normal border width for a form input. As the border width is now no thicker than the normal border width, remove the overrides that suppress the focus state's box shadow from errored inputs. For components with multiple inputs, like the date input,this change does make it even more important to ensure that the error message clearly explains which field has the error. Although fields with an error continue to be differentiated from others by the thicker left border and the bold error text, the red border around the specific input can now only be seen as an enhancement. We are updating the documentation in the Design System to stress the importance of being explicit about which field an error message relates to. [3] [1]: https://design-system.service.gov.uk/get-started/focus-states/ [2]: https://www.w3.org/TR/WCAG21/#non-text-contrast [3]: alphagov/govuk-design-system#1302
36degrees
pushed a commit
to alphagov/govuk-frontend
that referenced
this pull request
Jul 21, 2020
We rely on the input border getting thicker when an input is focused [1] in order to meet WCAG 2.1 1.4.11: Non-text Contrast for the focus state. [2] However, when the text input or textarea is in the error state, it already has a thicker border, and so the border only changes from red to black (alongside the addition of the yellow outline). The contrast between the red and the black is only 2.75:1, so the change in state from error to focused may not be perceivable by some users. Reduce the error border width on inputs down to 2px, which is the same as the normal border width for a form input. As the border width is now no thicker than the normal border width, remove the overrides that suppress the focus state's box shadow from errored inputs. For components with multiple inputs, like the date input,this change does make it even more important to ensure that the error message clearly explains which field has the error. Although fields with an error continue to be differentiated from others by the thicker left border and the bold error text, the red border around the specific input can now only be seen as an enhancement. We are updating the documentation in the Design System to stress the importance of being explicit about which field an error message relates to. [3] [1]: https://design-system.service.gov.uk/get-started/focus-states/ [2]: https://www.w3.org/TR/WCAG21/#non-text-contrast [3]: alphagov/govuk-design-system#1302
This was referenced Jul 21, 2020
hannalaakso
reviewed
Jul 27, 2020
36degrees
approved these changes
Jul 29, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR will make a couple of changes to guidance on:
Why
In issue 1820 in Frontend we're proposing changing the border width on inputs with errors to 2px. This is to resolve the problem of fields with errors not having enough contrast with their focused states (both being 4px wide and without enough colour contrast between them).
This will mean that inputs with errors will be less visually prominent than before. This could cause problems with grouped inputs, such as for dates. This guidance tries to make it clear that in these cases, the error message MUST directly reference the field it's referring to.