サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「1.4.10 リフロー」とは？Level AAの要件、CSS実装、確認方法

greeden
close up photography of magnifying glass

Photo by Noelle Otto on Pexels.com

リフローとは、画面や表示領域が狭くなったときに、文章や操作部品を利用できる幅へ再配置することです。
WCAG 2.2の達成基準1.4.10「リフロー」（Level AA）は、拡大表示を使う人が一行ごとに左右へ往復しなくても、情報を読み、機能を使える状態を求めています。

この記事では、WCAG 2.2の達成基準1.4.10に沿って、要件の読み方、CSSによる実装例、例外、確認手順を順に説明します。
規格全体を先に確認したい場合は、WCAG 2.2とWebアクセシビリティの基本も参照してください。

リフローが必要な理由

文字を拡大すると、同じ画面に表示できる文字数は減ります。
行が画面の外へ伸びたままだと、利用者は文章を一行読むたびに横へ移動し、次の行を読むために左へ戻らなければなりません。

リフローによって文章、画像、ナビゲーション、フォームなどが利用可能な幅へ収まれば、主な移動方向を縦に保てます。
ただし、単に横スクロールバーを隠すことが目的ではありません。
拡大後も、元の画面にあった情報と機能へ到達できる必要があります。

達成基準1.4.10の要件

通常の横書きWebページのように縦へスクロールするコンテンツは、幅320 CSSピクセル相当で、情報や機能を失わず、縦横二方向のスクロールを必要としない表示が求められます。
320 CSSピクセルは、幅1280 CSSピクセルの表示領域を400%に拡大した場合に相当します。

縦書きなど、横方向へスクロールするコンテンツでは、基準となるのは高さ256 CSSピクセル相当です。
「320px幅のスマートフォンだけに対応すればよい」という意味ではなく、表示領域が同等の狭さになったときにも内容を利用できるかを確認する基準です。

W3Cの達成基準1.4.10の解説では、すべてを一列に積み上げることまでは求めていません。
各領域の文章を二方向へ移動せず読め、情報と機能を保てる構成であることが判断の軸です。

CSSでリフローを実装する方法

リフロー対応では、固定幅を一律に解除するだけでなく、レイアウト、長い文字列、画像、操作部品を分けて確認します。
次のコードは実装パターンの例であり、ページ全体の適合を保証するものではありません。

メディアクエリで横並びを縦並びへ変える

横並びの領域が狭い表示幅で収まらない場合は、メディアクエリで縦並びへ切り替えます。
切り替え幅は端末名ではなく、内容が欠けたり操作しにくくなったりする位置を基準に決めます。

.container {
  display: flex;
  gap: 1.25rem;
}

@media (max-width: 48rem) {
  .container {
    flex-direction: column;
    gap: 0.75rem;
  }
}
<div class="container">
  <section>コンテンツ1</section>
  <section>コンテンツ2</section>
</div>

Flexboxで要素を折り返す

カードや項目を横に並べる場合は、flex-wrap: wrapで折り返しを許可します。
各項目のmin-width: 0は、長い内容によって項目が親要素からはみ出す問題を抑えます。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 18rem;
  min-width: 0;
}

Gridで列数を自動調整する

CSS Gridでは、利用できる幅に応じて列数を変えられます。
最小値にも利用可能幅を反映させると、コンテナが狭い場合に列そのものがはみ出すのを防ぎやすくなります。

.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 12.5rem), 1fr)
  );
  gap: 1rem;
}

モバイルアクセシビリティとレスポンシブ設計では、画面が狭いときの読みやすさや操作性を含めて解説しています。

長い文字列と画像のはみ出しを防ぐ

URLや連続した英数字など、通常の位置で改行できない文字列は、コンテナを押し広げることがあります。
overflow-wrapで必要時の折り返しを許可します。

.long-text {
  overflow-wrap: anywhere;
  white-space: normal;
}

画像は、元の大きさを保ったまま狭いコンテナへ置くと、横方向にはみ出す場合があります。
表示領域に合わせて縮小し、縦横比を保つ指定を加えます。

.content img {
  display: block;
  max-width: 100%;
  height: auto;
}

動的なUIの機能を残す

リフローの中心はCSSによるレイアウト調整ですが、メニューや検索欄などを折りたたむUIでは、JavaScriptを使う場合があります。
このとき、デスクトップ表示にあった機能を消すのではなく、メニューボタンや開閉領域から同じ機能へ到達できるようにします。

見た目を一列に変えても、ボタンが画面外に残る、フォーカスが見えない、開閉後の項目をキーボードで操作できない、といった状態では十分ではありません。
レイアウトと操作を一緒に確認します。

二方向レイアウトが認められる部分

情報の理解や機能の利用に二方向の配置が必要な部分には例外があります。
代表例は、列と行の関係を読むデータ表、地図、図、編集画面、意味のあるインデントを保つコードなどです。

ただし、例外は必要な部分だけに適用されます。
たとえばデータ表を横スクロール可能な専用コンテナに収め、その前後の見出しや説明文は表示領域内でリフローさせます。
ページ全体を横スクロールさせる設計が自動的に認められるわけではありません。

よくある失敗と修正の考え方

固定幅のコンテナが画面外へはみ出す

次の指定では、利用できる幅が400px未満になってもコンテナの幅が変わりません。

.container {
  width: 400px;
}

上限を保ちつつ狭い表示領域へ合わせるなら、幅を可変にします。

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
}

横スクロールを隠して内容まで見えなくする

overflow-x: hiddenで横スクロールバーだけを消しても、画面外の内容が読めるようにはなりません。
はみ出しの原因となる固定幅、折り返さない文字列、大きすぎる画像、絶対配置などを特定し、情報へ到達できる状態を保ちます。

狭い画面でナビゲーションを削除する

表示領域が狭いことを理由に、ナビゲーションや検索機能を完全に消すと、機能の損失につながります。
項目をメニュー内へ移す場合は、メニューボタンから同じ項目を開けること、キーボードで操作できること、閉じた後もフォーカス位置がわかることを確認します。

リフローの確認手順

  1. 基準となる表示を記録する：通常倍率で、本文、ナビゲーション、画像、フォーム、ボタンなど、利用できる情報と機能を確認します。
  2. 幅320 CSSピクセル相当で表示する：ブラウザの表示領域を狭くするか、幅1280 CSSピクセル相当の表示領域から400%へ拡大します。
  3. 二方向の移動を確認する：一般的な文章を読むために、縦移動と横移動を繰り返す必要がないかを調べます。
  4. 情報の欠落を確認する：文字、画像、ラベル、メニュー項目などが、理由なく消えたり途中で切れたりしていないかを比べます。
  5. 機能を操作する：リンク、ボタン、メニュー、入力欄を、マウスだけでなくキーボードでも操作し、フォーカスが画面外や固定要素の裏へ隠れないかを確認します。
  6. 例外部分を切り分ける：表や地図などに二方向スクロールが必要なら、その部分だけに限定され、周囲の文章はリフローしているかを確認します。

ブラウザの開発者ツールは表示幅の確認に役立ちますが、一つの端末表示だけで判断しないことが大切です。
実際のブラウザズームとキーボード操作を含むアクセシビリティテストの進め方も組み合わせてください。

実装時のチェックリスト

達成基準1.4.10への対応は、横スクロールを機械的に消す作業ではありません。
表示領域が狭くなっても、利用者が内容を追い、同じ機能を使えるようにレイアウトと操作を組み直す作業です。

当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
自社サイトのリフロー対応を含むアクセシビリティ改善に関心がある方は、サービスの詳細をご覧ください。

モバイルバージョンを終了