1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: Alerts
slug: Web/Accessibility/ARIA/forms/alerts
translation_of: Web/Accessibility/ARIA/forms/alerts
---
<h2 id="问题">问题</h2>
<p>您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。</p>
<h2 id="表单">表单</h2>
<p>首先，请阅读有关<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> technique</a>所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。</p>
<p>这是一个示例表单：</p>
<pre class="brush: html notranslate"> <form method="post" action="post.php">
<fieldset>
<legend>Please enter your contact details</legend>
<label for="name">Your name (required):</label>
<input name="name" id="name" aria-required="true"/>
<br />
<label for="email">E-Mail address (required):</label>
<input name="email" id="email" aria-required="true"/>
<br />
<label for="website">Website (optional):</label>
<input name="website" id="website"/>
</fieldset>
<label for="message">Please enter your message (required):</label>
<br />
<textarea name="message" id="message" rows="5" cols="80"
aria-required="true"></textarea>
<br />
<input type="submit" name="submit" value="Send message"/>
<input type="reset" name="reset" value="Reset form"/>
</form>
</pre>
<h2 id="检查有效性并通知用户"><span>检查有效性并通知用户</span></h2>
<p>表单有效性检验由这几个步骤组成：</p>
<ol>
<li>检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例，我们将检查电子邮件地址是否包含“ @”符号，以及名称条目是否包含至少1个字符。</li>
<li>如果不满足上述条件，则该字段的<code>aria-invalid</code>属性将被赋予“ <code>true</code>”值。</li>
<li>如果不符合条件，用户将被通过警报来通知。 我们将使用简单的WAI-ARIA小部件来进行通知，而不是使用JavaScript的“<code>alert</code>”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由JavaScript默认的“<code>alert</code>”功能中的“ <code>onblur</code>”处理函数引起）。</li>
</ol>
<p>下面是一个能够被插入在结束“ <code>head</code>”标签上方的示例JavaScript代码 </p>
<pre class="brush: js notranslate"> <script type="application/javascript">
function removeOldAlert()
{
var oldAlert = document.getElementById("alert");
if (oldAlert){
document.body.removeChild(oldAlert);
}
}
function addAlert(aMsg)
{
removeOldAlert();
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode(aMsg);
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
}
function checkValidity(aID, aSearchTerm, aMsg)
{
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
addAlert(aMsg);
} else {
elem.setAttribute("aria-invalid", "false");
removeOldAlert();
}
}
</script>
</pre>
<h2 id="checkValidity_函数"><span class="mw-headline" id="The_checkValidity_function"><code>checkValidity</code> 函数</span></h2>
<p>JavaScript中用于表单验证的主要方法是<code>checkValidity</code>函数。 此方法采用三个参数：要验证的<code>输入</code>的ID，要确保有效性的搜索项，以及要插入警报中的错误消息。</p>
<p>要查看其是否有效，该函数将检查<code>输入</code>的<code>indexOf</code>值是否大于<code>-1</code>。 如果在值内找不到搜索词的索引，则返回<code>-1</code>或更小的值。</p>
<p>如果无效，这个函数会执行这两个事情：</p>
<ol>
<li>它会把这个字段的<code>aria-invalid</code>属性设置为“<code>true</code>”，指示用户那里有无效的内容。</li>
<li>它会调用<code>addAlert</code>函数来使用给定的错误信息添加警告。</li>
</ol>
<p>如果搜索词被找到，<code>aria-invalid</code>值会被重置为“<code>false</code>”。此外，所有剩余警告都将被删除。</p>
<h2 id="addAlert_函数"><span class="mw-headline" id="The_addAlert_function"><code>addAlert</code> 函数</span></h2>
<p>此功能首先删除所有旧警报。 该函数很简单：它查找ID为“<code>alert</code>”的元素，如果找到，则将其从<a href="https://wiki.developer.mozilla.org/zh_CN/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">文档对象模型</a>中删除。</p>
<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">接下来，这个函数创建一个</span></font><code>div</code>元素来保存警告文本。 它得到了一个 “<code>alert</code>”的ID.，并且它具有“<code>alert</code>”角色集。 这实际上是受ARIA启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于<a href="http://www.w3.org/TR/xhtml-role/">XHTML角色属性模块</a>，为简单起见，该模块简单地移植到HTML。</p>
<p>这些文字被加入这个<code>div</code>元素，然后这个<code>div</code>元素被加入文档。</p>
<p>发生这种情况时，当此<code>div</code>出现时，Firefox将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于Firefox中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。</p>
<h2 id="修改“onblur”_事件"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">修改“<code>onblur</code>” 事件</span></h2>
<p>现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入：</p>
<pre class="brush: html notranslate"> <input name="name" id="name" aria-required="true"
onblur="checkValidity('name', ' ', 'Invalid name entered!');"/>
<br />
<input name="email" id="email" aria-required="true"
onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
</pre>
<p><strong>测试示例</strong></p>
<p>如果你在使用Firefox 3和一个当前支持的屏幕阅读器，试试看下面的操作：</p>
<ol>
<li>在姓名输入框中，只输入你的名。按下Tab键时，您会听到警告，提示您输入了无效的姓名。 然后，您可以向后移Tab键并更正错误。</li>
<li>输入不带“ @”符号的电子邮件地址。 跳出此字段时，您应该听到一条警告，提示您未输入有效的电子邮件地址。</li>
</ol>
<p>在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是JAWS 8不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。</p>
<h2 id="您可能遇到的一些问题"><span class="mw-headline" id="A_few_questions_that_you_might_have">您可能遇到的一些问题</span></h2>
<dl>
<dt>
<p>Q. 为什么在某些输入中同时在标签文本和“<code>aria-required</code>”属性中都添加了“<code>(required)</code>”？</p>
</dt>
<dd>A. 如果这是一个实例中的表格，并且尚不支持ARIA的浏览器正在访问该网站，我们仍然希望表明这是必填字段。</dd>
<dt>Q. 为什么不将焦点自动设置回无效字段？</dt>
<dd>A. 因为Windows API规范（可能还有其他规范）不允许这样做。 同样，让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。</dd>
</dl>
<div class="warning">TBD:<span>让我们重新考虑一下-就个人而言，我认为如果不引起键盘陷阱，设置焦点可能会很好。</span></div>
|
