Skip to content

Commit 3cf31a0

Browse files
patrickhlaukealastcmbgowerWilcoFiers
authored
Rewrite for 3.3.1 Error Identification understanding document (#1651)
* remove the misleading statement about screen reader users needing to know that an error occurred before hitting one of the indicators/fields. this implicitly suggests that the intent is for an error message/list to be shown to (screen reader) users before the actual form, which is not in fact the intention nor the requirement of this SC * tweak the benefit for users with cognitive/language/learning disabilities * refocus on the benefit to ALL users, not just screen reader users * ~add allowance for situations where an error indication is already self-explanatory/obvious from context (e.g. a form where fields have already explicitly been identified as mandatory/required - not necessary for compliance to now ALSO explicitly say "as we already told you, this field is mandatory")~ [potentially removed by mbgower suggestion] Closes #977 --------- Co-authored-by: Alastair Campbell Co-authored-by: Mike Gower Co-authored-by: Wilco Fiers Co-authored-by: Mike Gower
1 parent 619aa18 commit 3cf31a0

File tree

1 file changed

+83
-198
lines changed

1 file changed

+83
-198
lines changed
Lines changed: 83 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,103 @@
11
>
22
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
33
<head>
4-
<meta charset="UTF-8">meta>
4+
<meta charset="UTF-8"/>
55
<title>Understanding Error Identificationtitle>
66
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
77
head>
88
<body>
99
<h1>Understanding Error Identificationh1>
10-
10+
1111
<section id="brief">
1212
<h2>In briefh2>
1313
<dl>
1414
<dt>Goaldt><dd>Users know an error exists and what is wrong.dd>
1515
<dt>What to dodt><dd>Provide descriptive notification of errors.dd>
16-
<dt>Why it's importantdt><dd>Flagging errors helps people with reduced sight and cognitive disabilities resolve them.dd>
16+
<dt>Why it's importantdt><dd>Flagging errors helps people with reduced sight and cognitive disabilities resolve them.dd>
1717
dl>
1818

1919
section>
20-
20+
2121
<section id="intent">
2222
<h2>Intent of Error Identificationh2>
23-
24-
25-
<p>The intent of this Success Criterion is to ensure that users are aware that an error
26-
has occurred and can determine what is wrong. The error message should be as specific
27-
as possible.
28-
In the case of an unsuccessful form submission, re-displaying the form and indicating
29-
the fields in error is insufficient for some users to perceive that an error has occurred.
30-
Screen reader users, for example, will not know there was an error until they encounter
31-
one of the indicators. They may abandon the form altogether before encountering the
32-
error indicator, thinking that the page simply is not functional. Per the definition,
33-
an "input error" is information provided by the user that is not accepted. This includes:
23+
24+
<p>The intent of this success criterion is to ensure that users are aware that an error
25+
has occurred and can determine what is wrong. In the case of an unsuccessful form submission,
26+
it is not sufficient to only re-display the form without providing any hint that the submission
27+
failed.
28+
The error must be indicated in <a>texta>.
29+
Whether or not an error message provides users with sufficient information about the nature of
30+
the error, and what they should do to correct it, is covered more specifically by
31+
<a href="error-suggestion">3.3.3 Error Suggestiona>.
3432
p>
35-
33+
<p>An "input error" is information provided by the user that is not accepted. This includes:p>
34+
3635
<ul>
37-
3836
<li>information that is required by the web page but omitted by the user, orli>
39-
40-
<li>information that is provided by the user but that falls outside the required data
41-
format or allowed values.
42-
li>
43-
37+
<li>information that is provided by the user but that falls outside the required data format or allowed values.li>
4438
ul>
45-
39+
4640
<p>For example:p>
47-
41+
4842
<ul>
49-
50-
<li>the user fails to enter the proper abbreviation in to state, province, region, etc.
51-
field;
52-
li>
53-
43+
<li>the user fails to enter the proper abbreviation in a state, province, or region field;li>
5444
<li>the user enters a state abbreviation that is not a valid state; li>
55-
5645
<li>the user enters a non existent zip or postal code;li>
57-
5846
<li>the user enters a birth date 2 years in the future;li>
59-
60-
<li>the user enters alphabetic characters or parentheses into their phone number field
61-
that only accepts numbers;
62-
li>
63-
47+
<li>the user enters alphabetic characters or parentheses into their phone number field that only accepts numbers;li>
6448
<li>the user enters a bid that is below the previous bid or the minimum bid increment.li>
65-
6649
ul>
67-
50+
6851
<div class="note">
69-
7052
<p>If a user enters a value that is too high or too low, and the coding on the page automatically
7153
changes that value to fall within the allowed range, the user's error would still
7254
need to be described to them as required by the success criterion. Such an error description
7355
telling the person of the changed value would meet both this success criterion (Error
74-
Identification) and
75-
<a href="error-suggestion" class="understanding">Success Criterion 3.3.3 (Error Suggestion)a>.
56+
Identification) and <a href="error-suggestion">3.3.3 Error Suggestiona>.
7657
p>
77-
7858
div>
79-
59+
8060
<p>The identification and description of an error can be combined with programmatic information
8161
that user agents or assistive technologies can use to identify an error and provide
8262
error information to the user. For example, certain technologies can specify that
8363
the user's input must not fall outside a specific range, or that a form field is required.
84-
This type of programmatic information is not required for this success criterion, but may be covered
85-
by other criteria such as <a href="#name-role-value">4.1.2 Name, Role, Valuea>.
86-
p>
87-
88-
<p>It is perfectly acceptable to indicate the error in other ways such as image, color
89-
etc, in addition to the text description.
90-
p>
91-
92-
<p>See also
93-
<a href="error-suggestion">3.3.3: Error Suggestiona>.
94-
p>
95-
64+
Currently, few technologies support this kind of programmatic information, but this
65+
success criterion does not require, nor prevent it.p>
66+
67+
<p>It is perfectly acceptable to indicate the error in other ways such as through the use of an image,
68+
color, or other visual indicator, in addition to the text description.p>
69+
70+
<div class="note">
71+
<p>This criterion does not mandate any particular way in which errors should be displayed. Depending
72+
on the situation, it may be more suitable for all errors to be listed at the start or before a form.
73+
In other cases, it may be more appropriate to show errors inline, with error messages next to the specific
74+
fields that are in error. Errors could also be listed in an alert, or dialog. This criterion does not
75+
cover which of these methods should be used - the only requirement is for errors to be presented to users in text or a text alternative.
76+
p>
77+
div>
78+
79+
<p>See also <a href="error-suggestion">3.3.3: Error Suggestiona>.p>
80+
9681
section>
9782
<section id="benefits">
9883
<h2>Benefits of Error Identificationh2>
99-
100-
84+
10185
<ul>
102-
103-
<li> Providing information about input errors in text allows users who are blind or colorblind
104-
to perceive the fact that an error occurred.
86+
<li>
87+
Providing information about input errors in text allows users who are blind or color deficient (color blind) to perceive the fact that an error occurred.
10588
li>
106-
10789
<li>
108-
This Success Criterion may help people with cognitive, language, and learning disabilities
109-
who have difficulty understanding the meaning represented by icons and other visual
110-
cues.
111-
112-
90+
This success criterion may help people with cognitive, language, and learning disabilities
91+
who have difficulty understanding the specific reason why a form submission failed (in cases
92+
where this is not already made obvious by the nature of the form).
11393
li>
114-
11594
ul>
116-
95+
11796
section>
118-
97+
11998
<section id="examples">
12099
<h2>Examples of Error Identificationh2>
121-
100+
122101
<dl>
123102
<dt>Identifying errors in a form submissiondt>
124103
<dd>
@@ -127,11 +106,10 @@

