WEB ACCESSIBILITY · REFLOW

CSS Reflow Inspector

拡大しても、横スクロールを出さない。

01

LIVE REFLOW TEST

400%ズームの画面幅で確かめる

320 CSS PXOVERFLOW

固定幅のサイドバーと本文が、320pxの表示幅からはみ出します。

BEFORE
reflow.local / dashboardSIMULATED VIEWPORT
0320 CSS px320
現在の表示幅横にはみ出す原因内側だけのスクロール
VIEWPORT320px
SCROLL WIDTH1024px
HORIZONTAL+704px
READING AXISX + Y
02

WHY 320 CSS PX?

1280pxを400%にすると、320px

STARTING VIEWPORT1280px
VISIBLE WIDTH320 CSS px

400%は面積ではなく、幅と高さをそれぞれ4倍にする考え方です。縦書きなど横方向に読むコンテンツでは、1024pxの高さを400%にした256 CSS px相当も基準になります。

03

REFLOW PATTERN

固定幅を、内容に追従させる

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

img,
svg {
  max-inline-size: 100%;
}

.actions {
  display: flex;
  flex-wrap: wrap;
}

単純に全部を1列にするのではなく、内容が収まらなくなる位置で折り返し、操作や情報を残します。

04

WCAG 1.4.10 · LEVEL AA

情報を失わず、2方向スクロールを避ける

VERTICAL CONTENT幅320 CSS px相当

一般的な縦スクロールのページは、情報や機能を失わず、上下のスクロールだけで利用できるようにします。

HORIZONTAL CONTENT高さ256 CSS px相当

縦書きなど横方向へ進むコンテンツでは、左右のスクロールだけで利用できる状態を確認します。

EXCEPTION2次元配置が必要な部分

データ表、地図、図など、意味や利用に2方向の配置が必要な部分は例外になり得ます。ページ全体ではなく、その部分にスクロールを閉じ込めます。

W3C：Understanding SC 1.4.10 Reflow ↗

320px幅にするだけで、検証完了ではありません。

文字や操作が消えていないか、固定ヘッダーやフロート要素が内容を覆っていないか、キーボードで到達できるかも確認します。ブラウザズームでは文字・レイアウト・固定UIの見え方が一緒に変わるため、実サイトでは実際の400%ズームでも試してください。