モバイルでのズームとスクロール

Silktide は、訪問者がページを拡大したり、ページを縦横にドラッグしたりしなくても、小さな画面でページが正常に動作するかをチェックします。このチェックに失敗するページは、通常、モバイルデバイス向けにまったく設計されていません。

重要な理由

デスクトップ専用のページをスマートフォンで読むには、テキストの列をピンチ操作で拡大し、1行読むたびに横方向と縦方向の両方にスクロールしなければなりません。これは誰にとっても苦痛であり、弱視や運動機能に障害のある多くの人にとっては不可能です。現在、モバイルデバイスはウェブトラフィックの大半を占めているため、このようなページは訪問者の大多数にとって使いにくく、検索エンジンでも順位が下がります。WCAG の達成基準 1.4.10（リフロー、の）では、320ピクセル幅の画面で、二次元スクロールをしなくてもコンテンツがリフローすることを求めています。

修正方法

レスポンシブウェブデザインを使用し、狭い画面ではページが1列にリフローするようにします。最新のレイアウト（メディアクエリ、 flexbox、grid）によって、これは標準的な方法になっています。ほとんどのサイトテーマは、標準でこの機能に対応しています。
ページテンプレートに正しいタグを含めます。

<!-- モバイルブラウザにデバイスの幅で表示するよう指示します -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

ページを幅320ピクセル（一般的なスマートフォンで最小の幅）でテストし、横スクロールを強制するものがないことを確認します。幅の広い表、固定幅の画像、途中で改行できない長い文字列などが、よくある原因です。

ページを実用上レスポンシブにできない場合は、検出結果をできます。

Silktide によるテスト方法

ページをモバイルデバイスとして読み込みます。
ページがモバイル向けに設計されているように見えるかを判定します。次のいずれかに該当する場合、ページは失敗します。
- 使用可能な viewport タグがない、または viewport で480ピクセルを超える固定幅が指定されている。
- テキストの35%超が小さすぎて読めない（10ピクセル未満）。
- 画面幅の40%を超えて横方向にスクロールする。
- ページを画面に収めるために、ブラウザが60%未満までズームアウトする必要がある。
失敗したページを、ページごとに1回報告します。

トラブルシューティング

ページの一部で実際に二次元レイアウトが必要です

WCAG では、地図、データテーブル、図など、使用するために二次元レイアウトが必要なコンテンツについて例外を認めています。ただし、その周囲のページはリフローする必要があります。フラグが付いたページがこのような例外に該当する場合は、検出結果を承認してください。