Examples of Error Identification

127106
phone number, seating preference and e-mail address. If any of the fields of the form
128107
are either not completed or completed incorrectly, an alert is displayed notifying
129108
the user which field or fields were missing or incorrect.p>
130-
109+
131110
<div class="note">
132-
<p>This Success Criterion does not mean that color or text styles cannot be used to indicate
133-
errors. It simply requires that errors also be identified using text. In this example,
134-
two asterisks are used in addition to color.
111+
<p>This success criterion does not mean that color or text styles cannot be used to indicate
112+
errors. It simply requires that errors also be identified using text.
135113
p>
136114
div>
137115
dd>
@@ -140,159 +118,66 @@

Examples of Error Identification

140118
and providing a unique character to make it easy to search for the fields, the fields
141119
are highlighted in yellow to make it easier to visually search for them as well.dd>
142120
dl>
143-
121+
144122
section>
145-
123+
146124
<section id="resources">
147125
<h2>Resources for Error Identificationh2>
148-
149-
150-
126+
151127
section>
152-
128+
153129
<section id="techniques">
154130
<h2>Techniques for Error Identificationh2>
155-
156-
131+
157132
<section id="sufficient">
158133
<h3>Sufficient Techniques for Error Identificationh3>
159-
160-
134+
161135
<section class="situation" id="error-identification-situation-0">
162-
136+
163137
<h4>Situation A: If a form contains fields for which information from the user is mandatory.h4>
164-
138+
165139
<ul>
166-
167-
<li>
168-
169-
<a href="../Techniques/general/G83" class="general">Providing a text description that identifies the field as mandatorya>
170-
171-
li>
172-
173-
<li>
174-
175-
<a href="../Techniques/aria/ARIA2" class="aria">ARIA2: Identifying required fields with the "required" propertya>
176-
177-
li>
178-
179-
<li>
180-
181-
<a href="../Techniques/aria/ARIA21" class="aria">a>
182-
183-
li>
184-
185-
<li>
186-
187-
<a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert a>
188-
189-
li>
190-
191-
<li>
192-
193-
<a href="../Techniques/pdf/PDF5" class="pdf">a>
194-
195-
li>
196-
140+
<li><a href="../Techniques/general/G83" class="general">Providing a text description that identifies the field as mandatorya>li>
141+
<li><a href="../Techniques/aria/ARIA2" class="aria">ARIA2: Identifying required fields with the "required" propertya>li>
142+
<li><a href="../Techniques/aria/ARIA21" class="aria">a>li>
143+
<li><a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert a>li>
144+
<li><a href="../Techniques/pdf/PDF5" class="pdf">a>li>
197145
ul>
198-
199146
section>
200-
147+
201148
<section class="situation" id="error-identification-situation-1">
202-
149+
203150
<h4>Situation B: If information provided by the user is required to be in a specific data
204151
format or of certain values.
205152
h4>
206-
153+
207154
<ul>
208-
209-
<li>
210-
211-
<a href="../Techniques/aria/ARIA18" class="aria">a>
212-
213-
li>
214-
215-
<li>
216-
217-
<a href="../Techniques/aria/ARIA19" class="aria">a>
218-
219-
li>
220-
221-
<li>
222-
223-
<a href="../Techniques/aria/ARIA21" class="aria">a>
224-
225-
li>
226-
227-
<li>
228-
229-
<a href="../Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in
230-
the list of allowed values
231-
a>
232-
233-
li>
234-
235-
<li>
236-
237-
<a href="../Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or
238-
values
239-
a>
240-
241-
li>
242-
243-
<li>
244-
245-
<a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alerta>
246-
247-
li>
248-
249-
<li>
250-
251-
<a href="../Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOMa>
252-
253-
li>
254-
255-
<li>
256-
257-
<a href="../Techniques/pdf/PDF22" class="pdf">a>
258-
259-
li>
260-
155+
<li><a href="../Techniques/aria/ARIA18" class="aria">a>li>
156+
<li><a href="../Techniques/aria/ARIA19" class="aria">a>li>
157+
<li><a href="../Techniques/aria/ARIA21" class="aria">a>li>
158+
<li><a href="../Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in the list of allowed valuesa>li>
159+
<li><a href="../Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or valuesa>li>
160+
<li><a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alerta>li>
161+
<li><a href="../Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOMa>li>
162+
<li><a href="../Techniques/pdf/PDF22" class="pdf">a>li>
261163
ul>
262-
263164
section>
264-
265165
section>
266-
166+
267167
<section id="advisory">
268168
<h3>Additional Techniques (Advisory) for Error Identificationh3>
269-
270-
169+
271170
<ul>
272-
273-
<li>
274-
275-
<a href="../Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errorsa>
276-
277-
li>
278-
279-
<li>
280-
281-
<a href="../Techniques/general/G199" class="general">Providing success feedback when data is submitted successfullya>
282-
283-
li>
284-
171+
<li><a href="../Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errorsa>li>
172+
<li><a href="../Techniques/general/G199" class="general">Providing success feedback when data is submitted successfullya>li>
285173
ul>
286-
287174
section>
288-
175+
289176
<section id="failure">
290177
<h3>Failures for Error Identificationh3>
291-
292-
178+
293179
section>
294-
180+
295181
section>
296-
297182
body>
298183
html>

0 commit comments

Comments
 (0)