1.1.1 非テキストコンテンツ レベルA 原則1 知覚可能
画像をことばで伝える
目の見えない人や見えにくい人は、画面の文字を読み上げるソフト（スクリーンリーダー）でWebページを聞いています。画像は、代わりの文（alt）が無いと中身が伝わりません。
さわってみよう
読み上げのまねを使って、このページから文化祭の日にちが分かるか聞いてみよう。
文化祭のお知らせ
日程は、上のポスターを見てください。
読み上げのまね
読み上げられた順番
- （まだ何も読み上げていません）
簡単なまねです。本物の読み上げソフトは、ソフトや設定によって読み方がちがいます。
直してみよう
3つの画像に代わりの文（alt）を付けよう。飾りの画像は「読み飛ばす」にしよう。
文化祭のお知らせ
日程は、上のポスターを見てください。
① ポスターの画像（IMG_2031.jpg）
② 虫めがねのボタンの画像（icon_search.svg）
③ 飾りの線の画像（line_deco.png）
読み上げられた順番
簡単なまねです。本物の読み上げソフトとは読み方がちがうことがあります。
分かったこと
- 画像には、その画像と同じ役目を果たす文を alt に書く。ポスターなら、書かれている大事な情報（日にちなど）を文にする。
- アイコンだけのボタンは、見た目（虫めがね）ではなく押すと何が起きるか（検索）を名前にする。
- 飾りだけの画像は
alt=""（中身が空の alt）にして、読み飛ばされるようにする。alt そのものを書かないと、ファイル名などが読まれることがある。 - 「画像」「写真」とだけ書いても、何の画像かは伝わらない。
グラフや地図のように短い文にしにくい画像、テストや CAPTCHA など、例外や書き方のくわしい考え方は WCAG 2.2 の日本語訳で確かめよう。