meta-viewport-large

viewportのmetaタグでは、500%までのズームを許可することを推奨します

manual確度:medium重大度:minorperceivable

<meta name="viewport">が、user-scalable=noや5(500%)未満のmaximum-scaleを設定していないことを確認します。

適用範囲:空でないcontent属性を持つ<meta name="viewport">要素に適用されます。

期待される結果:content属性でuser-scalableによってズームを妨げておらず、maximum-scaleを5(500%)未満に設定していません。値はブラウザーと同じ方法で、meta-viewport-zoom-enabledと同じように読み取ります。これはmeta-viewport-zoom-enabled(AAの最低基準である200%を、WCAGの規定に基づく厳密なfailとして適用するルール)に対応する、より厳格なルールです。WCAGの達成基準に基づくものではなく、それを上回る500%という目標に向けたベストプラクティスとしての参考情報です。

検出結果が報告する内容:

  • reasons:content属性内のズームを制限している設定のそれぞれで、属性内の記述を小文字にしたものです(例:user-scalable=no、maximum-scale=2(5未満))。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

maximum-scale=5(500%)は、このルールが目標とするベストプラクティスの上限をすでに満たしています。

can't tell
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

user-scalable=noにより、ページの読み込み時の倍率を超えるズームができず、ベストプラクティスの目標である500%に届きません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

VIEWPORT_ZOOM_BELOW_500

  1. ページのソースでviewportのmetaタグのcontentを読んでください。レポートには、user-scalable=noやmaximum-scale=2など、ズームを制限する設定が示されています。
  2. スマートフォンまたはブラウザーのデバイスエミュレーションでページを開き、ピンチ操作(またはズームのジェスチャー)で可能な限り拡大してください。
  3. 500%に達するか、またテキストが引き続き読めるかを控えてください。

満たす場合:user-scalable=noも5未満のmaximum-scaleもなく、ページを500%まで拡大できます。

満たさない場合:ズームが妨げられるか500%未満で止まるため、WCAG 1.4.4を超えるベストプラクティスの目標を満たしていません。

ソースコードを見る