# 画像の代替テキストチェッカー ページのURLを入力すると、スクリプトの実行後に実際のブラウザで読み取った、そのページのすべての画像を代替テキストとともに一覧表示します。代替テキストがない画像、装飾目的として指定された画像、何も説明していない代替テキストを確認できます。 ## このツールで確認する項目 - 代替テキストのない画像: alt属性も、aria-labelなどの他のアクセシブルな名前もない、すべてのimg要素と画像ボタンです。 - リンクの名前をなくしてしまうリンク画像: リンクやボタンの中にあり、代替テキストも他のテキストもないロゴやアイコンです。スクリーンリーダーは「リンク」としか読み上げられません。 - ファイル名のような代替テキスト: IMG_2041.jpg、DSC0042、長い数字の羅列のような値です。多くのシステムがアップロード時に自動で入力します。 - 一般的すぎる語: 「image」（画像）、「photo」（写真）、「logo」（ロゴ）、「banner」（バナー）だけの代替テキストでは、画像に何が写っているのか誰にも伝わりません。 - 冗長な説明と使い回された説明: 「image of」（〜の画像）で始まる説明、隣のリンクテキストを繰り返す説明、3枚以上の異なる画像に使い回されている説明です。 - 装飾目的の画像と非表示の画像: alt=""またはrole="presentation"が指定された画像と、aria-hiddenやCSSで非表示にされた画像は別に表示するので、それぞれが本当に装飾目的かどうかを確認できます。 - 各画像のプレビュー: 代替テキストの横にサムネイルを表示するので、それぞれの説明を数秒で判断できます。フィルターで、問題だけ、または要確認の項目だけを表示できます。 ## 確認できないこと - 代替テキストが正確かどうかは判断できません。それを判断できるのは、画像を見ることができ、なぜその画像がページにあるのかを知っている人だけです。 - CSSの背景として設定された画像や、SVGやcanvasの図形の代替テキストはチェックできません。一覧表示するのはimg要素と画像ボタンです。 - 埋め込み動画、地図、広告など、フレーム内の画像はチェックできません。 - 一覧表示できる画像は150枚までです。非常に長いページでは最初の150枚を表示し、全体の枚数を示します。 - 他のページはテストできません。無料のフルスキャンでは、主要ページ最大5件で、WCAGの他の項目とあわせて代替テキストをチェックします。 ## なぜ重要なのか 代替テキストは、スクリーンリーダーが画像の代わりに読み上げるものであり、画像が読み込めなかったときにブラウザが表示するものです。WCAG 2.2の達成基準1.1.1（レベルA）では、情報を伝えるすべての画像に代替テキストを求め、そうでない画像には空の代替テキストを求めています。 代替テキストの欠落は、ウェブで2番目に多いアクセシビリティの不適合です。WebAIMの2026年の分析では、上位100万件のトップページの53.1%で見つかり、チェックしたすべての画像の16.2%に代替テキストがありませんでした。 検索エンジンも代替テキストを読み取ります。Googleは、コンピュータビジョンやページのコンテンツとあわせて代替テキストを使って画像を理解しており、リンクされた画像の代替テキストはリンクのアンカーテキストと同じように機能するとしています。 ## 結果の読み方 - 代替テキストなし: 画像にalt属性も他の名前もありません。ソフトウェアによっては、スクリーンリーダーがファイル名を読み上げたり、画像を読み飛ばしたりします。 - 装飾目的: alt=""またはrole="presentation"：スクリーンリーダーはこの画像を読み飛ばします。装飾であれば正しい指定ですが、情報を伝える画像や、リンクの唯一のコンテンツである画像には誤りです。 - 代替テキストあり: 画像に説明があります。問題がありそうなものには印を付けますが、それ以外も正確かどうかは人が確認する必要があります。 - ARIAまたはtitleで名前付け: alt属性はありませんが、aria-label、aria-labelledby、titleから名前が付いています。自動テストには合格しますが、altのほうが確実な方法です。 - 非表示: 表示されていないか、aria-hiddenで支援技術から隠されています。その画像が本来見えるべきものでない限り、修正は不要です。 - 名前のないリンク: 代替テキストのない画像だけを含むリンクまたはボタンです。画像自体が装飾目的であっても、不合格になります。 - 要確認: ファイル名や一般的な語のように見える代替テキスト、「image of」で始まるもの、リンクテキストの繰り返し、非常に長いもの、複数の画像に使い回されているものです。 ## よくある問題の修正方法 - 商品写真とコンテンツの写真: ページの文脈の中で、画像がないと何が伝わらなくなるかを記述します。商品なら、その商品、色、写っているアングル。記事の写真なら、本文では伝えていない、写真に写っている内容です。 - ホームにリンクするロゴ: リンクされた画像では、リンク先を伝えます。トップページにリンクするロゴなら、「logo」ではなく、alt="Acme ホーム"のように会社名を使います。 - リンクやボタン内のアイコン: アイコンに「検索」や「カート」のように操作を表す代替テキストを付けるか、リンクにaria-labelを付けたうえで、アイコンはalt=""で装飾目的として指定します。 - 装飾目的の画像: 区切り線、背景の飾り、すぐ隣のテキストと同じ内容の画像には、alt=""（属性がないのではなく、空の値）を使います。 - プラットフォームが入力したファイル名: 多くのプラットフォームは、アップロード時にファイル名をaltの入力欄にコピーします。画像を管理している場所で編集してください。Shopifyなら商品のメディア、WordPressならメディアライブラリの「代替テキスト」欄です。 - グラフとインフォグラフィック: グラフが何を示しているかを伝える短いaltを付け、データや要約は隣の本文や表に記載します。 ## よくある質問 ### 代替テキストとは何ですか？ 画像のalt属性には、その画像の代替テキストが入ります。スクリーンリーダーはこれを読み上げ、画像を表示できないときにはブラウザがこれを表示します。 ### すべての画像に代替テキストが必要ですか？ すべてのimg要素にalt属性が必要です。情報を伝える画像では画像を説明し、装飾目的の画像では空（alt=""）にして、スクリーンリーダーが読み飛ばすようにします。 ### 代替テキストはどのくらいの長さにすべきですか？ WCAGに上限はありません。良い代替テキストは、たいてい短いフレーズか1文です。画像にもっと説明が必要な場合は、ページの本文やキャプションで説明し、altは短くしておきます。150文字を超える代替テキストには、見直しのための印を付けます。 ### 代替テキストはSEOに役立ちますか？ Googleは、コンピュータビジョンやページのコンテンツとあわせて代替テキストを使って画像を理解しており、リンクされた画像の代替テキストはアンカーテキストと同じように機能するとしています。また、alt属性にキーワードを詰め込むとスパムとみなされる可能性があると警告しています。 ### title属性はaltと同じですか？ いいえ。titleはホバー時にツールチップとして表示されるもので、スクリーンリーダーで確実に読み上げられるとは限らず、タッチスクリーンでは利用できません。altがない場合、自動テストはtitleを名前として認めますが、確実なのはaltです。 ### AIに代替テキストを書かせてもよいですか？ 説明の下書きはできますが、AIはその画像がなぜページにあるのかを知りません。下書きはすべて見直してください。適切な代替テキストは、ご自身にしかわからない文脈によって決まります。 ## 出典 - [W3C：WCAG 2.2 達成基準1.1.1 非テキストコンテンツの解説](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C 画像チュートリアル：alt決定木](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C 画像チュートリアル：機能を持つ画像](https://www.w3.org/WAI/tutorials/images/functional/) - [Google検索セントラル：画像SEOのベストプラクティス](https://developers.google.com/search/docs/appearance/google-images) - [Deque：axe-coreのimage-altルール](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM：The WebAIM Million（2026）](https://webaim.org/projects/million/)