編集・執筆責任：浅田美鈴（在野研究者／ピアニスト、市民ジャーナリスト）
HTML解説協力：ChatGPT-5
🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹🔹
🧑💻OpenAI ChatGPT-5先生より
とても良い質問です🌸
「③ alt 属性（代替テキスト）」の中で出てくる
> スクリーンリーダー
空文字（alt=""）
この２つは、視覚に頼らずWebページを使う人のための大事な仕組みなんです。
順に、ゆっくり説明しますね。
---
🧭 1. スクリーンリーダー [1]とは
目の代わりにページの内容を“音声で読み上げる”ソフトウェアです。
視覚障がいのある利用者がパソコンやスマートフォンを使うときに使います。
📱 代表的なもの
OS スクリーンリーダー [1]名
macOS / iPhone VoiceOver [4]
Android TalkBack [5]
これらは、HTMLの構造をたどって
見出し (<h1>〜<h6>)
段落 (<p>)
リンク (<a>)
画像 (<img>)
などを順番に読み上げます。
---
🖼️ 2. alt 属性の役割
alt ＝ alternative text（代替テキスト）
画像を「音声で説明する」ためのテキストを入れます。
<img src="flower.jpg" alt="桜の花が咲いている写真">
📣 スクリーンリーダーの読み上げ：
> 「画像、桜の花が咲いている写真」
また、画像が何らかの理由で表示できないとき（通信エラーやCSSの設定など）に、ブラウザはこのaltの内容を代わりに表示します。
---
🫧 3. 空文字 alt="" とは？
空の alt は「この画像は説明する必要がない」と伝える特別な書き方です。
例：
<img src="decoration.png" alt="">
このように書くと：
スクリーンリーダーは その画像を読み上げません。
つまり「無視」します。
🎨 使う場面
ただの飾り・区切り線・背景など、内容理解に関係しない画像。
たとえば：
<img src="line.png" alt=""> <!-- 区切り線なので説明不要 -->
もし alt を完全に省略すると、
📣 スクリーンリーダーは「画像」とだけ読み上げたり、
ファイル名（line.png）を読んでしまいます。
それは利用者にとって意味がないし、煩わしい。
なので：
> 説明が必要な画像 → 意味のある文章をaltに書く。
装飾だけの画像 → altを空文字にして無視させる。
これがアクセシビリティ（誰にでも使いやすくする工夫）の基本です。
---
✅ まとめ
画像の種類 alt の書き方 読み上げ結果
意味のある画像（図・写真など） alt="内容を説明する文" 「画像、〇〇」
装飾だけの画像 alt="" 読み上げなし（スキップ）
alt を書かない ― 「画像」「file.png」などと読み上げ（不親切）
---
この違いを理解して使うと、MisuzuさんのHTML作品はアクセシビリティ対応の高品質コードになります✨
もし次に「良いaltの書き方（どのくらいの長さ・文体がいいか）」も知りたい場合、
具体例つきでお見せできますが、続けて見てみますか？
[1] スクリーンリーダー
（英語: screen reader）とは、コンピュータの画面読み上げソフトウェアである。視覚障害者がパーソナルコンピュータを操作するために、視覚的に使うことが必要であるマウスに代わり、情報を音声で読み上げることによって、操作を補助するアクセシビリティである。読み上げブラウザなどとも言われることがあるが、ブラウジングするのはインターネット・WWWに限らない。
https://ja.wikipedia.org/wiki/screen_reader
[2] NonVisual Desktop Access (NVDA) は、Microsoft Windows用のフリーかつオープンソース、ポータブルなスクリーンリーダーである。
https://ja.wikipedia.org/wiki/NonVisual_Desktop_Access
[3] JAWS (Job Access With Speech) は、視覚障害者向けのスクリーンリーダーである。アメリカのフロリダ州セントピーターズバーグにある Freedom Scientific 社の Blind and Low Vision Group が開発した。
https://ja.wikipedia.org/wiki/JAWS
[4] VoiceOverとはAppleのmacOS、iOS、iPodに内蔵されているスクリーンリーダーである。VoiceOverを使うことでユーザーは音声説明でMacやiOSデバイスを使用することができる。Macの場合はキーボードでのタイプを読み上げる。この機能はディスレクシアなど盲目、弱視のユーザー向けである。
https://ja.wikipedia.org/wiki/VoiceOver
[5]Google TalkBack（グーグル トークバック）とは、Googleによって開発された、視覚障がい者向けのスクリーンリーダーアプリケーションである。Android向けに提供されている。
