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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: 'ARIA: dialog role'
slug: Web/Accessibility/ARIA/Roles/dialog_role
tags:
- ARIA
- Web Development
- 접근성
translation_of: Web/Accessibility/ARIA/Roles/dialog_role
---
<p>{{draft()}}</p>
<p>\{{ariaref}}</p>
<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> 역할(role)은 HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는데 사용됩니다. 다이얼로그는 일반적으로 오버레이를 사용하여 페이지 위에 표시됩니다. 다이얼로그는 비모달(non-modal) (열린 이후에도 다이얼로그 바깥의 콘텐츠와 상호작용할 수 있습니다) 또는 모달(오로지 다이얼로그 콘텐츠와 상호작용할 수 있습니다) 형태일 수 있습니다.</span></p>
<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>>
<h2 <strong>id="dialog1Title"</strong>>귀하의 개인정보가 성공적으로 갱신되었습니다.</h2>
<p <strong>id="dialog1Desc"</strong>>
<a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
</p>
<button>닫기</button>
</div></pre>
<h2 id="설명">설명</h2>
<p>다이얼로그 요소를 마크업하는 것은 보조 기술(Assistive Technology)이 다이얼로그의 콘텐츠가 그룹하 되어 페이지의 나머지 콘텐츠와 분리됨을 식별하는 것을 돕습니다. 하지만, 단순히 <code>role="dialog"</code>를 추가하는 것으로 다이얼로그의 접근성을 높이지 못합니다. 추가적으로 다음 항목들이 충족되어야 합니다:</p>
<ul>
<li>다이얼로그의 레이블이 올바르게 지정되어야 합니다.</li>
<li>키보드 포커스가 올바르게 관리되어야 합니다.</li>
</ul>
<p>아래 섹션들은 이 두가지 요구 사항을 어떻게 만족시킬 수 있을지 설명합니다.</p>
<h4 id="레이블링">레이블링</h4>
<p>다이얼로그 요소 자체가 포커스를 가질 필요는 없지만, 여전히 레이블링을 할 필요가 있습니다. 다이얼로그에 주어진 레이블은 다이얼로그 내 상호작용 가능한 컨트롤들에 contextual information를 제공합니다. 예를 들어, 다이얼로그의 레이블은 내부의 컨트롤들의 레이블의 그롭화된 레이블처럼 작동합니다. (<code><legend></code> 요소가 내부의 <code><fieldset></code> 요소에 그룹화된 레이블을 제공하는 것과 비슷합니다)</p>
<p>만약 다이얼로그가 이미 눈에 보이는 타이틀바를 가지고 있다면, 그 안속의 텍스트는 다이얼로그를 레이블하는데 사용될 수 있습니다. 이를 이루기 위해 <code>role="dialog"</code> 속성을 가진 요소에 <code>aria-labelledby</code> 속성을 사용합니다. 또한, 만약 다이얼로그에 제목 외의 추가적인 설명 텍스트가 있다면, 그 텍스트는 <code>aria-describedby</code> 속성을 사용하여 다이얼로그에 관련되게 만들 수 있습니다. 이러한 방법은 아래 코드를 통해 확인하실 수 있습니다:</p>
<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>>
<h2 <strong>id="dialog1Title"</strong>>귀하의 개인정보가 성공적으로 갱신되었습니다.</h2>
<p <strong>id="dialog1Desc"</strong>>
<a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
</p>
<button>닫기</button>
</div></pre>
<p> </p>
<div class="note">비가상 모드에서 작동하는 스크린 판독기에 의해 인지되기 위해서는 다이얼로그 제목과 설명 텍스트가 포커스가 가능하지 않아야 한다는 점을 유의하십시오. ARIA 다이얼로그 역할과 레이블링 기술은 다이얼로그로 포커스가 이동하였을 때 스크린 판독기가 다이얼로그의 정보를 인지할 수 있도록 합니다.</div>
<h4 id="Focus_management_포커스_관리">Focus management 포커스 관리</h4>
<p>다이얼로그는 키보드 포커스를 관리하는 방법에 대한 특별한 요구 사항이 있습니다.</p>
<ul>
<li>다이얼로그는 최소한 한 개 이상의 포커스 가능한 컨트롤이 있어야 합니다. 대부분의 다이얼로그는 "닫기", "확인" 또는 "취소"와 같은 버튼들이 존재합니다. 더 나아가 폼 또는 탭 같은 위젯 컨테이너 등 얼마든지 포커스 가능한 요소들을 가질 수 있습니다.</li>
<li>다이얼로그가 화면에 나타났을 때, 다이얼로그 안의 기본 포커스 가능한 컨트롤로 키보드 포커스를 이동시켜야 합니다. 예를 들어 간단한 메시지만을 제공하는 다이얼로그라면 "확인" 버튼이, 폼을 제공하는 다이얼로그의 경우는 폼의 첫 번째 필드가 기본으로 포커스 될 것입니다.</li>
<li>다이얼로그가 닫힌 이후, 키보드 포커스는 다이얼로그를 열기 전에 있었던 곳으로 다시 이동해야 합니다. 그렇지 않으면 포커스가 페이지의 첫 번째 부분으로 초기화될 수 있습니다.</li>
<li>대부분의 다이얼로그는 탭 순서가 <em>감싸지길</em> 기대합니다. 이는 사용자가 다이얼로그 안의 마지막 포커스 가능한 요소에 도달했을 때, 탭을 누르면 첫 번째 포커스 가능한 요소로 포커스가 이동하길 원합니다. 즉, 탭 순서는 다이얼로그 안에 갇혀 있어야 합니다. (<em>역자 : "Focus Trap"으로 관련 자료들을 열람하실 수 있습니다</em>)</li>
<li>만약 다이얼로그가 움직이거나 크기가 변경될 수 있는 경우, 마우스를 사용하는 사용자가 수행하는 동작을 키보드를 사용하는 사용자도 거의 비슷하게 조작할 수 있도록 보장하십시오. 비슷하게, 만약 다이얼로그가 툴바 또는 context menus 처럼 특별한 기능을 제공하는 경우, 이들 또한 키보드 사용자에 의해서도 접근 가능하고 조작이 가능해야 합니다.</li>
<li>다이얼로그는 모달 또는 비모달일 수 있습니다. 만약 모달 다이얼로그가 화면에 나타나면, 다이얼로그 밖의 페이지 콘텐츠들과 상호작용하는 것은 불가능합니다. 다른 말로, 모달 다이얼로그가 나타나 있는한 메인 애플리케이션의 UI 또는 페이지 콘텐츠는 일시적으로 비활성화 상태여야 합니다. 비모달 다이얼로그는 열러 있는 동안에도 다이얼로그 바깥의 콘텐츠들과 상호작용이 가능합니다. 비모달 다이얼로그를 위해서 열려 있는 다이얼로그와 메인 페이지간에 포커스를 이동시킬 수 있는 전역 키보드 단축키가 필요하다는 점을 유의하십시오.</li>
</ul>
<p> </p>
<h3 class="highlight-spanned" id="관련된_ARIA_역할_상태_및_속성"><span class="highlight-span">관련된 ARIA 역할, 상태 및 속성</span></h3>
<dl>
<dt><code><span class="highlight-span">aria-labelledby</span></code></dt>
<dd><span class="highlight-span">다이얼로그에 label을 하려면 이 속성을 사용하십시오. 보통, 다이얼로그의 제목 요소의 id값이 aria-labelledby 속성의 값이 됩니다.</span></dd>
<dt><code>aria-describedby</code></dt>
<dd>다이얼로그의 콘텐츠를 묘사하기 위해 이 속성을 사용하십시오.</dd>
</dl>
<h3 id="Possible_effects_on_user_agents_and_assistive_technology">Possible effects on user agents and assistive technology </h3>
<p>When the <code>dialog</code> role is used, the user agent should do the following:</p>
<ul>
<li>Expose the element as a dialog in the operating system's accessibility API.</li>
</ul>
<p>When the dialog is correctly labeled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element. </p>
<div class="note"><strong>Note:</strong> Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.</div>
<h3 id="예제">예제</h3>
<h4 id="예제_1_폼을_포함하는_다이얼로그">예제 1: 폼을 포함하는 다이얼로그</h4>
<pre class="brush: html"> <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
<h2 id="dialog1Title">구독하기</h2>
<p id="dialog1Desc">우리는 이 정보를 제 3자에게 제공하지 않습니다.</p>
<form>
<p>
<label for="firstName">이름</label>
<input id="firstName" type="text" />
</p>
<p>
<label for="lastName">성</label>
<input id="lastName" type="text"/>
</p>
<p>
<label for="interests">관심분야</label>
<textarea id="interests"></textarea>
</p>
<p>
<input type="submit" value="정보 저장하기"/>
</p>
</form>
</div></pre>
<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">Example 2: A dialog based on a Fieldset as fallback content</h4>
<p>To support browsers or AT products that do not support ARIA mark up, it's also possible to use apply the dialog markup to a fieldset element as fallback content. This way the dialog title will still be announced correctly:</p>
<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
<strong><legend></strong>
<span id="dialog1Title">Your personal details were successfully updated.</span>
<span id="dialog1Desc">You can change your details at any time in the user account section.</span>
</legend>
<button>Close</button>
</fieldset></pre>
<h4 id="작업된_예제">작업된 예제:</h4>
<ul>
<li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li>
</ul>
<h3 id="Notes">Notes </h3>
<div class="note"><strong>Note:</strong> While it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate that content virtually to use their screen reader's virtual cursor. Because of this, dialogs are considered to be a special case of the application role: They are expected to be navigated by screen reader users in a non-virtual navigation mode.</div>
<h3 id="사용되는_ARIA_속성">사용되는 ARIA 속성</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog</a></li>
<li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li>
<li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li>
</ul>
<h3 id="관련된_ARIA_기술">관련된 ARIA 기술 </h3>
<ul>
<li><a href="/en/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Using the alertdialog role</a></li>
</ul>
<h3 id="Compatibility">Compatibility</h3>
<p class="comment">TBD: Add support information for common UA and AT product combinations</p>
<h3 id="Additional_resources">Additional resources</h3>
<p> </p>
|
