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

---
title: 'ARIA: img ロール'
slug: Web/Accessibility/ARIA/Roles/Role_Img
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Role_Img
---
<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>

<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>
</dl>

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

<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>

<section id="Quick_links">
    <ol>
        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
    </ol>
</section>