アクセシビリティとは、「だれでも使えること」。目が見えにくい人、マウスが使えない人、ゆっくりでないと読めない人——いろいろな人がいて、いろいろな状況でページは開かれます。そのだれが来ても、ちゃんと読めて、ちゃんと操作できる。それがアクセシビリティの高いページです。
「いろいろな状況」は、思ったより身近
障害のある人だけの話ではありません。だれにでも、こんな瞬間があります。
- まぶしい屋外でスマホを見る → 薄い色の文字が読めない
- 片手がふさがっている → 小さなボタンが押せない
- マウスが壊れた → キーボードだけで操作したい
- 音を出せない電車の中 → 動画の内容が分からない
アクセシビリティのくふうは、こうした全員のいつもの不便も一緒に解決します。だから、ちゃんと作られたページは、結局みんなにとって使いやすいのです。
読み上げでページを「聞く」人がいる
目の不自由な人は、スクリーンリーダーという読み上げソフトでページを聞きます。画面を見るかわりに、HTMLの構造を上から順に音声で聞いていく——このとき頼りになるのが、みなさんがHTMLコースで学んだタグの意味です。
<h1>〜<h3>があるから「見出しだけ拾って流し読み」ができる<img>のaltがあるから「写真に何が写っているか」が分かる<button>だから「ここは押せる」と分かる
つまり、意味のとおりにHTMLを書くこと自体が、最大のアクセシビリティ対応。みなさんはすでに一歩目を踏み出しています。
HTMLページの骨組みをつくろう「意味のとおりに書く」の代表格。ページの骨組みタグの回このコースで学ぶこと
このコースでは、今日から実践できる5つのくふうを、1つずつ手を動かせる形で見ていきます。
| レッスン | 解決すること |
|---|---|
| 画像のalt | 画像が見えない人に内容を伝える |
| 色のコントラスト | 薄くて読めない文字をなくす |
| フォーカスの輪 | キーボードだけでも操作できるようにする |
| フォームとラベル | 入力欄の意味を確実に伝える |
| リンクの文言 | 「こちら」だけでは伝わらない問題を直す |
「だれでも」の中には、未来のじぶんも入ってるぴよ
このレッスンのまとめ
- アクセシビリティ＝だれでも・どんな状況でも使えるというページの品質
- 障害のある人だけでなく、まぶしい屋外や片手操作などみんなの不便も解決する
- 意味のとおりにHTMLを書くことが、最大のアクセシビリティ対応