meta-viewport-zoom-enabled
viewportのmetaタグでズームを無効にしてはいけません
<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と、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
maximum-scaleが5(500%)なので、WCAG 1.4.4が求める200%を大きく超えるズームが可能です。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
user-scalable=noにより、ピンチズームが完全に無効になっています。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
VIEWPORT_ZOOM_RESTRICTED_OVERRIDDEN
- [Elements]パネルで、ページのhead内にあるすべての<meta name="viewport">を見つけ、どれが最後かを控えてください。
- スマートフォンやタブレットで、または開発者ツールのデバイスモードでタッチをエミュレートしてページを開いてください。
- ピンチ操作で拡大し(またはブラウザーのズームを使い)、テキストを200%まで拡大してみてください。
- ズームがブロックされている場合は、文字サイズの設定など、ページ独自にテキストを大きくする方法があるか確認してください。キーボードで使え、テキストを少なくとも2倍にでき、何も切れたり失われたりしない場合にだけ、それを認めます。
満たす場合:テキストを200%以上にズームできるか、キーボードで使えるページ独自の文字サイズ設定で、コンテンツや機能を失わずに200%以上にできます。
満たさない場合:テストしたブラウザーでズームがブロックされているか200%未満に制限されており、ページにもテキストを200%に拡大する独自の方法がないため、WCAG 1.4.4を満たしません。