ズームとスケーリングを無効にしないでください

ルールID: meta-viewport
ルールセット: axe-core 4.4
ユーザーへの影響: 緊急
ガイドライン: WCAG 2.1 Best Practice, WCAG 2.0 Best Practice

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

コンプライアンスデータと影響

ユーザーへの影響

緊急
軽微
緊急

影響を受ける障害

  • ロービジョン

規格

  • WCAG 2.1 Best Practice
  • WCAG 2.0 Best Practice

WCAG 達成基準 [WCAG 2.1 Best Practice]

  • 1.4.4: 推奨: Resize text

WCAG 達成基準 [WCAG 2.0 Best Practice]

  • 1.4.4: 推奨: Resize text

修正方法

ズーミングを可能にするため、user-scalable="no" パラメーターを <meta name="viewport"> 要素の content 属性から削除し、maximum-scale パラメーターが2より上であることを確認します。

meta viewport 要素は、ブラウザーにページの大きさや拡大縮小を制御する方法を伝えますが、それを使用した結果、ズームする機能は無効化されてしまいます。

注記:

ブラウザーのビューポートフォーカスはプログラムによるフォーカスには影響しませんが、ウィンドウが小さい場合、そのエリアにはページのごく一部のみが含まれ、プログラム可能なフォーカスはビューポートを追従しません。

ズーミングを可能にするため、user-scalable="no" パラメーターを <meta name="viewport"> 要素の content 属性から削除します。

なぜ重要なのか

<meta name="viewport"> 要素についている content 属性の user-scalable="no" パラメーターはページのズーミングを無効にします。maximum-scale パラメーターはユーザーがズームできる量を制限します。これは web ページのコンテンツを正確に見るためにスクリーンの拡大鏡に頼っているロービジョンのユーザーにとって問題です。

部分的に視力を持つ、またはロービジョンのユーザーは通常、web 上のテキストを読みやすくするため、ブラウザー上のフォントを拡大することを選びます。ブラウザーのビューポートフォーカスは、特定の瞬間にブラウザーウィンドウ内に表示されるすべてのものです。ブラウザーを高解像度モニターで最大化させると、ビューポートのフォーカス領域が大きくなり、web ページ全体を含む可能性があります。

ブラウザーウィンドウが小さい場合、ビューポートのフォーカス領域には web ページのごく一部しか含まれません。ブラウザーのビューポートフォーカスは、プログラムによるフォーカスには影響しません。ユーザーは web ページを上下にスクロールできますが、プログラムによるフォーカスはビューポートに追従しません。Web Content Accessibility Guidelines では、開発者にページを 200% まで拡大できるように設計することを求めています。

user-scalable="no" パラメーターが <meta name="viewport"> 要素に存在しないこと、および maximum-scale パラメーターが2より上であることを確認します。

ルールの説明

ロービジョンのユーザーにとって重要なテキストの拡大縮小やズーミングを無効化するため、ドキュメントは user-scalable="no" パラメーターを <meta name="viewport"> 要素に使用してはなりません。

仕組みについて (簡単に言うと)

user-scalable="no" パラメーターが <meta name="viewport"> 要素に存在しないこと、および maximum-scale パラメーターが2より上であることを確認します。

リソース

その他のリソース

その他リソースもあわせてご参照ください。

axe 4.4 ルールの一覧 を参照する

この情報は役に立ちましたか?

フィードバックはすでにいただいております。ありがとうございました。.

回答内容は以下の通りです:

この情報は役に立ちましたか?
フィードバックが送信された日時: