blob: f878ae0eaa5fff1727c5f0c4fc08c1ac4cc6e1a3 (
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
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
|
---
title: 'ARIA: figure ロール'
slug: Web/Accessibility/ARIA/Roles/Figure_Role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Figure_Role
---
<div>\{{ariaref}}</div>
<p>ARIA の <code>figure</code> ロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。</p>
<pre class="brush: html"><div role="figure" aria-labelledby="caption">
<img src="image.png"
alt="画像の完全な代替説明">
<p id="caption">図表 1: キャプション</p>
</div>
</pre>
<p>上記の例では、画像とキャプションの2つの別々のコンテンツ項目で構成される図表があります。 これは、コンテンツを <code>role="figure"</code> を使用して図表として識別する {{htmlelement("div")}} 要素で囲まれます。</p>
<p>図表を作成するために ARIA を使用する代わりに、{{htmlelement("figcaption")}} 要素と共に、ネイティブな意味論の HTML {{htmlelement("figure")}} 要素の使用を検討してください。 以下の{{anch("Best practices","ベストプラクティス")}}をご覧ください。</p>
<h2 id="Description" name="Description">説明</h2>
<p>一緒にグループ化され、図表（画像、動画、音声、コードスニペット、または他のコンテンツを含む）として消費されるべきコンテンツは、 <code>role="figure"</code> を使用して図表として識別できます。</p>
<p>図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセス可能であることを確認するべきです。 例えば、支援技術のユーザーがキーボードやマウスなどで操作できることを確認してください。</p>
<p>図表にキャプションやラベルを追加する場合は、さまざまな方法でキャプションやラベルを追加できます。 図表を説明するコンテンツを含む要素に ID を追加し、図表上の適切な属性でその ID を参照して、次のように図表をラベルに関連付けることができます。</p>
<pre class="brush: html"><div role="figure" aria-labelledby="figure-1">
...
<p id="figure-1">図表を説明するテキスト。</p>
</div></pre>
<ul>
<li>テキストが簡潔なラベルである場合は、<code>aria-labelledby</code> を使用してください。</li>
<li>テキストがより長い説明である場合は、<code>aria-describedby</code> を使用してください。</li>
</ul>
<p>ここでも、ARIA 無しで、HTML の {{htmlelement("figure")}} 要素と {{htmlelement("figcaption")}} 要素を使用して、意味論的に行うことができます。</p>
<pre class="brush: html"><figure>
...
<figcaption>図表を説明するテキスト。</figcaption>
</figure></pre>
<ul>
</ul>
<p>ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナの <code>aria-label</code> 属性を使用できます。</p>
<pre class="brush: html"><div role="figure" aria-label="図表を説明するテキスト。">
...
</div></pre>
<p><code>aria-label</code> は <code><figure></code> と一緒に使うことができます。</p>
<pre class="brush: html"><figure aria-label="図表を説明するテキスト。">
...
</figure></pre>
<p>一般的には、メインテキストから図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。</p>
<div class="note">
<p><strong>注</strong>: 可能な限り、意味論的 HTML 要素を使用して図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするべきです。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p>
</div>
<p> </p>
<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3>
<dl>
<dt>aria-describedby</dt>
<dd>キャプションとしての参照テキストを含む要素の ID。</dd>
<dt>aria-labelledby</dt>
<dd>ラベルとしてのテキストを含む要素の ID。</dd>
<dt>aria-label</dt>
<dd>ラベルとして機能することができるテキストを含む要素がない場合は、<code>figure</code> ロールを持つ要素や <code><figure></code> 要素の <code>aria-label</code> の値として直接ラベルを追加できます。</dd>
</dl>
<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>
<p>ロールに固有のキーボードインタラクションはありません。</p>
<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>
<p>ロール固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。</p>
<h2 id="Examples" name="Examples">例</h2>
<p><code>aria-labelledby</code> でその ID を参照することによって、図表の説明的なラベルを提供する段落を識別するために、このページの最初の例を拡張することもできます。</p>
<pre><div role="figure" aria-labelledby="figure-1">
<img src="diagram.png"
alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム —
音楽、猫、自然、そしてアイスクリーム">
<pre><code>
let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
</code></pre>
<p id="figure-1">図表 1: 素晴らしい4つの層。</p>
</div></pre>
<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>
<p>たとえば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="figure"</code> のみを使用する必要があります。</p>
<p>可能であれば、図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするために、適切な意味論の HTML 要素を使用する必要があります。 たとえば、上記の例は次のように書き直されます。</p>
<pre class="brush: html"><figure>
<img src="diagram.png"
alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム —
音楽、猫、自然、そしてアイスクリーム">
<pre><code>
let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
</code></pre>
<figcaption>図表 1: 素晴らしい4つの層。</figcaption>
</figure></pre>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
</tr>
<tr>
<td>{{SpecName("ARIA","#figure","figure")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
</tbody>
</table>
<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>
<p>TBD</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li>
<li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li>
<li><a href="/ja/docs/Web/HTML/Element/figure">HTML <figure> 要素</a></li>
<li><a href="/ja/docs/Web/HTML/Element/figcaption">HTML <figcation> 要素</a></li>
</ul>
|
