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
|
---
title: 基本表單應用
slug: Web/Accessibility/ARIA/forms/Basic_form_hints
tags:
- 待翻譯
translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
---
<h2 id="Form_labels" name="Form_labels">表單的 label</h2>
<p>當使用傳統的 HTML 表單元素建立表單時，提供控制用的標籤（label）以及將標籤與對應表單元素建立關聯是非常重要的。當 screen reader （例如瀏覽器、電子郵件……等等）瀏覽一個頁面時，screen reader 會顯示 form controls ，但若沒有標示 control 和 label 之間的關聯， screen reader 沒法知道哪個 label 是對應哪個 control。</p>
<p>下面的範例顯示一個使用標籤的表單。注意每一個 {{ HTMLElement("input") }} 元件都有 <strong><code>id</code></strong>，每一個 {{ HTMLElement("label") }} 元件有 <strong><code>for </code></strong>屬性，用來對應 {{ HTMLElement("input") }} 元素的<strong> </strong><strong><code>id</code></strong> 。</p>
<p><em>範例 1. 使用 label 的簡易表單</em></p>
<pre class="brush: html"><form>
<ul>
<li>
<input id="wine-1" type="checkbox" value="riesling"/>
<label for="wine-1">Berg Rottland Riesling</label>
</li>
<li>
<input id="wine-2" type="checkbox" value="weissbergunder"/>
<label for="wine-2">Weissbergunder</label>
</li>
<li>
<input id="wine-3" type="checkbox" value="pinot-grigio"/>
<label for="wine-3">Pinot Grigio</label>
</li>
<li>
<input id="wine-4" type="checkbox" value="gewurztraminer"/>
<label for="wine-4">Berg Rottland Riesling</label>
</li>
</ul>
</form>
</pre>
<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">使用 ARIA 標籤</h2>
<p>HTML 的 {{ HTMLElement("label") }} 元素適用於表單相關元素 , 但是許多表單控件被實現為動態JavaScript小部件 , 使用 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }}。 <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> , 來自 W3C 的網路無障礙計畫 ( <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> ) 的<strong>無障礙互聯網應用程序</strong>規範 ( <strong>Accessible Rich Internet Applications</strong> specification ) , 為這些情況提供了 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a></code> 屬性。</p>
<p>下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 <code><strong>aria-labelledby</strong></code> 屬性設置為 <code>"rg1_label"</code> , 在第一行中元素 {{ HTMLElement("h3") }} 的 <strong><code>id</code> </strong>, 即單選按鈕組的標籤。</p>
<p><em>範例 2. </em>使用無序列表實現的單選按鈕組</p>
<pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3>
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
<li id="r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Thai
</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Subway
</li>
<li id="r3" tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif" /> Radio Maria
</li>
</ul>
</pre>
<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describing with ARIA</h2>
<p>Form controls sometimes have a description associated with them, in addition to the label. ARIA provides the <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> attribute to directly associate the description with the control.</p>
<p>The example below shows a {{ HTMLElement("button") }} element that is described by a sentence in a separate {{ HTMLElement("div") }} element. The <strong>aria-describedby</strong> attribute on the {{ HTMLElement("button") }} references the <strong>id</strong> of the {{ HTMLElement("div") }}.</p>
<p><em>Example 3. A button described by a separate element.</em></p>
<pre class="brush: html"><button aria-describedby="descriptionRevert">Revert</button>
<div id="descriptionRevert">Reverting will undo any changes that have been made
since the last save.</div></pre>
<p>(Note that the <strong>aria-describedby</strong> attribute is used for other purposes, in addition to form controls.)</p>
<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Required and invalid fields</h2>
<p>Web developers typically use presentational strategies to indicated required or invalid fields, but assistive technologies (ATs) cannot necessarily infer this information from the presentation. ARIA provides attributes for indicating that form controls are required or invalid:</p>
<ul>
<li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> property can be applied to a form element to indicate to an AT that it is required to complete the form.</li>
<li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> state can be programmatically applied to indicate to an AT which data fields have incorrect data, so that the user knows they have entered invalid data.</li>
</ul>
<p>The example below shows a simple form with three fields. On lines 4 and 12, the <strong>aria-required</strong> attributes are set to true (in addition to the asterisks next to the labels) indicating that the name and email fields are required. The second part of the example is a snippet of JavaScript that validates the email format and sets the <strong>aria-invalid</strong> attribute of the email field (line 12 of the HTML) according to the result (in addition to changing the presentation of the element).</p>
<p><em>Example 4a. A form with required fields.</em></p>
<pre class="brush: html"><form>
<div>
<label for="name">* Name:</label>
<input type="text" value="name" id="name" aria-required="true"/>
</div>
<div>
<label for="phone">Phone:</label>
<input type="text" value="phone" id="phone" aria-required="false"/>
</div>
<div>
<label for="email">* E-mail:</label>
<input type="text" value="email" id="email" aria-required="true"/>
</div>
</form></pre>
<p><em>Example 4b. Part of a script that validates the form entry.</em></p>
<pre class="brush: js">var validate = function () {
var emailElement = document.getElementById(emailFieldId);
var valid = emailValid(formData.email); // returns true if valid, false otherwise
emailElement.setAttribute("aria-invalid", !valid);
setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
};</pre>
<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">提供有幫助的錯誤訊息</h2>
<p>繼續閱讀了解如何使用 <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">ARIA alerts to enhance forms</a>.</p>
<div class="note">TBD: we should either combine into one article or separate into techniques, or both. Also, is ARIA markup appropriate for error messages in a page loaded after server side validation?</div>
<p>參閱 <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> .</p>
|
