alt ってなんのため？ - HTML / CSS を極めるコーナー
「HTML ってなんのため？」の中でアクセシビリティについて書きました。今回はその続編として「 alt 」属性について取り上げます。
これからポートフォリオサイトを作るぞ！という方が、実務に根差した alt の書きかたを学べるようにまとめました。参考になれば幸いです。
alt 属性ってなに？
HTML で画像を記述するときに「 <img> 」内へ書く「 alt（カタカナ読みでオルト）」のことです。
画像を参照する「 src 」とは違い、「 alt 」がなくても画像は表示されます。そのため必要性を認識しづらいのですが、より多くの人に文章を届けやすくするために必要なものです。
alt を書くメリットには、以下が挙げられます。
ネットワークの不調に備える
Web ページの画像が上手く読み込めなかったときに、 alt の値に書いておいたテキストが表示されます。
スクリーンリーダーで読み上げてくれる
目の不自由な方が Web ページに訪れたときに、スクリーンリーダーによって画像が何を示しているか認識することができます。
スクリーンリーダーについては「HTML ってなんのため？」でも触れているので、よろしければどうぞ（→目次: アクセシビリティの考慮）。
alt の値はどのように書けばいい？
alt の値（ alt="ここに書くテキスト"）は状況に応じたテキストが推奨されます。つまり「画像を目で見なくても内容が伝わるように表現」できると良さそうです。
ロゴなら内容と同じにする
ロゴ画像のテキストをそのまま書きましょう。この例なら「ドットインストール」とするのがおすすめです。
プロフィールの顔写真なら「誰々の写真」とする
ポートフォリオサイトやコーポレートサイトでよく見るポートレートには、「誰々の写真（イラスト / 画像）」と記述しましょう。
もし、会社のメンバー複数人の写真が並ぶなら「の写真」が繰り返しになってしまうので、名前だけ記述すると良いですね。
装飾が目的なら空にする
装飾が目的の画像であれば、値を空にしてかまいません。文章構造上は意味を持たないので、説明をする必要がないのですね。
意味のある画像なら、見なくても様子が伝わるように書く
上の例とは違い、意味を持つ画像なので説明する必要があります。画像を目で見なくても様子が伝わるように表現しましょう。
本文と内容が重複しないように書くのもポイントです。この例なら、「すごいゲームです。」としてはいけません。
おわりに
ではここまでのおさらいです。
alt は、より多くの人に文章を届けやすくするために必要なもの
alt の値は、画像を目で見なくても内容が伝わるように考える
下記ページでは、さらに多様な事例が解説されています。より深く学ばれたい方は参照されてみてください。
. . .
それでは、次回の更新をお楽しみに。過去の「HTML / CSS を極めるコーナー」は以下からお読みいただけます。