---
title: "alt属性とは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "img要素のalt属性の正しい使い方を知りたいAI生成サイト制作者やデザイナー向けに、適切な記述例・よくある誤り・共有前のチェック方法を実践的に解説した記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-alt-text-html-share"
markdown: "https://giga-site.com/articles/what-is-alt-text-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# alt属性とは？HTML共有・AI生成サイトでの意味をやさしく解説
画像が表示できない環境や、スクリーンリーダーで読み上げる環境では、画像の代わりに読まれるテキストがalt属性です。AIが生成したHTMLには空のaltや意味のないalt（「image.png」など）が含まれやすく、プレビューURLで共有する前に確認しておく必要があります。
> Source HTML: https://giga-site.com/articles/what-is-alt-text-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
alt属性（代替テキスト）は`
`のように書き、画像が表示できないときや視覚的に確認できないユーザーに対して画像の内容を伝えるテキストです。HTML仕様上も必須の属性であり、省略するとバリデーションエラーになります。
alt属性の値が空文字（`alt=""`）の場合は「この画像は装飾目的であり情報を持たない」という意味になります。ロゴや写真など意味を持つ画像には適切な説明文を、ボーダーや背景パターンなど純粋な装飾には空altを使い分けることが原則です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
プレビューURLを画像が表示されない環境（社内ネットワークの制限等）で開いた相手が、alt属性のテキストだけでページの内容を理解できるかが重要です。製品の仕様書を図解したHTMLで、図のaltが「図1」だけでは内容が伝わりません。「初年度と2年目の売上比較グラフ：初年度120万、2年目180万」のように具体的に書く必要があります。
スクリーンリーダーが読み上げる際、AIが生成したファイル名由来のalt（「ai-generated-image-03.webp」など）はそのまま読み上げられます。閲覧者にとって全く無意味な情報が読み上げられ続けることになるため、共有前に必ず意味あるテキストに書き直してください。
## よくある誤解
「altにはキーワードを詰め込めばSEOに有利だ」という誤解があります。検索エンジンはキーワードの詰め込み（キーワードスタッフィング）を評価しません。また、スクリーンリーダーユーザーが読み上げを聞いたとき、不自然なキーワード列は体験を著しく損ないます。画像が人間に何を伝えるかを簡潔に書くことが正解です。
「altを空にしておけば問題ない」も誤りです。情報を持つ画像に空のaltを付けると、スクリーンリーダーはそれを無視して次の要素に移ります。グラフや図表に空altが付いていると、その情報がスクリーンリーダーユーザーには一切届かないことになります。
## 安全に使うための注意点
共有前にHTMLを開いて全imgタグを検索し、alt属性が（1）存在するか、（2）空でない意味のある文であるか、（3）ファイル名や「image」「photo」のような無意味な語になっていないかを確認してください。LighthouseのAccessibilityスキャンを実行すると、alt問題のある画像がリストアップされます。
グラフや表を画像化してHTMLに埋め込む場合、altに数値の要約を入れることを検討してください。たとえば棒グラフの画像なら`alt="2024年売上推移：Q1-150万、Q2-200万、Q3-180万、Q4-240万"` のように記述すると、グラフを見られないユーザーでも具体的な数値を把握できます。
## よくある質問
### ロゴ画像のaltには何を書けばよいですか？
ページのヘッダーなどに配置するロゴには会社名を入れてください（例：`alt="株式会社〇〇 ロゴ"`）。ただしフッターにテキストで会社名が別途書かれている場合は`alt=""`の空altにして重複読み上げを防ぐ方がユーザー体験が良くなります。
### 長い説明が必要な複雑な図表に対してaltはどこまで書けばよいですか？
altは長文には向いていません。複雑な図表の場合はalt属性に「詳細は下記テキストを参照」と書き、図の近くにHTMLのテキストとして説明文を追加する方法が推奨されます。aria-describedbyを使って図と説明文を関連付けることもできます。
### CSSのbackground-imageで表示する画像にもaltは必要ですか？
background-imageはHTMLではなくCSSで指定するため、alt属性を付けることができません。情報を持つ画像はimgタグで実装することが基本です。どうしてもCSSで実装する場合は、近くに視覚的に隠したテキスト（visually-hiddenクラス等）で代替説明を入れる方法があります。
## 関連記事
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "alt属性とは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "img要素のalt属性の正しい使い方を知りたいAI生成サイト制作者やデザイナー向けに、適切な記述例・よくある誤り・共有前のチェック方法を実践的に解説した記事です。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-alt-text-html-share",
"url": "https://giga-site.com/articles/what-is-alt-text-html-share",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "用語解説",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "ロゴ画像のaltには何を書けばよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ページのヘッダーなどに配置するロゴには会社名を入れてください（例：`alt=\"株式会社〇〇 ロゴ\"`）。ただしフッターにテキストで会社名が別途書かれている場合は`alt=\"\"`の空altにして重複読み上げを防ぐ方がユーザー体験が良くなります。"
}
},
{
"@type": "Question",
"name": "長い説明が必要な複雑な図表に対してaltはどこまで書けばよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "altは長文には向いていません。複雑な図表の場合はalt属性に「詳細は下記テキストを参照」と書き、図の近くにHTMLのテキストとして説明文を追加する方法が推奨されます。aria-describedbyを使って図と説明文を関連付けることもできます。"
}
},
{
"@type": "Question",
"name": "CSSのbackground-imageで表示する画像にもaltは必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "background-imageはHTMLではなくCSSで指定するため、alt属性を付けることができません。情報を持つ画像はimgタグで実装することが基本です。どうしてもCSSで実装する場合は、近くに視覚的に隠したテキスト（visually-hiddenクラス等）で代替説明を入れる方法があります。"
}
}
]
}
```