代替テキストの意味、ロゴ・商品・アイコン・グラフ・装飾画像ごとの良い例と悪い例、W3Cの判断手順、短い練習クイズを紹介します。
代替テキストは、画像の代わりとなる短い文章で、imgタグのalt属性に設定します。スクリーンリーダーはこれを読み上げ、画像が読み込めなかったときにはブラウザーが表示します。良い代替テキストは、ページ上のその位置で画像が何を意味するかを伝えます。装飾画像には空のaltを指定します。
画像の種類別のクイック例
適切な言葉は、画像の見た目ではなく、画像がそこにある理由で決まります。ボタンの中の虫眼鏡は「検索」を意味しますが、同じ形がページの飾りであれば何の意味もありません。練習問題に挑戦してから、自分のショップやサイトでこのパターンを使ってみてください。
altはalternative（代替）の略です。代替テキストとは画像の代わりとなるテキストで、スクリーンリーダーが読み上げる言葉であり、画像が読み込めないときにブラウザーが代わりに表示する内容です。img要素のalt属性に記述します。
すべてのimgにalt属性は必要ですが、すべてに言葉が必要なわけではありません。MDNによると、空のaltはその画像がコンテンツの重要な部分ではないことを示します。altをまったく書かないほうが問題で、一部のスクリーンリーダーはファイル名を読み上げてしまいます。
ほとんどの画像は、ひと息で言える程度の短さで十分です。W3Cのツリーでは、シンプルな写真には簡潔な説明を求めています。例外はグラフや図で、altには短いラベルを入れ、詳しい情報はページ上のテキストに載せます。
はい。Googleの画像ガイドでは、画像を理解するためにコンピュータービジョンやページの内容とあわせて代替テキストを使うと説明しています。Google自身の例では、単なる「子犬」よりも「ボール遊びをするダルメシアンの子犬」を推奨し、キーワードの羅列には注意を促しています。
ロゴがホームページへリンクしている場合は、ビジネス名と「ホーム」のように、リンク先を説明するaltにします。単に表示されているだけで、隣にビジネス名がテキストで書かれているなら、空のaltで問題ありません。
ビジネスでよく使う画像の代替テキスト例
リンク付きのロゴ、商品写真、装飾画像です。装飾画像にもalt属性があり、空になっている点に注目してください。
altではグラフの名前を示して詳細を案内し、詳細はすべての訪問者が読めるキャプションに記載します。
{v}問中{n}問正解。
正解です。
惜しい。最適な答えは：{v}。
もう一度
代替テキストの選択肢
ロゴはヘッダーにあり、ホームページへリンクしています。ヘッダーの他の場所にはビジネス名が書かれていません。
リンク付きの画像には、リンク先を伝える代替テキストが必要です。
細い波線が2つのセクションを区切っています。情報は何も加えていません。
純粋な装飾画像は空のaltにして、スクリーンリーダーが読み飛ばすようにします。
3色展開のマグカップの商品ページのメイン写真です。これはセージグリーンのものです。
このバリエーションを見分けられる詳細を含む簡潔な説明にします。キーワードの羅列はスパムです。
カートのアイコンだけのボタンで、ショッピングカートが開きます。
ボタン内の画像では、絵柄ではなく動作を説明します。
「今週末は送料無料」という文字が入ったバナー画像です。同じ文字はページ上にテキストとして書かれていません。
文字が画像の中にしかない場合は、altにその文字を入れます。
無料で始める · クレジットカード不要