meta-viewport-zoom-enabled

viewportのmetaタグでズームを無効にしてはいけません

automaticWCAG 1.4.4 (AA)確度:high重大度:seriousperceivable

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

適用範囲:content属性でmaximum-scaleまたはuser-scalableを設定している<meta name="viewport">要素に適用されます。どちらも設定していないcontentでは、ズームは制限されません。

期待される結果:有効なviewportのmetaタグ、つまりcontentを持つ最後のものにおいて(それより前のものは置き換えられ、ズームを制限している場合は確認を求めます)、user-scalableが、指定なし、yes、device-width、device-height、または-1から1の範囲外の数値のいずれかであり、かつmaximum-scaleが、指定なし、device-width、device-height、負の値、または2以上のいずれかです。それ以外の値では、ユーザーがテキストを200%までズームできなくなります。WCAG 1.4.4(テキストのサイズ変更)は、これを可能にすることを求めています。

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

  • reasons:ズームを制限している設定で、1項目に1つ、content属性内の記述どおりです(user-scalable=no、maximum-scale=1)。

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

例

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

maximum-scaleが5(500%)なので、WCAG 1.4.4が求める200%を大きく超えるズームが可能です。

fail
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

user-scalable=noにより、ピンチズームが完全に無効になっています。

確認方法

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

VIEWPORT_ZOOM_RESTRICTED_OVERRIDDEN

  1. [Elements]パネルで、ページのhead内にあるすべての<meta name="viewport">を見つけ、どれが最後かを控えてください。
  2. スマートフォンやタブレットで、または開発者ツールのデバイスモードでタッチをエミュレートしてページを開いてください。
  3. ピンチ操作で拡大し(またはブラウザーのズームを使い)、テキストを200%まで拡大してみてください。
  4. ズームがブロックされている場合は、文字サイズの設定など、ページ独自にテキストを大きくする方法があるか確認してください。キーボードで使え、テキストを少なくとも2倍にでき、何も切れたり失われたりしない場合にだけ、それを認めます。

満たす場合:テキストを200%以上にズームできるか、キーボードで使えるページ独自の文字サイズ設定で、コンテンツや機能を失わずに200%以上にできます。

満たさない場合:テストしたブラウザーでズームがブロックされているか200%未満に制限されており、ページにもテキストを200%に拡大する独自の方法がないため、WCAG 1.4.4を満たしません。

ソースコードを見る