Open2024/05/05にコメント追加1

HTML解体新書まとめ

HTML

やすとも

08エンベディッドコンテンツ

※ Webページ内には画像や映像などを埋め込むことができる。その埋め込みを行うコンテンツ群をエンベディッドコンテンツ(Embeded Contents)と呼ぶ

img要素

内容モデルなし = 子要素を持つことはできない。

属性

src属性

画像に対するパスを指定するor データURLの指定も可能

       // データURLを指定するイメージ
       <img src="data:image/png;base64,iVBORw0KGgoAAAA(以下省略)">

alt属性

*   何らかの理由で画像データが表示できない場合に代替で表示させるテキストデータやスクリーンリーダを利用しているユーザーに対して、知らせたい情報をセットする。
* alt属性の指定が非常にポイントになる。
*  情報を表す画像には、その情報に適切に説明するテキストをしているするべきであり、単なる装飾的な画像であって、機能的な情報を持たない画像には、空で指定することが望ましい。
  *  **空で指定した場合、スクリーンリーダからは画像の存在は無視される**
  *  基本的には装飾目的以外の場合には、alt属性を指定することが望ましいが、例えばユーザーが投稿した画像データなどの場合には、そもそもシステム的にalt属性の指定をすることが不可能となるため、このような場合は例外としても良い。
 * alt属性に指定するべきテキストは、画像と等価な情報量を持つテキストであることが望ましい(=情報が不足しているのはもちろんNGであり、一方で情報が不必要に多いこともよくない)
 * また、同じ画像には常に同じテキストを入れるかというと、そういうわけではなく、コンテキストに応じてテキストを指定することも重要
     * 書籍の中で挙げていた例は、同じ地図(の画像)が2つ続けて表示されるが、それぞれその地図で説明したいものが違う例を挙げている。
 * alt属性にテキストを指定した場合と、何も指定しなかった場合は、imageロールを持つ。空で指定した場合はpresentationロールを持つ。

loading属性

列挙型属性で、lazyとeagerの2つの値をとりうる
デフォルトはeager
- 表示画面外の画像でもレンダリングを行う
lazyを指定すると、いわゆる遅延ローディングの挙動となり、表示画面外の画像はレンダリングを行おうとしない。
- これだけ聞くと常に loading="lazy"を指定したくなるが、常に指定するのはかえってパフォーマンスの悪化につながる恐れがあるため注意が必要。https://stackoverflow.com/questions/60361914/why-not-use-native-lazy-loading-image-attribute-loading-lazy-always

iframe要素

ページ内にコンテンツの埋め込みを行う場合に利用する。

コンテンツモデル

Nothing (しかし、終了タグの省略は不可）

属性

src属性

iframe上で表示するコンテンツリソースのURLを指定

// YouTubeの埋め込みの例
<iframe width="560" height="315" src="https://www.youtube.com/embed/7moEJtKoVEY?si=LNNHrepLdZFXTNki" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

allow属性

iframe上で表示するコンテンツで利用したい機能やAPIのパーミッションの指定。
- 本書では、フルスクリーンのためのallowfullscreen属性を例にあげていた。現在ではこの指定はレガシーであり、allow="fullscreen"として再定義されている。

loading属性

imgの場合のloading属性と同じ考え方でOK。

srcdoc属性

HTMLの埋め込みを行いたい場合に使用する。

sandbox属性

iframe上で、JSの実行やフォームの送信を可能にするかどうかなどの指定が可能。
- sandbox="allow-same-origin"の指定は、同一オリジンポリシーによる制限を解除してしまい、かなり強い権限を与えてしまうため、指定は慎重に。

その他

iframe要素は、A11Y上問題を起こしやすい要素。
スクリーンリーダーによって、読み上げが異なることが多い。読み上げに関して言えば、そのまま読み上げるものもあれば、何か操作をしない限り読み上げをしてくれないリーダも存在している。
title属性を付与すれば、iframeまで到達した場合にそのtitleを読み上げしてくれるブラウザも存在しているため、この属性の指定は推奨される。 外部サービスから提供される埋め込みコード(上のYouTubeの場合)においても、アクセシブルになっているかまでは配慮されていない場合があるため、この場合には、アクセシブルであるかのチェックをして(場合によっては修正して)から使用することが望ましい。
暗黙のロールはなし。
iframeと近しい要素として、object要素とparam要素が挙げられていた。