N012 情報をもつ背景画像のある要素はアクセシブルな名前をもっているか、もしくは可視ラベルが隣接している

遵守度
MUST
自動チェック
不可能
対象
画像
フェーズ
  1. フロントエンド実装

チェックの内容

背景画像をもつ要素が情報を持つ場合、アクセシブルな名前をもたせるか、もしくは可視ラベルを隣接させます。

  • 意味をもつかどうか、アクセシブルな名前の内容自体は[N001]で確認します
  • 可視ラベルが隣接している場合は逆にアクセシブルな名前がないこと[N011]を確認します

制作時の注意点

基本的に意味をもつ(アクセシブルな名前が必要な)画像は背景画像にするべきではありません。

  • メディアクエリーによる変更が必要 → picture要素と併せて使ってください
  • 親要素のサイズに合わせて縦横比が変わる可能性がある → object-fitプロパティを使ってください

関連するWCAG達成基準

参考リンク