色だけの合図
ゲームの画面です。「赤が危ない、緑は安全」と、色だけで知らせています。
赤と緑の区別がつきにくい人には、どちらも同じような色に見えます。合図が、ないのと同じです。
今日は、見る人や使う人が変わっても、伝わるページの作り方を学びます。
今日のキーワード
| ことば | いみ | れい |
|---|---|---|
| アクセシビリティ | 年れいや体の状態に関係なく、情報や道具を使えることです。 | 読み上げで使えるページ |
| 色覚 | 色の見え方のことです。人によって、見え方がちがいます。 | 赤と緑が似て見える人 |
| 読み上げ | 画面の文字を、声で読んでくれる機能です。 | 目の見えない人が使う |
| 代替テキスト | 画像の代わりに読まれる、画像の説明の文です。 | 「犬が走っている写真」 |
| 見出し | ページを区切る題名です。内容の地図になります。 | 「申し込み方法」 |
学生が入力するセルは、このプレビューでは空白です。
色の見え方は、人によってちがう
色の見え方がちがう人は、男の人では20人に1人ほどいると言われます。クラスにいても、おかしくありません。
だから、色だけで情報を伝えないことが大切です。色に、文字や形をそえます。
小さな確認: 色だけで伝えていない?
やってみよう
小さな確認: 色だけで伝えていない?
3問挑戦してみましょう。回答はここで採点され、その後は保存されません。点数を残したい場合や、続きから再開したい場合はログインしてください。ログインして点数を保存
答えはここで採点され、保存されません。アカウントがあれば、結果が残ります。
例: 色だけの表示を直す
| 場面 | 色だけの表示 | 直した表示 |
|---|---|---|
| 入力のまちがい | 枠が赤くなるだけ | 赤い枠に「名前を入れてください」と文字も出す |
| 電車の路線図 | 線の色だけで区別 | 色と、アルファベットと数字の記号を両方つける |
| グラフ | 色の線だけで区別 | 色と、線の種類や直接書いた名前を使う |
| 天気予報 | 色の地図だけ | 色と、「大雨」などの文字を重ねる |
学生が入力するセルは、このプレビューでは空白です。
やってみよう: 画像に説明をつける
<h1>文化祭のお知らせ</h1>
<!-- alt が、読み上げで読まれる画像の説明です。 -->
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2290%22%3E%3Crect width=%22160%22 height=%2290%22 fill=%22%23ffcc66%22/%3E%3C/svg%3E" alt="オレンジ色の背景に、文化祭の日付が書かれたバナー">
<p>日付: 10月12日</p>
<!-- alt の文を消すと、何の画像か分からなくなります。 -->
読み上げで使う人のために
目の見えない人は、読み上げを使って、ページを耳で読みます。
画像には代替テキストをつけます。飾りだけの画像は、説明を空にします。
見出しの順番も大切です。読み上げでは、見出しだけを聞いて、読みたい所へ移れます。
例: リンクの言葉を直す
| よくない書き方 | なぜ | よい書き方 |
|---|---|---|
| 詳しくは こちら | リンクだけ聞くと、何か分からない | 申し込み方法の詳しい説明 |
| ここをクリック | 先が分からない。スマホでは「押す」 | 文化祭の地図を見る |
| 画像1 | 何の画像か分からない | 体育館の席の配置図 |
学生が入力するセルは、このプレビューでは空白です。