Webアクセシビリティ入門：なぜalt属性は「思いやり」なのか？

公開日: 2025年10月1日

あなたがWebサイトを作るとき、誰に使ってもらうことを想像しますか？ 最新のスマートフォンを操る若者でしょうか。大きなPCモニターで作業する同僚のエンジニアでしょうか。

しかし、インターネットの世界には、もっと多様な人々がいます。 視覚に障がいがあり、スクリーンリーダー（画面読み上げソフト）を使ってWebを閲覧する人。 一時的な怪我で、マウスが使えず、キーボードだけで操作する人。 あるいは、電波の悪い場所で、画像が表示されるのを待っていられない人。

「Webアクセシビリティ」とは、このような、様々な状況や能力を持つすべての人が、あなたが作ったWebサイトの情報を平等に受け取れるように設計するための、非常に重要な考え方です。 これは、特別な誰かのためのものではなく、未来の自分自身を含む、すべての人への「思いやり」のデザインなのです。 今日は、その第一歩として、明日からすぐに実践できる2つのHTMLの書き方を紹介します。

1. のalt属性：見えない人に「絵」を語る

タグを使って画像を配置するとき、alt 属性を何気なく空にしていませんか？

<!-- 悪い例 -->
<img src="dog.jpg" alt="">

この alt 属性（代替テキスト）は、画像が表示されない環境（電波が悪い、スクリーンリーダーを使っているなど）で、画像の「代わり」に表示・読み上げられる、非常に重要なテキストです。

スクリーンリーダーを使っているユーザーにとって、alt="" は、そこに「何かがある」という気配だけを残して、何も情報を伝えてくれない、非常に不親切な体験になります。

<!-- 良い例 -->
<img src="dog.jpg" alt="公園の芝生の上で、楽しそうにボールを追いかける柴犬">

このように、画像が伝えている情景や情報を、簡潔な言葉で説明するだけで、あなたのサイトは、目の見えない人にとっても、ずっと豊かで、分かりやすい場所になります。 これは、Googleの画像検索のクローラーにとっても、その画像が何であるかを理解するための、最高のヒントになるのです（SEOにも繋がります！）。

2. タグ：入力欄に「名前」を付ける

お問い合わせフォームなどを作る際、入力欄の隣に、ただのテキストを置いて満足していませんか？

<!-- 悪い例 -->
お名前
<input type="text" id="name_input">

これでは、スクリーンリーダーのユーザーは、「読み上げ：お名前」「読み上げ：エディットテキスト」と、2つのものがバラバラに読み上げられ、お名前」というラベルと、入力欄が、互いに関連していることを理解できません。

正しい方法は、 タグを使い、for 属性で、対応する入力欄の id を明示的に紐付けることです。

<!-- 良い例 -->
<label for="name_input">お名前</label>
<input type="text" id="name_input">

こうすることで、スクリーンリーダーは「お名前、エディットテキスト」と、これらが一つのペアであることを明確に読み上げてくれます。 さらに、この テキストをクリックするだけで、対応する入力欄に自動でフォーカスが当たるようになり、マウスを使っているユーザーにとっても、格段に使いやすいフォームになるのです。

まとめ：思いやりが、サイトの価値を高める

Webアクセシビリティは、難しい専門知識の塊ではありません。 それは、「もし自分が、違う状況にいたら、このサイトを快適に使えるだろうか？」と、ほんの少しだけ想像力を働かせることから始まります。

正しく alt 属性を記述すること。 タグで、入力欄との関係を明示すること。 このような小さな「思いやり」の積み重ねが、あなたのサイトを、より多くの人々に愛され、そしてGoogleからも高く評価される、真に価値のある場所に育てていくのです。