フロントエンド開発 / 約20分
アクセシビリティの基礎
なぜこれを学ぶか
「見た目が良い」と「使いやすい」は別物です。アクセシビリティは、あらゆる状況のユーザーが使えるようにする設計思想です。
アクセシビリティ(a11y) とは、視覚・聴覚・運動機能などに制約があるユーザーも含めて、誰もが使えるようにする考え方です。
画像には alt属性 を、フォーム部品には label要素 を必ず紐付けます。スクリーンリーダーはこれらの情報を読み上げてユーザーに伝えます。
キーボード操作 だけで全ての機能を使えるようにすることも重要です。マウスを使えない・使わないユーザーは想像以上に多くいます。
色だけで情報を伝えない ことも原則の一つです。この道場のスキルチェックが「◎/○/△」の記号とテキストを併用しているのは、色覚特性のあるユーザーにも伝わるようにするための好例です。
アクセシビリティは特別な少数派のためだけではなく、一時的な制約(腕を怪我してマウスが使えない、屋外で画面が見えにくい等)を含めた全ユーザーの使いやすさに繋がります。
重要ポイント
- 画像にはalt属性、フォームにはlabel要素を付ける
- キーボード操作だけで機能を使えるようにする
- 色だけで情報を伝えない(テキストや記号も併用)
理解度チェック
選ぶと即座に解説が表示されます。
`<img src="delete.png">` にalt属性が無い。何が問題か?
ヒントを見る
スクリーンリーダーを使っているユーザーは、画像そのものを見ることができません。alt属性が無いと、その画像が何を意味するのかどう伝わるでしょうか。
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか?