ユーザーは、テキストを最大500%までズームおよび拡大縮小できる必要があります
修正方法
ズーミングを可能にするため、user-scalable="no"
パラメーターを <meta name="viewport">
要素の content
属性から削除し、maximum-scale
パラメーターが5より上であることを確認します。
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% まで拡大できるように設計することを求めていますが、5倍ズームを求めることがベストプラクティスです。
ルールの説明
ロービジョンのユーザーにとって重要なテキストの拡大縮小やズーミングを無効化するため、ドキュメントは user-scalable="no"
パラメーターを <meta name="viewport">
要素に使用してはなりません。
仕組みについて (簡単に言うと)
user-scalable="no"
パラメーターが <meta name="viewport">
要素に存在しないこと、および maximum-scale
パラメーターが500%より上であることを確認します。