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

更新日: 2026年1月10日

ある深夜、作業中にマウスの電池が切れてしまったことがあります。 予備の電池もなく、仕方なくキーボードの「Tabキー」だけでWebブラウジングをしようとしました。

その時、私は愕然としました。 自分が作ったWebサイトの「お問い合わせフォーム」に、Tabキーではどうしてもフォーカスが当たらず、送信ボタンを押すことができなかったのです。 「なんて使いにくいサイトを作ってしまったんだ...」と、開発者として恥ずかしくなりました。

「Webアクセシビリティ」とは、障がいを持つ方だけでなく、マウスが壊れた私のような状況の人や、電波が悪くて画像が表示されない人など、あらゆる状況のすべての人が、平等に情報にアクセスできるようにするための考え方です。

これは、特別な誰かのためのものではなく、未来の自分自身を含む、すべての人への「思いやり」のデザインなのです。 今日は、その第一歩として、明日からすぐに実践できる2つのHTMLの書き方を紹介します。

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

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

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

この alt 属性（代替テキスト）は、画像が表示されない環境や、スクリーンリーダー（画面読み上げソフト）を使っているユーザーにとって、画像の「代わり」になる非常に重要な情報です。

alt="" だと、そこには「虚無」が広がっているだけです。ユーザーには何も伝わりません。

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

このように、画像が伝えている情景や情報を、簡潔な言葉で説明するだけで、あなたのサイトは、目の見えない人にとっても、ずっと豊かで、分かりやすい場所になります。 さらに、これはGoogleの画像検索のクローラーにとっても「この画像は柴犬なんだな」と理解するヒントになり、SEO（検索順位）向上にも直結します。まさに一石二鳥です。

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

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

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

これでは、スクリーンリーダーは「お名前」と「入力欄」が無関係なものとして認識してしまいます。 また、マウスユーザーにとっても、「お名前」という文字をクリックしても何も起きないため、小さな入力欄を正確にクリックしなければならず、不便です。

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

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

こうすることで、文字と入力欄が「ペア」になります。 「お名前」という文字をクリックするだけで、入力欄にカーソルがピタッと吸い込まれるようになります。これが、私がマウスの電池が切れた時に喉から手が出るほど欲しかった機能です。

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

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

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