見えない人は、ページをどう使う？
目の見えない人は、画面の文字を音声で読み上げるソフトでページを使います。マウスを使えない人は、キーボードだけで操作します。
誰でも使えるページを、アクセシブルなページと言います。作り手が少し気をつければ、ほとんどの人が使えます。
このレッスンのゴール
メモ
ページが誰にでも使えるかを、画像の説明と見出しの順で確かめられる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| アクセシビリティ | 年齢や障がいに関係なく、誰でも使えること | |
| スクリーンリーダー | 画面の内容を音声で読み上げるソフト | |
| alt（代替テキスト） | 画像の内容を文字で説明したもの | alt="焼きたてのパン" |
| 見出し | ページの章の題。h1からh6まである | <h2> |
| テスト | 決めた確認を何度でも同じ手順でやること | |
| lang | ページが何語で書かれているかを示す印 | lang="ja" |
学生が入力するセルは、このプレビューでは空白です。
ページはHTMLの印でできている
ページの正体は、HTMLという文書です。見出しは <h1>、画像は <img> のように、印で意味を付けます。
スクリーンリーダーは、見た目ではなく、この印を読み上げます。だから、印が正しいことが大事です。
パン屋のページのHTMLを読む
curl -s http://web/ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
h1の数を数える
curl -s http://web/ | grep -c "<h1>"ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
このページに足りない物
ページには <title> と <h1> があります。ここまでは良いです。
でも、最初の <!doctype html> のあとに <html lang="ja"> がありません。lang が無いと、読み上げが言葉を間違えることがあります。
画像には説明の文字が要る
見えない人には、画像が何かが分かりません。そこで alt に、画像の内容を短く書きます。
飾りだけの画像は alt="" と空にします。読み上げが飛ばしてくれます。alt を書き忘れると、ファイル名が読まれてしまいます。
例：良いaltと悪いalt
| 画像 | 悪いalt | 良いalt |
|---|---|---|
| 焼きたてのパンの写真 | IMG_2031.png | 焼きたてのパン |
| 店のロゴ | 画像 | ブライトサイドベーカリーのロゴ |
| 飾りの線 | 線の画像 | （空の alt="" ） |
学生が入力するセルは、このプレビューでは空白です。
見出しは順番に並べる
見出しは、本の目次のように、h1、h2、h3と順に深くなります。読み上げのソフトは、見出しだけを順に聞くこともできます。
h2 のあとにいきなり h4 が来ると、間が抜けています。大きさのためでなく、意味のために選びます。
例：見出しの並びを調べる
| 並び | 結果 | わけ |
|---|---|---|
| 1, 2, 3 | 良い | 一つずつ深くなる |
| 1, 2, 2, 3 | 良い | 同じ深さは続けてよい |
| 1, 2, 4 | 飛んでいる | 2のあとに4が来た |
| 1, 3 | 飛んでいる | 1のあとに3が来た |
学生が入力するセルは、このプレビューでは空白です。
よくある間違い
注意
見た目が良ければ使えると考えることです。文字を大きくするために見出しの印を使うと、読み上げでは目次が乱れます。
さらに挑戦：lang を調べる
has_lang(html) を書いてみましょう。<html lang= が含まれていれば True を返します。
パン屋のページのHTMLを文字にして渡すと、False が返ることを確かめます。