画面幅に応じたレイアウト（1.4.10 AA）

26 September 2025

適合レベル

AA

※各レベルについては適合レベルとはをご覧ください

概要

スマートフォンなどの狭い画面でも、横スクロールが発生することなく、すべてのコンテンツが閲覧・操作できるようにする（リフロー）。

具体的な実装方法

1.4.10 AA

1. ⭕️良い例

レスポンシブウェブデザインの手法を用いて、コンテンツがビューポートの幅に応じて柔軟にレイアウトを変更できるように実装します。

ポイント

  • 相対単位の使用: コンテナの幅や文字サイズに、パーセント（%）、vw、em、remなどの相対単位を使用します。
  • リキッドレイアウト: ビューポートの幅に応じて、コンテンツの幅が流動的に変わるレイアウトを採用します。
  • メディアクエリ: 特定のブレークポイント（例: 320px）を設定し、その幅になった際にレイアウトが1列になるようにCSSを調整します。
  • フレックスボックス (display: flex) やグリッドレイアウト (display: grid): これらのCSS機能を利用すると、柔軟でレスポンシブなレイアウトを容易に構築できます。

実装例 (CSS)

/* コンテナの最大幅を設定し、中央に配置 */
.container {
  max-width: 1200px; /* PCなど広い画面での最大幅 */
  width: 90%;       /* ビューポート幅の90%を基本とする */
  margin: 0 auto;
}

/* 画像がコンテナからはみ出さないようにする */
img {
  max-width: 100%;
  height: auto;
}

/* 画面幅が狭い場合は、フレックスボックスのアイテムを縦に並べる */
.flex-container {
  display: flex;
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column; /* 画面幅が768px以下で縦積みにする */
  }
}

2. ❌悪い例

固定幅のレイアウト

  • コンテナや主要な要素の幅をピクセル（px）で固定している。

<pre> タグの不適切な使用

  • 本来は整形済みテキストを表示するための <pre> タグを、レイアウト目的で使用している。<pre> タグ内のテキストは自動で折り返されないため、水平スクロールの原因となります。

幅の広いコンテンツ

  • サイズの大きい画像やデータテーブルが、何の対策もなしに配置されており、画面幅を狭めるとはみ出してしまう。

なぜ問題なのか

これらの実装は、ブラウザの表示領域を狭めたり、ページを拡大したりした際に、コンテンツが自動で折り返されず、水平スクロールバーが表示される直接的な原因となります。

改善策

  • 固定幅の指定を max-width に変更し、width: 100% などを併用する。
  • データ量の多いテーブルは、レスポンシブテーブルのデザイン（例：列を縦に並べ替える、横スクロール可能なコンテナで囲む）を検討する。

3. プラットフォーム別の実装

Webページでは、レスポンシブウェブデザインの原則に従い、HTMLとCSSを組み合わせることで達成します。特別なWAI-ARIAの技術は通常必要ありません。

4. 特殊なケースへの対応

二次元のレイアウトが必要不可欠なコンテンツは、この達成基準の例外となります。

例:

  • 地図
  • 複雑な図版やダイアグラム
  • データテーブル（多数の列と行を持つもの）
  • ビデオ編集ソフトのタイムラインのようなUI

注意

データテーブルが例外に該当する場合でも、テーブル全体を横スクロールできるコンテナ要素で囲むなど、ページの他の部分がリフローの要件を満たすように実装することが重要です。

確認観点

1.4.10 AA

1. 定量的な基準の担保

ブラウザのズーム機能による確認

  1. PCのブラウザでウェブページを開きます。
  2. ブラウザの表示を**400%**に拡大します。（ショートカットキー: Ctrl + + / Cmd + +）
  3. この状態で、テキストコンテンツを読むために水平スクロール（左右のスクロール）が発生しないことを確認します。

ブラウザのデベロッパーツールによる確認

  1. デベロッパーツールを開きます。（ショートカットキー: F12 or Ctrl + Shift + I / Cmd + Option + I）
  2. デバイスモードを有効にし、ビューポートの幅を 320px に設定します。
  3. この状態で、水平スクロールが発生しないこと、またコンテンツや機能が失われていないことを確認します。

2. 定性的な基準の担保

レビュー

  • CSSコードレビューで、width に大きなピクセル値が固定で指定されていないか確認します。
  • レスポンシブデザインのベストプラクティス（メディアクエリ、相対単位の使用など）が適用されているかを確認します。

専門家による監査

  • アクセシビリティ専門家が、実際に様々なデバイスやズームレベルでコンテンツを閲覧し、情報の損失や操作不能な機能がないかを評価します。
  • 例外的に二次元スクロールが必要なコンテンツが、利用者にとって本当に「必要不可欠」であるかを判断します。

参考文献

＞ 達成基準 1.4.10: リフローを理解する