You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2025-08-16-accessible-error-messages-in-forms.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ date: 2025-08-16
10
10
---
11
11
12
12
When you put care into preventing errors and clearly indicating when something goes wrong, users are much more likely to successfully submit a form.
13
-
{: .fs-6 .fw-300 }
13
+
{: .lead }
14
14
15
15
In this post, we’ll walk step-by-step through how to prevent errors, indicate them clearly, and offer help with error messages in forms for different types of users.
16
16
@@ -36,15 +36,15 @@ Only ask for information you truly need in order to process the request. The few
36
36
37
37
Be clear about why you need sensitive personal information, such as an identification number, race, religion or medical data. Check your local legislation to see if you are allowed to request such private information in an open online form.
38
38
39
-
{: .info }
39
+
{: .callout .info }
40
40
In the Netherlands there are strict rules about [when to ask for a citizen service number](https://www.rijksoverheid.nl/onderwerpen/privacy-en-persoonsgegevens/vraag-en-antwoord/welke-organisaties-mogen-mijn-burgerservicenummer-bsn-gebruiken#:~:text=Alle%20overheidsorganisaties%20mogen%20gebruik%20maken%20van%20uw%20burgerservicenummer%20(BSN)). Canada has similar rules governing [how you can request Personally Identifying Information (PII)](https://www.priv.gc.ca/en/privacy-topics/privacy-laws-in-canada/the-personal-information-protection-and-electronic-documents-act-pipeda/p_principle/).
41
41
42
42
43
43
## How will I ask for this information?
44
44
45
45
The input mechanism you use to ask for information has a profound impact on your users. Should you design new custom input fields or use recognizable, familiar patterns? Please don’t reinvent the web for something as essential as form fields. As Heydon Pickering explains in his talk [Get Your Priorities Straight](https://www.youtube.com/watch?v=ediHVy0869c): “Real people aren't looking to be delighted. People want to get the task done and get on with their lives".
46
46
47
-
{: .example }
47
+
{: .callout .example }
48
48
For example: users recognize radio buttons as circles and checkboxes as squares. They know from experience they can choose one option from the radio buttons and multiple options from the checkboxes. Also, the [keyboard interaction](https://webaim.org/techniques/keyboard/#testing) for radio buttons and checkboxes differs from each other.
49
49
50
50
Some field types are better avoided due to poor usability, such as multi-selects. Using date pickers? Check the experience for keyboard or screen reader users.
@@ -56,7 +56,7 @@ For a deep dive into asking for dates in forms, see the GOV.UK Design System pat
56
56
57
57
Don't force the user to enter information (like an email address) more than once, or expect them to remember entries entered on previous screens, like in a multistep form.
58
58
59
-
{: .info }
59
+
{: .callout .info }
60
60
This success criterion was added in [WCAG 2.2: 3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
61
61
62
62
## What information can I provide in advance to help the user?
@@ -88,7 +88,7 @@ One option could be that when most fields are required, mark the *optional* ones
88
88
89
89
But, keep the way you indicate required/non-required fields consistent with all forms in your site.
90
90
91
-
{: .example }
91
+
{: .callout .example }
92
92
For example: "Please complete all fields. If a field is not required, it will be labeled "(Optional)".
93
93
94
94
Whatever you choose, be consistent within the form and across all forms on your website. Inform users above the form how field requirements are indicated.
@@ -101,7 +101,7 @@ Checking during typing can be confusing. Imagine typing an email address and see
101
101
102
102
That leaves two options: check after leaving a field, or after submission. These can be combined. For certain fields, like dates that must be in the future, immediate checking is helpful. But checking after submission is always necessary.
103
103
104
-
{: .warning }
104
+
{: .callout .warning }
105
105
HTML5 form validation is not accessible at this moment (in 2025). The W3C summarizes the options in [Validating Input ](https://www.w3.org/WAI/tutorials/forms/validation/). "If your web browser supports HTML5, it will not allow you to submit the form without entering text into the input field. Instead, it will display a message that is generated by the web browser itself". Write custom error messages and provide server side generated error messages. The W3C explains the options in [Validating Input ](https://www.w3.org/WAI/tutorials/forms/validation/).
106
106
107
107
## How do I indicate that an answer is incomplete or filled out incorrectly?
@@ -117,7 +117,7 @@ Use more than color alone to indicate errors. A user with visual impairments or
117
117
118
118
Messages like “This field is required” or “Invalid value” don’t offer much help. Write clear error messages that explain what’s missing or needs changing.
119
119
120
-
{: .example }
120
+
{: .callout .example }
121
121
“Enter your first name”
122
122
“Your chosen password is too short. It must be at least 12 characters long.”
123
123
“The expiration date must be in the future.”
@@ -130,7 +130,7 @@ You click "Send" and… nothing happens. Or you're redirected to the homepage. W
130
130
131
131
Give users clear confirmation that their form has been submitted and what will happen next. You can also include this messsage in a confirmation email.
132
132
133
-
{: .example }
133
+
{: .callout .example }
134
134
A confirmation text could be:
135
135
Thank you for your registration for our workshop "Knitting socks". A confirmation email has been sent to [email protected] with the time and location of the workshop. If you haven't received an email? [Please contact us](#).
136
136
@@ -142,7 +142,7 @@ Don't hide contact details. They shouldn't be buried at the bottom of the form,
142
142
143
143
Always offer multiple ways to get in touch on your contact page — not everyone can make a phone call.
144
144
145
-
{: .example }
145
+
{: .callout .example }
146
146
A help text could be:
147
147
Do you need help filling out this form or do you have questions? [Please contact us](#).
Copy file name to clipboardExpand all lines: _posts/2025-08-27-offer-multiple-ways-to-contact-you.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ excerpt: "It’s better to offer multiple ways to get in touch, so people can ch
9
9
date: 2025-08-27
10
10
---
11
11
You want to reach out to customer service, and they say *“Send us a WhatsApp message.”* What if you don’t use WhatsApp, or cannot make a phone call, or use the chatbox?
12
-
{: .fs-6 .fw-300 }
12
+
{: .callout .lead }
13
13
By offering multiple contact options, you make sure every customer has a way to connect.
14
-
{: .fs-6 .fw-300 }
14
+
{: .callout .lead }
15
15
16
16
## Don’t make getting in touch their problem
17
17
@@ -109,7 +109,7 @@ Provide an address on your website where customers can send a letter.
109
109
110
110
It’s essential to provide multiple options for people to contact you. And don’t just ask for their preferences; respect them.
111
111
112
-
{: .example }
112
+
{: .callout .example }
113
113
You could ask for example:
114
114
“Would you like us to call you back or send an email instead?”
0 commit comments