viewports

ビューポート

このスキルでは、幅と高さを固定した複数の条件でページをレンダリングします。各レンダリングを測定し、横スクロール、テキストの切り取り、小さなターゲット、ホバーでしか表示されないコントロールを確認します。

推測せず、すべての幅でレンダリングする

幅は正確に指定します。320、375、768、1024、1440に加え、各プロジェクトのブレークポイントの前後1pxです。メディアクエリから幅を推測しただけでは、検証結果になりません。レイアウトを変更したら必ず実行し、ユーザーがスマートフォンや幅を指定した場合も実行します。

結果を開く検証はverifyに属します。1つのレンダリング内の配置はalignmentに属します。セーフエリア、タップ領域、動的ビューポート単位はdefaultsに属し、そこでの失敗にはそのIDを記載します。

1. ブレークポイントを確認する

CSS、Tailwindの設定、またはトークンからブレークポイントを確認します。固定幅に各ブレークポイントの1px手前と1px先を追加します。ブレークポイントの境界を確認しないスイープにはviewports-cross-each-breakpointを付けます。

2. 各幅でレンダリングする

各幅でデバイスエミュレーションを使ってビューポートを設定します。320×568、375×812、768×1024、1024×768、1440×900を使用します。ブレークポイントの境界は高さ800pxでレンダリングします。1024未満の幅ではすべてタッチ操作をエミュレートします。それぞれでページ全体のスクリーンショットを撮ります。コードからレイアウトを判断した場合はviewports-render-every-widthを付けます。

3. 各レンダリングを測定する

各幅でブラウザーのevaluate呼び出しを使ってoverflow.jsを実行します。その幅の切り抜きを見て確認するまでは、各結果を候補として扱います。

ページ全体の横スクロールは発生しません。ただし、ボックス内のスクロールは許容されます。320px幅で40pxの横スクロールがある場合はviewports-no-sideways-scrollを付けます。

テキストは、省略記号や行数制限なしにボックスで切り取られることはありません。375px幅でボタンのラベルが途中で切れる場合はviewports-no-clipped-textを付けます。24px未満のターゲットにはdefaults-hit-areaを付けます。

4. タッチ幅でタップする

タッチ操作をエミュレートしてページ内をタップします。ホバー時に表示される行アクション、コピー ボタン、メニューには、別の表示方法が必要です。行にホバーしたときだけ表示される削除ボタンにはviewports-no-hover-only-controlsを付けます。

5. 高さを短くする

スマートフォンを横向きにした状態の812×375でレンダリングします。そのサイズで各ダイアログ、シート、メニューを開きます。コンテンツはオーバーレイ内でスクロールでき、操作項目にはアクセスできる状態を保ちます。スクロールできず、ダイアログのSaveが画面外にある場合はviewports-short-heightsを付けます。

6. テキストを2倍にする

幅1024でルートのフォントサイズを200%に設定し、再度レンダリングします。テキストは折り返され、それに合わせてボックスが拡大し、何も重なりません。200%でラベルがアイコンに重なる場合はviewports-text-zoomを付けます。サイズがpxで指定されているためにレイアウトを拡大できない場合も、同じIDを付けます。

7. 幅ごとに報告する

オーバーレイの番号を入れたスクリーンショットを幅ごとに1枚返し、その後に同じ順序で検出事項を記載します。幅が記載されていない検出事項にはviewports-name-the-widthを付けます。

ペア

すべてのチェックはペアです。壊れている行の隣に、置き換え後の行を示します。

ルール	問題のある例	置き換え
viewports-cross-each-breakpoint	375と1440のみで確認	767と768、1023と1024でも確認
viewports-render-every-width	「mdでグリッドが折りたたまれるので、モバイルは問題ありません」	320、375、768でスクリーンショットを撮る
viewports-no-sideways-scroll	幅320でwidth: 400pxのカード	カードにmax-width: 100%を設定
viewports-no-clipped-text	375でoverflow: hiddenによりラベルが切れる	ラベルを折り返すか、元に戻せる方法を用意して省略する
viewports-no-hover-only-controls	行アクションが:hoverのときだけ表示される	(hover: none)では常に表示する
viewports-short-heights	高さ375pxの画面からダイアログのSaveがはみ出す	max-height: 100dvhを設定し、本文をスクロール可能にする
viewports-text-zoom	200%でボタンの内容が切れるheight: 32px	パディングを指定したmin-height: 2rem
viewports-name-the-width	「ヘッダーが重なっています」	「幅768で、ヘッダーが検索フィールドに重なっています」

報告

重大度。 HIGH は、ページが横スクロールする場合、タッチ操作でホバー時にしか表示されないコントロールがある場合、または高さが短いと到達できないアクションがある場合です。MEDIUM は、テキストが切れている場合、テキストを200%に拡大したときに重なる場合、またはブレークポイントの境界で崩れる場合です。LOW は、幅を明記していない指摘です。

形式。 根本原因ごとに1件、幅を明記します。

1. file:line - [rule-id] at 375, what is wrong (measured values)

ソース行が見つからない場合は、スクリプトの要素を記載します。その後に Rule | Count | Severity の概要を示します。HIGH が1件でも残っている場合は Block、それ以外は Approve とします。レンダリングできなかった幅には Not verified と記載します。