知恵袋 （前に戻る）
108
「alt属性」と「title属性」
(2026/08/18)
alt（代替テキスト） 目的: 画像の「意味」を言葉で説明する。 対象: 視覚障害のある方（スクリーンリーダー）、画像が読み込めない環境、検索エンジン（SEO）。 必須度: <img> タグには原則必須。 背景の飾りなど、意味を持たない装飾目的の画像の場合は、中身を空にして alt="" と記述します（消してはいけません）。 title（補足情報） 目的: 要素にカーソルを合わせたとき（ホバー時）に、ツールチップで補足情報を出す。 対象: 主にマウス操作をしている一般の閲覧者。 必須度: 任意（使わなくても問題ない）。 記述時の注意点 同じ文章を両方に書かない alt と title に全く同じ文字を入れると、音声読み上げソフトが2回連続で読み上げてしまい、ユーザーの迷惑になります。 title はスマホで表示されない スマートフォンには「マウスホバー」の概念がないため、title の文字は基本的に読めません。 重要な情報は title ではなく、通常のテキストとして画面に表示させてください。 記述例1 <!-- 良い例：画像の内容が具体的に伝わる --> <img src="apple.jpg" alt="もぎたての赤いリンゴ"> <!-- 悪い例：画像を見ればわかる装飾ワードやファイル名はNG --> <img src="apple.jpg" alt="画像1"> <!-- リンク先について補足する --> <a href="contact.html" title="お問い合わせフォームが別ウィンドウで開きます">コンタクト</a> <!-- 画像に補足情報を入れる（altと重複させない） --> <img src="camera-icon.png" alt="カメラのアイコン" title="クリックすると撮影モードになります"> 記述例2 「alt属性」は検索エンジンやユーザーにわかりやすいように簡潔な内容で記述 「title属性」は画像の情報を補足するような文言 詳細は https://seolaboratory.jp/32415/ AI は不正確な情報を表示することがあるため、生成された回答を再確認するようにしてください |
（前に戻る）
chie2.html(tvm)
<EOF>