blob: 47140f4a72c56f8ed7d76ff2770c42b536a7388f (
plain)
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
|
---
title: 기본적인 폼 힌트
slug: Web/Accessibility/ARIA/forms/Basic_form_hints
tags:
- ARIA
- Forms
- 접근성
translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
---
<p><span class="seoSummary">전통적인 HTML 폼 관련 요소를 사용하여 폼을 구현할 때 컨트롤에 레이블을 지정하고 레이블을 컨트롤과 명시적으로 연결하는 것이 중요합니다.</span> 스크린 리더 사용자가 페이지를 탐색할 때, 스크린 리더는 폼 컨트롤을 알려주지만, 레이블과 폼이 직접적으로 연결되지 않으면 스크린 리더는 어떤 레이블이 적절한지 알 방법이 없습니다. </p>
<p>아래의 예는 레이블이 있는 간단한 폼을 보여줍니다. 각{{ HTMLElement("input") }} 요소는 <code>id</code>를 가지고 있고, 각{{ HTMLElement("label") }} 요소는 자신과 연결된 {{ HTMLElement("input") }}의 id를 나타내는 <code>for</code> 속성을 가지고 있습니다.</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="pinot-blanc"/>
<label for="wine-2">Pinot Blanc</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">Gewürztraminer</label>
</li>
</ul>
</form>
</pre>
<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">ARIA로 라벨링 하기</h2>
<p>HTML {{ HTMLElement("label") }} 요소는 폼 관련 요소로 적당하지만, 많은 폼 컨트롤은 {{ HTMLElement("div") }}나 {{ HTMLElement("span") }}를 사용한 동적인 Javascript 위젯으로 구현되어있습니다. W3C의 <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>에서 만들어진 <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, <strong>Accessible Rich Internet Applications</strong> 사양은 이러한 경우를 위해 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> 속성을 제공하고 있습니다.</p>
<p>아래의 예에서는 순서 없는 리스트를 사용하여 구현한 라디오 버튼 그룹을 보여주고 있습니다. 3행의 {{ HTMLElement("ul") }} 요소에 <code>aria-labelledby</code> 속성에 라디오 그룹의 레이블인 {{ HTMLElement("h3") }} 요소의 <code>id</code> <code>rg1_label</code>을 설정했습니다. </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">ARIA로 설명하기</h2>
<p>폼 컨트롤을 가끔 label 외에 추가설명이 있는 경우가 있다. ARIA는 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code> 속성을 사용하여 설명을 컨트롤과 직접 연관시킵니다. </p>
<p>아래 예제는 {{ HTMLElement("div") }} 안의 문장이 {{ HTMLElement("button") }} 요소를 설명하는 것을 보여줍니다. {{ HTMLElement("button") }}의 <code>aria-describedby</code> 속성은 {{ HTMLElement("div") }}의 <code>id</code>를 참조합니다. </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>
<div class="note">
<p><strong>Note</strong>: <code>aria-describedby</code> 속성은 폼 컨트롤 외에도 다른 용도로 사용됩니다. </p>
</div>
<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">필수 필드와 유효하지 않은 필드 </h2>
<div class="note">
<p><strong>Note</strong>: 현재는 전 세계 사용자의 97%가 <code>required</code>를 사용할 수 있으므로 <code>required</code>와 <code>aria-required</code> 모두를 사용하는 것은 더는 권장하지 않습니다.</p>
</div>
<p>일반적으로 웹 개발자는 필수 필드와 유효하지 않은 필드를 나타내기 위해서 시각적인 방법을 사용합니다. 보조 기술(ATs)은 언제나 표시된 것을 통해서 정보를 추측하지는 않습니다. ARIA 는 폼 컨트롤의 필수나 유효하지 않음을 나타내는 속성을 제공합니다. </p>
<ul>
<li>AT에 폼을 완료하기 위한 필수요소임을 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required">aria-required</a></strong> 속성을 폼에 적용할 수 있습니다. </li>
<li>데이터 필드에 올바르지 않은 데이터가 있는 것을 AT에 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid">aria-invalid</a></strong> 상태를 적용하는 것으로 사용자는 올바르지 않은 데이터를 입력했다는 것을 알 수 있습니다. </li>
</ul>
<p>아래의 예제는 세 개의 필드가 있는 간단한 폼을 보여줍니다. 4행과 12행에서는 <code>aria-required</code> 속성이 true(레이블 옆에 별표와 함께)로 설정되어 name과 email 필드가 필수임을 나타냅니다. 두 번째 예제는 email 형식을 검증하고 그 결과에 따라서 email 필드(HTML 12행)의 (요소를 시각적으로 변경하는 것과 함께) <code>aria-invalid</code> 속성을 설정하는 Javascript 스니펫입니다. </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>폼 항목의 유효성을 검사하는 스크립트는 다음과 같습니다. </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>
<p>폼 접근성을위한 ARIA 사용에 대한 자세한 지침은 <a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> 문서를 참조하세요. </p>
|
