誰にでも使える画面にする
アクセシブルなデザインは、目や耳や手に違いがある人も、同じ画面を使えるようにする作り方です。視力が弱い人、画面を読み上げて聞く人、キーボードだけで操作する人にも、買い物ができるようになります。
一部の人だけの話ではありません。晴れた屋外で、まぶしい画面を見る人も、同じ困りごとを持ちます。
このレッスンのゴール
メモ
画面が、見た目や操作の違う人にも使えるかを、4つの点で調べることができる。
重要な言葉
| ことば | いみ |
|---|---|
| コントラスト比 | 文字の色と背景の色の、明るさの差。1から21 |
| 代替テキスト | 画像の代わりに読み上げられる言葉 |
| ラベル | 入力欄の名前。欄の外に残る文字 |
| フォーカス | 今、キーボードで操作できる場所 |
| スクリーンリーダー | 画面の文字を、音声で読み上げるソフト |
学生が入力するセルは、このプレビューでは空白です。
コントラスト比で、文字の読みやすさを測る
コントラスト比は、文字の色と背景の色が、どれだけ違って見えるかを表す数です。同じ色なら1、黒と白なら21になります。
よく使われる目安では、ふつうの大きさの文字は4.5以上が必要です。薄い灰色の文字は、この目安を満たしません。
例: 灰色の文字を計算する
| 手順 | 灰色 #999999 | 白 #ffffff |
|---|---|---|
| 1. 赤緑青を0から1にする | 153 ÷ 255 = 0.6 | 1 |
| 2. 明るさに直す | 約 0.3185 | 1 |
| 3. 3色を重みを付けて足す | 約 0.3185 | 1 |
| 4. 明るい方に0.05を足す | 1 + 0.05 = 1.05 | |
| 5. 暗い方に0.05を足す | 0.3185 + 0.05 = 0.3685 | |
| 6. 割る | 1.05 ÷ 0.3685 = 2.85 |
学生が入力するセルは、このプレビューでは空白です。
ラボの店の配色を測る
ラボの店の style.css には、文字と背景の色の組が5つあります。次の Run は、その5組のコントラスト比を計算して、目安に足りるかを答えます。
本文の灰色は2.85で足りず、見出しの濃い灰色は15.91で十分です。他の3組も、足りません。出力は英語です。
店の配色のコントラスト比を見る
docker exec jupyter python3 steps/contrast.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
画像には言葉を、入力欄には名前を
代替テキストは、画像が見えない人のための言葉です。alt という属性に書きます。
入力欄には、ラベルが必要です。欄の中の薄い文字では足りません。入力を始めると消え、読み上げソフトが名前として読まないことがあります。
例: 直す前と直した後
<!-- 直す前: 画像にも入力欄にも、言葉がない -->
<img src="blue.png">
<input type="text" id="postcode">
<!-- 直した後 -->
<img src="blue.png" alt="青い急須">
<label for="postcode">郵便番号</label>
<input type="text" id="postcode">
よくある間違い
注意
多くの人は、入力欄の中の薄い文字が、ラベルの代わりになると考えます。入力を始めると消えますし、読み上げソフトは欄の名前として読まないことがあります。ラベルは、欄の外に残してください。
キーボードだけでも、使い切れるようにする
マウスを使えない人は、Tab キーで、リンクや欄を順に移ります。いまどこにいるかを示すのが、フォーカスの枠です。
スタイルシートでこの枠を消すと、キーボードの人は場所を見失います。ラボの店の観察メモにも、Tab で迷った人がいました。
店のページの問題を数える
docker exec jupyter python3 steps/audit.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
さらに挑戦: 自分の画面を測る
自分のウェブページの文字色と背景色を、2組選んでください。課題の関数で、コントラスト比を求めます。
足りない組は、色を少し濃くして、もう一度測りましょう。何%濃くすると、目安に届くかを書いてください。