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: techniques/failures/F32.html
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
spacing within a word</h1><sectionclass="meta"><pclass="id">ID: F32</p><pclass="technology">Technology: failures</p><pclass="type">Type: Failure</p></section><sectionid="applicability"><h2>When to Use</h2>
<p>The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format individual words visually can be a failure to present meaningful sequences properly. When blank characters are inserted to control letter spacing within a word, they may change the interpretation of the word or cause it not to be programmatically recognized as a single word.
6
+
<p>The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format individual words visually can be a failure to present meaningful sequences properly. When blank characters are inserted to control letter spacing within a word, they may change the interpretation of the word or cause it not to be programmatically recognized as a single word.
7
7
</p>
8
8
<p>Inserting white space characters into an initialism is not an example of this
9
9
failure, since the white space does not change the interpretation of the
@@ -13,40 +13,40 @@
13
13
</section><sectionid="examples"><h2>Examples</h2>
14
14
<sectionclass="example">
15
15
<h3>Failure due to adding white space in the middle of a word</h3>
16
-
16
+
17
17
<p>This example has white spaces within a word to space out the letters
18
18
in a heading. Screen readers may read each letter individually
19
19
instead of the word "Welcome."</p>
20
-
20
+
21
21
<prexml:space="preserve"><codeclass="language-html"><h1>W e l c o m e</h1></code>
22
22
</pre>
23
-
23
+
24
24
<p>&nbsp; can also be used to add white space, producing similar failures:</p>
Copy file name to clipboardExpand all lines: techniques/failures/F74.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
<!DOCTYPE html><htmllang="en"><head><title>Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</h1><sectionclass="meta"><pclass="id">ID: F74</p><pclass="technology">Technology: failures</p><pclass="type">Type: Failure</p></section><sectionid="applicability"><h2>When to Use</h2>
1
+
<!DOCTYPE html><htmllang="en"><head><title>Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</h1><sectionclass="meta"><pclass="id">ID: F74</p><pclass="technology">Technology: failures</p><pclass="type">Type: Failure</p></section><sectionid="applicability"><h2>When to Use</h2>
2
2
<p>Pages that provide synchronized media alternatives to text.</p>
<p>The objective of this failure is to avoid situations in which synchronized media alternatives are not labeled with the text for which they are alternatives. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives. However, they need to be clearly labeled with the text for which they substitute, so users can find them and so users who normally expect text alternatives to synchronized media know not to look for them.</p>
Copy file name to clipboardExpand all lines: techniques/general/G120.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -23,8 +23,8 @@ <h2>Description</h2>
23
23
<sectionid="examples">
24
24
<h2>Examples</h2>
25
25
<sectionclass="example">
26
-
<p>In the following example of Japanese text, the information giving the pronunciation in Han characters (Kanji) is rendered in parentheses immediately following the text.</p>
27
-
26
+
<p>In the following example of Japanese text, the information giving the pronunciation in Han characters (kanji) is rendered in parentheses immediately following the text.</p>
Copy file name to clipboardExpand all lines: techniques/general/G145.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
-
<!DOCTYPE html><htmllang="en"><head><title>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
2
-
and background behind the text</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
1
+
<!DOCTYPE html><htmllang="en"><head><title>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
2
+
and background behind the text</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
3
3
and background behind the text</h1><sectionclass="meta"><pclass="id">ID: G145</p><pclass="technology">Technology: general</p><pclass="type">Type: Technique</p></section><sectionid="applicability"><h2>When to Use</h2>
4
4
<p>Any technology that produces visual output.</p>
Copy file name to clipboardExpand all lines: techniques/general/G18.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
-
<!DOCTYPE html><htmllang="en"><head><title>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
2
-
and background behind the text</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
1
+
<!DOCTYPE html><htmllang="en"><head><title>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
2
+
and background behind the text</title><linkrel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text)
3
3
and background behind the text</h1><sectionclass="meta"><pclass="id">ID: G18</p><pclass="technology">Technology: general</p><pclass="type">Type: Technique</p></section><sectionid="applicability"><h2>When to Use</h2>
4
4
<p>Any technology that produces visual output.</p>
Copy file name to clipboardExpand all lines: techniques/html/H62.html
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -28,8 +28,8 @@ <h2>Description</h2>
28
28
<sectionid="examples">
29
29
<h2>Examples</h2>
30
30
<sectionclass="example">
31
-
<h3>Ruby markup providing pronunciation information for an initialism</h3>
32
-
<p>This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the <code>rt</code> element). The Ruby parenthesis element <code>rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code>rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.) </p>
31
+
<h3>Ruby markup providing pronunciation information for an initialism</h3>
32
+
<p>This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the <code>rb</code> element), and the pronunciation information is shown by the Ruby text (the <code>rt</code> element). The Ruby parenthesis element <code>rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code>rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.) </p>
33
33
<prexml:space="preserve"><codeclass="language-html"><p>When we talk about these guidelines, we often just call them
34
34
<ruby>
35
35
<rb>WCAG</rb>
@@ -41,7 +41,7 @@ <h3>Ruby markup providing pronunciation information for an initialism</h3>
41
41
</section>
42
42
<sectionclass="example">
43
43
<h3>Ruby annotation for Japanese</h3>
44
-
<p>The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element <code>rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code>rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)</p>
44
+
<p>The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (kanji). the Ruby parenthesis element <code>rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code>rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)</p>
<p>This SC requires that users be provided with information about the nature of the error, including the identity of the item in error. What the user should do to correct the item in error is covered by
30
+
<ahref="error-suggestion">3.3.3 Error Suggestion</a>. Often, the error description can be phrased so that it meets both SC 3.3.1 and SC 3.3.3 at the same time. For instance, "Email is not valid" would pass SC 3.3.1, but "Please provide a valid email address in the format [email protected]" also conveys how it can be fixed and passes both.
32
31
</p>
33
-
<p>An "input error" is information provided by the user that is not accepted. This includes:</p>
32
+
<p>An "input error" includes:</p>
34
33
35
34
<ul>
36
35
<li>information that is required by the web page but omitted by the user, or</li>
@@ -78,6 +77,26 @@ <h2>Intent of Error Identification</h2>
78
77
79
78
<p>See also <ahref="error-suggestion">3.3.3: Error Suggestion</a>.</p>
80
79
80
+
<h3>User agent native HTML form validation</h3>
81
+
82
+
<p>When using native HTML <ahref="https://html.spec.whatwg.org/multipage/forms.html#client-side-form-validation">client-side form validation</a>,
83
+
user agents will automatically prevent the submission of incomplete or invalid forms, and display generic error messages to the user.
84
+
The user agent will generally set focus back to the first form field that is in error, and as a result scroll the page
85
+
so that the field in error and the generated error message will be visible in the viewport.</p>
86
+
<p>In most common user agent and screen reader combinations, the screen reader will announce the error message
87
+
and the programmatic name of the focused field.
88
+
While this meets the requirements of this success criterion, it should be noted that there are several disadvantages related to this approach:</p>
89
+
<ul>
90
+
<li>Depending on the user agent, the message may not be permanent, or fail to scroll with the page.</li>
91
+
<li>Depending on the user agent, even if a user has zoomed-in (magnified) the content, the error messages will not appear magnified,
92
+
as the text in the validation message will be displayed at the same size as the user agent interface; the message may be too small for users to read.</li>
93
+
<li>The default HTML validation error messages are generally quite generic, and they may not provide sufficiently helpful or specific suggestions to the user
94
+
that would conform to <ahref="error-suggestion">3.3.3 Error Suggestion</a>.
95
+
</li>
96
+
<li>If several errors are present, only the first error message is exposed; once the user has provided an input that conforms to the type of field,
97
+
and resubmits the form, the next error (if present) will be exposed. This means that repeated resubmissions and corrections may be required.</li>
98
+
</ul>
99
+
<p>As these problems relate to user agent behavior, developers will need to carefully consider if native browser validation is <ahref="https://www.w3.org/TR/WCAG22/#dfn-accessibility-supported">accessibility supported</a>.</p>
0 commit comments