JavaScript アクセシビリティ img 要素

img 要素のアクセシビリティ

画像は視覚障害者には見えないので、
画像が装飾以上の意味があるとき、
alt 属性を使う必要があります。

画像がコンテンツで意味を持つときは、
alt 属性で確実に説明しておくことは重要です。

しかし、
画像を見るのが初めてのユーザーにとって、
個人的な知識や追加的な説明は
有益ではないので、
含めるべきではありません。

説明は、
常に、画像の端的な描写と、
画像が視覚的に伝えているものとを提供すべきです。

注意すべきことは、
スクリーンリーダーにとって、
画像の内部のテキストコンテンツにはアクセス出来ません。

title 属性
文脈のある追加的な情報をどうしても提示したい場合に使用します。

aria-labelledby 属性
段落に id を与え、 id を参照するための aria-labelledby 属性を用います。

下に説明文と使用例を示しています。



alt がない場合、
多くのスクリーンリーダーが画像の URL を全部読み上げてしまうので
失敗です。

<img src="*.png">


画像がコンテンツで意味を持つときalt属性を使用します。

<img src="*.png" alt="…">


文脈のある追加的な情報を追加したいときtitle属性を使用します。

<img src="*.png" alt="…" title="...">


段落の説明にid を与え、 id を参照するために aria-labelledby属性を使用します。

<img src="*.png" aria-labelledby="×××-label">
<p id="×××-label">...</p>


広範囲の説明用に別のウェブドキュメントを指すためにlongdesc属性を使用します。

<img src="*.png" longdesc="....html">


図面を、図面キャプション (説明文) と結びつけるためにfigcaption要素を使用します。

<figure>
  <img src="*.png" alt="...">
  <figcaption>...</figcaption>
</figure>


alt がない場合、
多くのスクリーンリーダーが画像の URL を全部読み上げるので、
alt 属性を空に、
alt =""とします。
画像が装飾にすぎない場合などに使用します。

<h3>
  <img src="*.png" alt="">
  ...
</h3>



以上です。