forked from waic/wcag21
-
Notifications
You must be signed in to change notification settings - Fork 0
/
content-on-hover-or-focus.html
427 lines (290 loc) · 35.8 KB
/
content-on-hover-or-focus.html
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<title>達成基準 1.4.13: ホバー又はフォーカスで表示されるコンテンツを理解する</title>
<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
<link rel="stylesheet" type="text/css" href="understanding.css" />
<link rel="stylesheet" type="text/css" href="slicenav.css" />
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="." title="目次">目次</a></li>
<li><a href="distinguishable.html"><abbr title="Guideline">GL</abbr>: 判別可能</a></li>
<li><a href="text-spacing.html">Previous <abbr title="Success Criterion">SC</abbr>: テキストの間隔</a></li>
<li><a href="keyboard.html">Next <abbr title="Success Criterion">SC</abbr>: キーボード</a></li>
</ul>
</nav>
<nav class="navtoc">
<p>このページの内容:</p>
<ul id="navbar">
<li><a href="#intent">意図</a></li>
<li><a href="#benefits">メリット</a></li>
<li><a href="#examples">事例</a></li>
<li><a href="#resources">関連リソース</a></li>
<li><a href="#techniques">達成方法</a></li>
<li><a href="#key-terms">重要な用語</a></li>
</ul>
</nav>
<h1>達成基準 1.4.13: ホバー又はフォーカスで表示されるコンテンツを理解する</h1>
<blockquote class="scquote">
<p>達成基準 <a href="https://waic.jp/translations/WCAG21/#content-on-hover-or-focus" style="font-weight: bold;">1.4.13 ホバー又はフォーカスで表示されるコンテンツ</a> (レベル AA): ポインタホバー又はキーボードフォーカスを受け取ってから外すことで、追加コンテンツを表示させてから非表示にさせる場合は、以下の要件を全て満たす:</p>
<dl>
<dt>非表示にすることができる</dt>
<dd>ポインタホバー又はキーボードフォーカスを動かさずに追加コンテンツを非表示にする<a href="#dfn-mechanism" >メカニズム</a>が存在する。ただし、追加コンテンツが<a href="#dfn-input-error" >入力エラー</a>を伝える場合や、他のコンテンツを不明瞭にしたり置き換えたりしない場合は除く。</dd>
<dt>ホバーすることができる</dt>
<dd>ポインタホバーによって追加コンテンツを表示させることができる場合、その追加コンテンツを消すことなく、ポインタを追加コンテンツ上で動かすことができる。</dd>
<dt>表示が継続される</dt>
<dd>ホバーやフォーカスが解除される、利用者が非表示にする、又はその情報が有効でなくなるまでは、追加コンテンツが表示され続ける。</dd>
</dl>
<p>例外: 追加コンテンツの視覚的提示がユーザエージェントによって制御されていて、かつコンテンツ制作者が変更していない場合は例外とする。</p>
<p class="note">ユーザエージェントによって制御されている追加コンテンツの例としては、HTML の <a href="https://www.w3.org/TR/html/dom.html#the-title-attribute"><code>title</code> 属性</a>を用いて作られているブラウザのツールチップが挙げられる。</p>
<p class="note">ホバー時やフォーカス時に表示されるカスタムツールチップ、サブメニュー、他の非モーダルポップアップは、この達成基準の適用対象となる「追加コンテンツ」の例である。</p>
</blockquote>
<main>
<section id="intent">
<h2>意図</h2>
<p>キーボードフォーカス又はポインタホバーと連動して現れたり消えたりする追加のコンテンツはしばしばアクセシビリティの問題へ発展することがある。そのような問題の理由には以下が含まれる:</p>
<ol>
<li>利用者はインタラクションを引き起こすことを目的としていなかった可能性がある</li>
<li>利用者は新しいコンテンツが現れたことに気づかない可能性がある</li>
<li>新しいコンテンツは利用者のタスクを実行する能力を妨げる可能性がある</li>
</ol>
<p>そのようなインタラクションの例には、ホバー及びフォーカスで表示されるカスタムツールチップ、サブメニュー及びその他の非モーダルポップアップが含まれる。この達成基準の意図は、追加のコンテンツをこのように表示及び非表示にするコンテンツ制作者が、以下を利用できるような方法で利用者がインタラクションを設計しなければならないことを保証することである:</p>
<ul>
<li>追加のコンテンツを知覚できる、及び</li>
<li>ページ体験を損なうことなく非表示にすることができる。</li>
</ul>
<p>大抵はより予測可能かつアクセシブルな、ページにコンテンツを追加する方法があり、コンテンツ制作者はその方法を使用することを推奨する。コンテンツ制作者が追加のコンテンツをホバー及びキーボードフォーカスと連携して表示及び非表示にすることを<em>選んだ</em>場合、この達成基準は満たさなければならない三つの条件を指定する:</p>
<ul>
<li>非表示にすることができる</li>
<li>ホバーすることができる</li>
<li>表示が継続される</li>
</ul>
<p>それぞれは個別の節で議論されている。</p>
<div class="note"><div role="heading" class="note-title marker" aria-level="3">注記</div>
<p>この達成基準はトリガーとなるコンポーネントそのものに加えて現れるコンテンツを取り扱う。そのため、「メインにスキップ」リンクのようなキーボードフォーカスで可視になる非可視のコンポーネント (トリガーを超える<em>追加の</em>コンテンツが可視にならない) はこの達成基準では取り扱われない。</p>
</div>
<section id="dismissable">
<h3>非表示にすることができる</h3>
<p>この条件の意図は、追加のコンテンツがページの元のコンテンツを確認する又は操作することを妨げないようにすることである。拡大時、ビューポート内で表示されるページの部分はかなり縮小する。マウスの利用者は、拡大したビューポートをパンして画面の他の部分を表示するために、頻繁にポインタを動かす。しかし、この限られたビューポートで表示されるページのほぼ全域が追加のコンテンツをトリガーするかもしれず、利用者がコンテンツを再トリガーせずにパンすることを困難にする。キーボードで追加コンテンツを非表示にする方法は、回避方法を提供する。</p>
<p>代わりに、キーボードを用いてのみナビゲートするロービジョンの利用者は、拡大されたビューポートの小さい領域がホバーテキストで雑然としてほしくない。彼らは現在のフォーカスが当たっている領域を覆い隠すものをキーボードで非表示にする方法が必要である。</p>
<p>この条件を満たし、このような干渉を防ぐために、二つの方法が使用できる:</p>
<ol>
<li>余白及び情報を提供しない背景画像などの純粋な装飾コンテンツを除き、トリガーを含む他のあらゆるコンテンツを隠さないよう追加のコンテンツを配置する。</li>
<li>Esc キーを押すなど、追加のコンテンツを容易に非表示にするメカニズムを提供する。</li>
</ol>
<p>ほとんどの比較的小さいサイズのトリガーには、両方の方法が実装されることが望ましい。トリガーが大きい場合、追加コンテンツがトリガーより遠くに現れると、気づくことが難しいかもしれない。そのような場合は、二つ目の方法のみが適切かもしれない。</p>
<p>注目、明示的な確認、又は是正措置が必要な場合があるため、達成基準により、入力エラーメッセージを持続させることができる。</p>
</section>
<section id="hoverable">
<h3>ホバーすることができる</h3>
<p>この条件の意図は、ターゲットにホバーすることで現れるかもしれない追加のコンテンツがそれ自身にもホバーできるように保証することである。ホバーで現れるコンテンツは、利用者がマウスポインタをトリガーの上に固定することを求められた場合、知覚するのが難しい又は不可能な可能性がある。追加されたコンテンツが大きい場合、拡大されたビューは、利用者がそのコンテンツを完全に表示するためにスクロール又はパンする必要があることを意味し、これは、追加コンテンツが消えないように利用者がトリガーからポインタを移動できない限り不可能である。</p>
<p>もう一つの一般的な状況は、大きいポインタがプラットフォームの設定又は支援技術により選択されていた場合である。ここでは、ポインタが追加コンテンツの重要な領域を隠してしまう可能性がある。両方の状況でコンテンツを完全に見る方法は、マウスポインタをトリガーから新しいコンテンツに直接移動させることである。この機能はまた、マウスとのインタラクションのフィードバックにスクリーンリーダーを使用する利用者に重要な利点を提供する。この条件は、ほとんどの場合、追加コンテンツがターゲットに重なる又はそれが隣接して配置されていることを暗示する。</p>
</section>
<section id="persistent">
<h3>表示が継続される</h3>
<p>この条件の意図は、利用者に追加コンテンツが可視になった後、知覚するための十分な時間があるようにすることである。障害のある利用者は拡大率を変更する、ポインタを動かす、又は可視領域に新しいコンテンツを持ってくるなどの様々な理由により、より多くの時間が必要かもしれない。一度現れたら、次のことをする時までコンテンツは可視のままにするべきである:</p>
<ul>
<li>利用者が、典型的なユーザ体験と一致して、トリガー及び追加コンテンツからホバー又はフォーカスを取り除く。</li>
<li>利用者が非表示にすることができる条件を満たすために提供されたメカニズムを通して追加コンテンツを非表示にする。又は、</li>
<li>もはや有効ではない「使用中」メッセージなど、追加コンテンツにより伝えられた情報が無効になる。</li>
</ul>
</section>
<section id="additional-notes">
<h3>追加の注記</h3>
<ul>
<li>この基準は、追加コンテンツの見た目が完全にユーザエージェントにより制御されている時に、このような問題を解決することに努めていない。顕著な例は、HTML の <code>title</code> 属性を小さなツールチップとして表示するブラウザの一般的な挙動である。</li>
<li>モーダルダイアログはキーボードフォーカスを受け取らなければならないため、ホバー又はフォーカスで現れるべきではなく、この基準のスコープ外である。<a href="https://www.w3.org/TR/WCAG21/#on-focus">達成基準 3.2.1 フォーカス時</a>を参照すること。</li>
<li>ポインタホバーを通して動作できるコンテンツはキーボードフォーカスでも動作できるべきである。<a href="https://www.w3.org/TR/WCAG21/#keyboard">達成基準 2.1.1 キーボード</a>を参照すること。</li>
</ul>
</section>
</section>
<section id="benefits">
<h2>メリット</h2>
<ul>
<li>拡大してコンテンツを見ているロービジョンの利用者は、望ましい倍率を減らさなくてもより上手くホバー又はフォーカスしたコンテンツを見ることができるようになる。</li>
<li>プラットフォームの設定又は支援技術を通してマウスカーソルのサイズを大きくしている利用者は、ホバー時に隠されたコンテンツを見る方法を使用できるようになる。</li>
<li>ロービジョン又は認知障害のある利用者はホバー又はフォーカスで現れる追加コンテンツを知覚し、かつトリガーコンテンツを気を散らすことなく見るための十分な時間を持てるようになる。</li>
<li>ポインタの正確さが低い利用者は、より簡単に意図せず動作させた追加コンテンツを非表示にできるようになる。</li>
</ul>
</section>
<section id="examples">
<h2>事例</h2>
<section class="example" id="example-1-dismissable-tooltip">
<h3>事例 1: 非表示にすることができるツールチップ</h3>
<figure id="figure-mouse-tooltip-below"><img src="img/button-pointer-tooltip.png" alt="ボタンの下にツールチップが表示されている、マウスポインタが上にのっているボタンのスクリーンショット" /> <img src="img/button-pointer.png" alt="ツールチップがなく、マウスポインタが上にのっているボタンのスクリーンショット" /><figcaption>図 1 ボタンそのものを覆い隠さないように、ホバーしている LVTF ボタンの下にツールチップが表示されている。それはしかし、ボタンの下にあるコンテンツを覆い隠している (~comment-zoom-content と呼ばれている次の赤いボタン)。非表示にすることができる必須条件を満たすため、二つ目の画像で示している通り、利用者は Esc キーを押してマウスを動かさずにツールチップを消去できる。</figcaption>
</figure>
<figure id="figure-focused-button-no-tooltip"><img src="img/button-focus-indicator.png" alt="ツールチップがなく、フォーカスインジケータがあるボタンのスクリーンショット" /><figcaption>図 2 ボタンのツールチップはフォーカス時にも現れ、Esc キーで取り除くことができる。スクリーンショットは同じ LVTF ボタンのフォーカス時を表しているが、ツールチップは非表示にされ、すでに可視ではない。</figcaption>
</figure>
</section>
<section class="example" id="example-2-hoverable-tooltip">
<h3>事例 2: ホバーすることができるツールチップ</h3>
<figure id="figure-large-pointer-tooltip"><img src="img/button-pointer-on-tooltip.png" alt="大きいポインタに覆い隠されたツールチップがボタンの下に表示されている、大きいマウスポインタが上にのっているボタンのスクリーンショット" /> <img src="img/button-pointer-below-tooltip.png" alt="大きいマウスポインタがツールチップの下部にある、ツールチップが下にあるボタンのスクリーンショット" /><figcaption>図 3 ボタンのツールチップはマウスホバーの直下に表示されており、大きなポインタで簡単に隠すことができる。ツールチップそのものはホバーできるので、ツールチップのテキストを見るためにマウスポインタをその下側に下げることができる。</figcaption>
</figure>
</section>
</section>
<section id="resources">
<h2>関連リソース</h2>
<p>リソースは、情報提供のみを目的としており、推奨を意味するものではない。</p>
<ul>
<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/">Tooltip design described in WAI-ARIA Authoring Practices</a></li>
</ul>
</section>
<section id="techniques">
<h2>達成方法</h2>
<p>この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、<a href="understanding-techniques.html">WCAG 達成基準の達成方法を理解する</a>の「その他の達成方法」を参照のこと。</p>
<section id="sufficient">
<h3>十分な達成方法</h3>
<ul>
<li><a href="https://waic.jp/translations/WCAG21/Techniques/client-side-script/SCR39">SCR39: フォーカス又はホバー時のコンテンツをホバー可能、非表示可能及び表示が継続されるようにする</a></li>
<li>ARIA: role="tooltip" を使用する (将来、達成方法に追加される可能性あり)</li>
<li>CSS: hover 及び focus 疑似クラスを使用する (将来、達成方法に追加される可能性あり)</li>
</ul>
</section>
<section id="failure">
<h3>失敗例</h3>
<p>以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。</p>
<ul>
<li><a href="https://waic.jp/translations/WCAG21/Techniques/failures/F95">F95: 達成基準 1.4.13 の失敗例 － ホバーによって表示されるコンテンツがホバーできない</a></li>
<li>失敗例 － ポインタホバー又はキーボードフォーカスを動かさずにコンテンツを非表示にすることができない (将来、達成方法に追加される可能性あり)
失敗例</li>
<li>失敗例 － ホバー又はフォーカス時で表示されるコンテンツが、非表示又は無効になるまで表示され続けることができない (将来、達成方法に追加される可能性あり)</li>
</ul>
</section>
</section>
<section id="key-terms">
<h2>重要な用語</h2>
<dt id="dfn-assistive-technology">支援技術 (assistive technology)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">障害のある利用者の要件を満たすために、主流の<a href="#dfn-user-agent">ユーザエージェント</a>が提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び／又はソフトウェア。
</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。
</p>
</div>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">この文書の文脈において重要な支援技術としては、以下のものが挙げられる:
</p>
<ul xmlns="http://www.w3.org/1999/xhtml">
<li>画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
</li>
<li>スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
</li>
<li>音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
</li>
<li>音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。</li>
<li>代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
</li>
<li>代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
</li>
</ul>
</definition>
</dd>
<dt id="dfn-conformance">適合 (conformance)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">与えられた規格、ガイドライン、又は仕様のすべての要件を満たすこと。</p>
</definition>
</dd>
<dt id="dfn-input-error">入力エラー (input error)</dt>
<dd><definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">利用者が入力した情報で、受け付けられないもの。</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note"><div role="heading" class="note-title marker" aria-level="2">注記</div>
<div><p>以下のものが含まれる:</p>
<ol>
<li>その<a href="#dfn-web-page">ウェブページ</a>では必須であるが、利用者が入力しなかった情報</li>
<li>利用者が入力したが、要求されたデータ形式あるいは値ではない情報</li>
</ol>
</div>
</div>
</definition>
</dd>
<dt id="dfn-mechanism">メカニズム (mechanism)</dt>
<dd><definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">結果を得るための<a href="#dfn-process">プロセス</a>又は手法。</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note"><div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>メカニズムは、コンテンツ内で明示的に提供されることもあれば、プラットフォーム又は<a href="#dfn-assistive-technology">支援技術</a>を含む<a href="#dfn-user-agent">ユーザエージェント</a>で提供されるものに<a href="#dfn-relied-upon">依存する</a>こともある。</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note"><div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>メカニズムは、宣言する適合レベルのすべての達成基準を満たさなければならない。</p>
</div>
</definition>
</dd>
<dt id="dfn-process">プロセス (process)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">ある活動を完了させるために必要な利用者の一連の動作。</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">ショッピングサイト上の一連のウェブページで目的を果たすためには、利用者が選択肢となりうる製品、価格及び内容を閲覧した後、製品を選択して発注し、配送先情報及び支払情報を提供する必要がある。
</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">アカウント登録ページでは、登録フォームにアクセスする前に<a href="https://www.w3.org/TR/turingtest/">チューリングテスト</a>に成功する必要がある。
</p>
</definition>
</dd>
<dt id="dfn-relied-upon">依存されている (relied upon)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">その<a href="#dfn-technology">技術</a>が無効になっている場合、又はサポートされていない場合に、コンテンツが<a href="#dfn-conformance">適合</a>できないこと。
</p>
</definition>
</dd>
<dt id="dfn-technology">技術 (technology)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml"><a href="#dfn-user-agent">ユーザエージェント</a>がどのようにレンダリング、再生、又は実行するかを符号化する<a href="#dfn-mechanism">メカニズム</a>。
</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>このガイドラインで用いられている「ウェブ技術」及び (単独で用いられている) 「技術」という用語は、どちらもウェブコンテンツ技術を指す。
</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note">
<div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>ウェブコンテンツ技術には、マークアップ言語、データ形式、及びプログラム言語などがあり、これらをコンテンツ制作者が単独で、又は組み合わせて用いることによって、静的なウェブページや同期したメディアによる提示、さらには動的なウェブアプリケーションに至るまでの様々なエンドユーザ体験を作ることができる。
</p>
</div>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">ウェブコンテンツ技術のよくある事例としては、HTML、CSS、SVG、PNG、PDF、Flash、 JavaScript などがある。
</p>
</definition>
</dd>
<dt id="dfn-user-agent">ユーザエージェント (user agent)</dt>
<dd>
<definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (<a href="#dfn-assistive-technology">支援技術</a>も含む)。
</p>
</definition>
</dd>
<dt id="dfn-web-page">ウェブページ (Web page)</dt>
<dd><definition xmlns="">
<p xmlns="http://www.w3.org/1999/xhtml">単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又は<a href="#dfn-user-agent">ユーザエージェント</a>がこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。</p>
<div xmlns="http://www.w3.org/1999/xhtml" class="note"><div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="note"><div role="heading" class="note-title marker" aria-level="2">注記</div>
<p>このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。</p>
</div>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">単体のウェブリソースであり、埋め込まれている画像及びメディアのすべてを含んだもの。</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信トレイ、連絡先、カレンダーがある。受信トレイ、連絡先、又はカレンダーを表示するリンク又はボタンが提供されているが、全体としてページの URI は変更されない。</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。</p>
<p xmlns="http://www.w3.org/1999/xhtml" class="example">ブラウザで "http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは 1 ページだけのウェブサイトかもしれないし、ウェブサイトの中のほんの 1 ページなのかもしれない。</p>
</definition>
</dd>
</section>
</main>
<hr>
<div><p>訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2022 年 9 月 2 日版の原文は <a href="https://github.com/waic/w3c-wcag">WAIC の管理するレポジトリ</a>から入手可能です。</p></div>
</body>
</html>