モバイルでの横スクロール

Silktide は、モバイル端末でページを横方向にスクロールする必要があるかどうかをチェックします。コンテンツは小さな画面の幅に収まり、訪問者が下方向にだけスクロールすればよい状態にする必要があります。

重要な理由

ページが画面よりも幅広いと、すべてのテキスト行の一部が画面外に置かれ、読者はコンテンツを追うために左右へ何度も移動しなければなりません。これは誰にとっても負担となり、ロービジョンの人（ページを拡大していることもよくあります）や運動障害のある人にとっては大きな障壁になります。WCAG の成功基準 1.4.10（リフロー、の）では、2方向にスクロールしなくても、幅320ピクセルの画面にコンテンツが収まることを求めています。

通常、ページ全体には問題がなく、1つの要素がオーバーフローを引き起こしています。たとえば、幅の広い表、固定幅の画像、埋め込み動画、URL のような改行できない長い文字列などです。

修正方法

スマートフォンでページを開き（またはブラウザーのウィンドウ幅を320ピクセルまで狭め）、右端からはみ出しているものを見つけます。
問題の要素をレスポンシブなで修正します。

/* 固定幅の要素により、ページが画面よりも幅広くなる */
img.hero { width: 600px; }

/* 修正後: 狭い画面に収まるよう縮小される */
img.hero { max-width: 100%; height: auto; }

幅の広いデータ表では、表を専用のコンテナー内でスクロールできるようにします（overflow-x: auto）。これにより、ページの他の部分は画面に収まります。
地図や図表など、2方向のレイアウトが本当に必要なコンテンツはスクロールしても問題ありません。指摘内容がそれだけであれば、できます。

Silktide のテスト方法

ページをモバイル端末として読み込みます。
ページが画面の右端をどれだけ超えているかを測定します。10ピクセル未満のオーバーフローは、丸め誤差として無視されます。
影響を受ける端末の数に応じてオーバーフローを分類します。320ピクセル幅（iPhone 5 など）の小型スマートフォンにのみ影響するわずかなオーバーフローから、414ピクセル幅（iPhone 7 Plus など）の大型スマートフォンにも影響する幅のオーバーフローまでが対象です。

トラブルシューティング

スクロールが見つかりません

小さなオーバーフローは、大型のスマートフォンでは見えないことがあります。幅を320ピクセルにしてテストしてください。ブラウザーの開発者ツールでは幅を正確に設定できます。右端を越えているものがないか確認します。