imgタグの壊れ画像表示とalt属性の挙動の調査

HTMLの仕様

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

  • imgは画像をrepresentする

  • srcに指定された画像がembedded contentである

  • altの値はfallback contentである

    • 外部リソースが利用不可能なときに利用されるもの
  • srcが設定されており、altが空文字列ならば

    • 画像は装飾的あるいは補足的なものであり、document内の他の情報に対して冗長である
    • 画像がavailableかつユーザーエージェントが画像を表示する設定ならば、img要素は画像データを表す
    • そうでなければ、img要素は何も表さない。レンダリングされないかもしれない。ユーザーエージェントはユーザーに、画像があったけれどレンダリングされなかったということを知らせるかもしれない。
      • これがいわゆる壊れ画像表示か?
  • srcが設定されておりaltに空文字ではない値が設定されているならば

    • 画像は重要。alt属性は文字による画像の代替物
    • 画像が表示できるならする
    • そうでなければalt属性の文字列が表示される。UAはユーザーに画像が表示されなかったことを伝えても良い
  • srcが設定されておりalt属性がない

    • 画像は重要かもしれない。文字による画像の代替物はない
    • 画像が表示できるならする
    • そうでなければUAは画像が表示されなかったことを伝えるべきであり、キャプション情報を表示してもよい
      • キャプション情報はtitle

https://html.spec.whatwg.org/multipage/images.html#images-processing-model

  • img要素はcurrent requestとpending requestを持つ。current requestの初期値は新しいimage requestであり、pending requestの初期値はnullである
  • image requestはstate, current URL, image dataを持つ
    • state
      • Unavailable
      • Partially available
      • Completely available
      • Broken
    • current URLの初期値はnull
    • image dataはデコードされた画像データ

https://html.spec.whatwg.org/multipage/images.html#alt

  • 特記されない限り、alt属性は存在し空文字以外の値を持つべきである。値は画像の適切な代替物でなければならない。より具体的なalt属性の条件は画像が表そうとしているものによる。
  • アイコンが
投稿日:
カテゴリー: 日記

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です