概要
このチェックは、ページのビューポートメタタグにズームを無効にする設定が含まれているかどうかを特に確認します — 最も一般的なのは、モバイルレスポンシブ性のために本来必要な同じタグに追加されたuser-scalable=noやmaximum-scale=1です。これらの追加は、以前は誤ったダブルタップが予期せずズームインするのを防ぐために使われることがありましたが、深刻で意図しない副作用があります — 訪問者が意図的にピンチズームしたい場合でも、ズームを完全にブロックしてしまうのです。
これは、単にビューポートタグがまったくない場合(これは別の、他のビューポートガイドで扱っている純粋に視覚的な問題を引き起こします)とは異なります — これは、存在はしているがズームを積極的に防ぐように設定されているビューポートタグを特に扱います。
重要な理由
多くの弱視の訪問者は、あるページで自分の視力に合ったサイズにズームレベルを調整しながら、ウェブコンテンツを快適に読むための通常の方法としてピンチズームに頼っています。その能力をブロックすることは単に不便を生み出すだけではありません — 本当にそれを必要とする人にとっては、ページの残りの部分がどれほどよくデザインされていても関係なく、コンテンツを完全に読めなくしてしまうことがあります。
これは、ズームを無効にしてはならないと要求するWCAG(標準的なウェブアクセシビリティガイドライン)で明確に取り上げられています。これは、弱視の人々に直接的にどれほど影響するかのためです — ブラウザ自体がすでにデフォルトで提供している機能を奪うため、より深刻で避けられるアクセシビリティの失敗の1つと見なされています。
修正方法
- ページのビューポートメタタグに
user-scalable=noや1以下のmaximum-scale値がないか確認しましょう。 - 存在する場合はその両方の特定の部分を削除し、タグの残りの部分(
width=device-width, initial-scale=1)はそのままにしましょう。 - 元の目的が特定のインタラクティブ要素での誤ったダブルタップズームを防ぐことだった場合、ページ全体のズームを無効にするのではなく、その要素により的を絞ったスタイリングでそれに対処しましょう。
- ウェブサイトビルダーを使用している場合、これがプラットフォームによってデフォルトで設定されることはめったにありません — ページの
<head>セクションに追加したカスタムコードスニペットを確認しましょう。 - その後、実際の電話でページをピンチズームしてみて、今は正常に反応することを確認してテストしましょう。