チェック項目
img要素に代替テキストを指定するためにalt属性を使用する
img要素を装飾画像とするために空のalt属性を使用する
svg要素やアイコンフォントに代替テキストを指定するためにrole="img"とaria-label属性を使用する
svg要素やアイコンフォントを装飾画像とするためにaria-hidden="true"を使用する
イメージマップのarea要素に代替テキストを指定するためにalt属性を使用する
「画像の代替テキスト」とは
レベル1：必ず達成
画像やアイコンなどの非テキストコンテンツには、適した手段で代替テキストを指定してください。
具体例① 意味のある画像
<img src="homes-logo.svg" alt="LIFULL HOME'S" width="300" height="100" />
alt属性を使用する
意味のある
img要素に代替テキストを指定するためにalt属性を使用する。<button type="button">
<svg viewBox="0 0 64 64" role="img" aria-label="メニュー">…</svg>
</button>
role="img"とaria-label属性を使用する
svg要素に代替テキストを指定するためにrole="img"とaria-label属性を使用する。<button type="button">
<span class="fa-solid fa-info" role="img" aria-label="情報"></span>
</button>
role="img"とaria-label属性を使用する
アイコンが描画される要素に代替テキストを指定するために
role="img"とaria-label属性を使用する。具体例② 装飾的な画像
<img src="homes-kun.png" alt="" width="75" height="50" />
空のalt属性を使用する
img要素を装飾画像とするために空のalt属性を使用する。alt属性値そのものを省略すると、環境によって読み上げられ方が定まらない。<button type="button">
<span class="fa-brands fa-twitter" aria-hidden="true"></span>
ツイートする
</button>
aria-hidden="true"を使用する
svg要素やアイコンフォントを装飾画像とするためにaria-hidden="true"を使用する。具体例③ イメージマップ
<img src="nihon-chizu.png" alt="日本地図" width="500" height="500" usemap="#map" />
<map id="map">
<area
shape="poly"
coords="476,31,492,25,540,85,587,84,590,122,523,161,431,190,427,145,484,91,485,62"
href="#hokkaido"
alt="北海道"
/>
…
</map>
area要素にalt属性を使用する
イメージマップの
area要素に代替テキストを指定するためにalt属性を使用する。前工程で代替テキストが指定されなかった場合の対応
代替テキストはコンテンツの一部であるため、コンテンツ設計やデザインの段階で決められることが理想です。実装段階で代替テキストが決定していない場合、代替テキスト案を書き、コンテンツオーナーと相談してください。
- altディシジョンツリーに沿って画像のタイプを判別する
- 画像が装飾的な画像ではない場合、代替テキストの考え方を参考に代替テキスト案を書き、コンテンツオーナーと相談する
- 画像が複雑な情報を含みかつ本文やキャプションに同等の情報が含まれていなかったら、本文やキャプションに説明テキストを表示できないかどうかコンテンツオーナーと相談する