1.4.10 リフロー レベルAA 原則1 知覚可能
スマートフォン幅で横にはみ出す
文字を大きくしたい人は、ブラウザで画面を拡大します。拡大すると、ページが使える幅は狭くなります。幅を決め打ちしたページは、そこで横にはみ出してしまいます。
さわってみよう
画面の幅を 320px まで狭めて、お知らせの本文を最後まで読んでみよう。
台風の接近にともなう臨時休校のお知らせ
9月30日（水）は、台風の接近により臨時休校とします。自宅で課題に取り組んでください。課題は学習用アプリの「お知らせ」から確認できます。10月1日（木）の登校については、前日の18時までにこのページでお知らせします。
写真：校舎の正面（幅 600px）
320px にすると、文が右で切れます。1行読むたびに右へスクロールして、また左へ戻らないといけません。見本の画面は、選んだあと矢印キーでも横に動かせます。
直してみよう
幅の指定を直して、320px のときに横スクロールが要らないページにしよう。
いまの CSS
台風の接近にともなう臨時休校のお知らせ
9月30日（水）は、台風の接近により臨時休校とします。自宅で課題に取り組んでください。課題は学習用アプリの「お知らせ」から確認できます。10月1日（木）の登校については、前日の18時までにこのページでお知らせします。
写真：校舎の正面
分かったこと
- 幅 320px の画面でも、縦スクロールだけで読めて使えるようにする（横と縦の両方へのスクロールを求めない）。
- 320px は、幅 1280px の画面を 400% に拡大したときの幅と同じ。文字を大きくして読む人の画面は、スマートフォンより狭くなることがある。
- 幅を
widthで決め打ちせず、max-widthで上限だけを決める。はみ出しそうなものは折り返させる。 - 地図・図・データの表など、2次元の配置がないと意味が伝わらない部分は例外になる。
例外の範囲や、横書きでないページ（高さ 256px の条件）のことは、WCAG 2.2 の日本語訳で確かめよう。