アクセシビリティの基本(alt・aria-label)

このレッスンでは、alt属性やaria-labelを使ったアクセシビリティの基本を学び、誰にとっても使いやすいページを作れるようになることを目標にします。「HTML アクセシビリティ 基本」で調べている方向けです。

アクセシビリティは、目が見えない人や操作が難しい人を含め、誰でもページを使えるようにする配慮です。画像にはalt属性で説明文を、アイコンだけのボタンにはaria-labelで役割を伝えます。

サンプルコードでは、ロゴ画像にalt="サイトのロゴ画像"という説明文を、記号だけのボタンにaria-label="メニューを開く"という役割の説明を付けています。見た目には現れない情報ですが、読み上げソフトを使う人にはこれらの説明が音声として伝わります。

初心者がよくつまずくのが、装飾目的だけの画像にも意味のあるaltを書いてしまい、かえって情報が冗長になることです。純粋な装飾目的の画像はalt=""と空にして、読み上げソフトが読み飛ばせるようにするのが正しい使い方とされています。

読み上げソフト(スクリーンリーダー)を使う人は、これらの情報を頼りにページの内容を理解します。デザインの見た目だけでなく、誰にとっても使いやすいページを作ることは、現代のWeb制作で欠かせない基本姿勢です。