files/ja/web/accessibility/aria/roles/role_img/index.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

---
title: 'ARIA: img ロール'
slug: Web/Accessibility/ARIA/Roles/Role_Img
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Role_Img
---
<div>\{{ariaref}}</div>

<p>ARIA の <code>img</code> ロールは、単一の画像とみなすべきページコンテンツ内の複数の要素を識別するために使用できます。 これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を伝達するために組み合わせることができる他のコンテンツであってもよい。</p>

<pre class="brush: html">&lt;div role="img" aria-label="全体的な画像の説明"&gt;
  &lt;img src="graphic1.png" alt=""&gt;
  &lt;img src="graphic2.png"&gt;
&lt;/div&gt;
</pre>

<h2 id="Description" name="Description">説明</h2>

<p><code>role="img"</code> を使用すると、単一の画像（画像、動画、音声、コードスニペット、絵文字、その他のコンテンツを含む）として消費されるべきコンテンツの集合を識別できます。</p>

<p>支援技術へのコンテキストを伝えるために個々の画像要素の代替テキストを数えるべきではありません。 ほとんどのスクリーンリーダーは、<code>role="img"</code> を持つ要素をブラックボックスのように見て、内部の個々の要素にはアクセスしません。 したがって、周囲のテキストのいずれか、または <code>aria-label</code> 属性を使用して画像の包括的な全体説明的な代替テキストを提供します。 画像が欠ける場合は、検索エンジンまたはサイトユーザーのためのオプションの <code>alt</code> 属性を使用してページに書きます。</p>

<pre class="brush: html">&lt;div role="img" aria-label="全体的な画像の説明"&gt;
  &lt;img src="graphic1.png" alt=""&gt;
  &lt;img src="graphic2.png"&gt;
&lt;/div&gt;</pre>

<p>ページに表示される画像にキャプションまたはラベルを追加する場合は、次の方法を使用できます。</p>

<ul>
 <li>テキストが簡潔なラベルの場合は、<code>aria-labelledby</code>。</li>
 <li>テキストがより長い説明である場合は、<code>aria-describedby</code>。</li>
</ul>

<p>例えば、</p>

<pre class="brush: html">&lt;div role="img" aria-labelledby="image-1"&gt;
  ...
  &lt;p id="image-1"&gt;画像のグループを説明するテキスト。&lt;/p&gt;
&lt;/div<strong>&gt;</strong></pre>

<h3 id="SVG_and_roleimg" name="SVG_and_roleimg">SVG と role="img"</h3>

<p>ページに埋め込み SVG 画像を使用している場合は、外側の <code>&lt;svg&gt;</code> 要素で <code>role="img"</code> を設定し、ラベルを付けることをお勧めします。 これにより、スクリーンリーダーは全ての子ノードを読み出すのではなく、単一の実体とみなし、ラベルを使用して説明します。</p>

<pre class="brush: html">&lt;svg role="img" aria-label="SVG 画像の説明"&gt;
  &lt;!-- SVG 画像の内容 --&gt;
&lt;/svg&gt;</pre>

<h3 id="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied" name="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied">role="img" を使用して、不明瞭や暗黙なものに意味を付与する</h3>

<p>場合によっては、支援技術ユーザーは、特定の方法で、特定のメディアを通して、または特定の方法で暗示された内容の意味を得ることができません。 これは画像の場合では直すのは明らかです（<code>alt</code> 属性を使うことができます）が、混在したコンテンツや他の特定の種類のコンテンツの場合はそれほど明白ではないので、<code>role="img"</code> が有効になります。</p>

<p>例えば、テキストに絵文字を使用した場合、その意味は目の見えるユーザーにとっては明白かもしれませんが、スクリーンリーダーを使用している人は、絵文字はテキスト表現を全く持たないか、代替テキストが紛らわしく、使用されているコンテキストと一致しない可能性があります。 例えば、次のコードです。</p>

<pre class="brush: html">&lt;div role="img" aria-label="その猫はとても面白い"&gt;
  &lt;p&gt;
    &amp;#x1F408; &amp;#x1F602;
  &lt;/p&gt;
&lt;/div&gt;</pre>

<p>&amp;#x1F408; &amp;#x1F602; の絵文字の実体参照は「猫」と「涙が出るほど嬉しい顔」で読み上げられますが、これは必ずしも意味をなしません — 暗黙の意味はおそらく「その猫はとても面白い」で、それを <code>aria-label</code> で <code>role="img"</code> と一緒に指定します。</p>

<p>これはブラウザーやスクリーンリーダーの組み合わせによっては正常に動作するように見えますが、その中にはラベルを2度読んでしまうものもあります。 慎重に使用し、十分にテストしてください。</p>

<p>これが適している別の例は、伝説的な「ちゃぶ台返し」のような ASCII 絵文字の組み合わせを使用する場合です。</p>

<pre class="brush: html">&lt;div role="img" aria-label="ちゃぶ台返し"&gt;
  &lt;p&gt;
    (╯°□°）╯︵ ┻━┻
  &lt;/p&gt;
&lt;/div&gt;</pre>

<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-label</dt>
 <dd>アクセス可能な名前が必要です。 aria-label 属性</dd>
 <dd> </dd>
</dl>

<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>

<p> </p>

<p> </p>

<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>

<h2 id="Examples" name="Examples">例</h2>

<ul>
 <li><a href="https://codepen.io/svinkle/pen/oYjoNE">星評価、role="img"の例</a></li>
</ul>

<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","#img","img")}}</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>
</ul>