画像と代替テキスト

img要素が役に立つには二つの属性が必要です。画像がどこにあるかを示すsrcと、画像が見えないときに何が写っているかを伝えるaltです。

img要素

画像はHTMLファイルの中には保存されていません。ページは画像を指し示し、ブラウザーはそれぞれを別のファイルとして取りに行きます。指し示すのが <img> 要素です。空要素なので終了タグはなく、src 属性に画像のアドレスを、リンクの href と同じように絶対アドレスか相対アドレスで書きます。画像は置換要素です。ブラウザーは要素を画像に置きかえ、ほかに指定しなければ画像の大きさは画像そのものが決めます。

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

width 属性と height 属性は、画像の大きさを単位なしのピクセルで表します。ファイルの実際の大きさにしましょう。ふつうHTMLは画像より先に届くので、これらの数がないと、ブラウザーは先に文字を並べ、画像の読みこみが終わるたびに文字を下へ押し下げます。読み始めていると、これはとても気になります。数があれば、ブラウザーは最初から正しい場所を確保します。画像を小さくまたは大きく表示したいときは、これらの数を変えるのではなくCSSを使いましょう。

代替テキストを書く

alt 属性には代替テキストを入れます。スクリーンリーダーはそれを読み上げ、ブラウザーはファイルの読みこみに失敗したときにそれを表示し、検索エンジンは画像を理解するためにそれを読みます。MDNは簡単な確かめ方をすすめています。画像が表示されなかったら何が失われるでしょうか。それを短く書きましょう。商品の写真なら、選ぶのに必要なことを説明します。グラフなら「棒グラフ」ではなく、「一月から三月で売上が三倍になった」のように、グラフが伝えたいことを書きます。

• 「〜の画像」「〜の写真」で書き始めないようにしましょう。画像であることは、スクリーンリーダーがすでに伝えています。
• 波線の区切り線のような飾りの画像には、空の alt="" をつけます。するとスクリーンリーダーはそれを読み飛ばします。altをまったく書かないのとはちがいます。スクリーンリーダーによっては、かわりにファイル名を読み上げてしまいます。
• 画像がリンクの唯一の内容なら、その代替テキストがリンクの文字になるので、画像（パンのロゴ）ではなくリンク先（ホーム）を書きます。
• 同じ情報が画像の横の文章にすでにあるなら、alt="" にすれば二度言わずにすみます。

図とキャプション

画像にキャプションがつくときは、両方を <figure> で囲み、キャプションを <figcaption> に入れます。こうすると支援技術にとってキャプションと画像が結びつきます。画像の下にふつうの段落を置くだけでは、そうはなりません。キャプションと代替テキストは役割がちがいます。キャプションはだれもが読むもので、altは画像がないときにその代わりになるものです。ただくり返すだけにしてはいけません。figureに入れるのは画像でなくてもかまいません。コードの例、表、詩もfigureにできます。

形式、データURL、インラインSVG

写真はふつうJPEGかWebP、輪郭のはっきりした平面的な図はPNG、図形でできた絵はSVGがよく使われます。SVGはどんな大きさでもくっきりしたままのテキスト形式です。小さな画像なら、data:image/svg+xml, で始まるデータURLとして src に直接書くこともできます。下の練習では、ほかのサイトから何も読みこまないようにこれを使っています。SVGは <svg> 要素でHTMLに直接書くこともできます。スクリーンリーダーが名前を読めるように、role="img" と子要素の <title> をつけましょう。最後に、長いページの下のほうにある画像に loading="lazy" をつけると、読者がその近くまでスクロールするまで読みこみを待つようブラウザーに伝えられます。

MDNのきまりをもう一つ。使う権利のある画像だけを使いましょう。ネットで見つけた画像は、ライセンスで別に定められていないかぎり著作権で守られています。許可なく他人のサーバーをsrcで指すこと（ホットリンク）は、あなたのページの通信量を相手に負担させることにもなります。