PR

モバイルユーザビリティーエラー クリック可能な要素同士が近すぎます。他のエラー解決方法

モバイルユーザビリティーエラー WordPress
記事内に広告が含まれています。

サチコ先生から、メールBOXに怖いお知らせが・・・。

モバイルユーザビリティーの問題が3件検出されました。

  1. テキストが小さすぎて読めません。
  2. コンテンツの幅が、画面の幅を超えています。
  3. クリック可能な要素同士が近すぎます。

コンソールエラー 

 

一つずつ解決していきましょう。

スポンサーリンク

テキストが小さすぎて読めません。

メールにある、「モバイルユーザビリティの問題を解決する」というリンクをクリックすると、

モバイルユーザビリティーエラー

2ページでテキストが小さすぎて読めません。というエラーが出ていました。

 

どのようなエラーかと言うと、該当する記事をスマホでみたときに、文字が小さすぎて画面を拡大しないと読むことができないよ。

実際にスマホで該当ページを見てみると、文字の大きさが小さいということはありませんでした。

また、Googleのモバイルフレンドリーテストをしてみると、

モバイルフレンドリーテスト

なんと、OKでページだったんです。

 

修正箇所がないので、そのまま修正を検証するボタンをクリックしました。

すると、検証を開始しましたというメールが届きました。

 

コンテンツの幅が、画面の幅を超えています。

コンテンツの幅のエラーも、テキストが小さすぎて読めませんというエラーと同じページででていました。

ですから、Googleのモバイルフレンドリーテストは、もちろん合格しています。

コンテンツ幅のエラーを探すためにぐぐってみると、CSSが原因と書かれているサイトがいくつかありました。

そこで、CSSを縮小すればいいんじゃない?と勝手に思いました。

 

エラーが出たサイトは、cocoonを使っていますので、早速CSSを縮小してみましょう。

ダッシュボード→cocoon設定→高速化

cocoon css

  • プラウザキャッシュの有効化
  • THMLを縮小化する。
  • CSSを縮小化する。

にチェックを入れましょう。

 

その後、修正を検証をクリックしました。

 

クリック可能な要素同士が近すぎます。

エラーが出ているサイトを、目視したのですが、クリックできる要素が近いという箇所も見つかりませんでした。

エラーが出ている2ページともに、モバイルフレンドリーテストで合格しているので、なんの修正もしないままに、修正を検証をクリックしました。

モバイルユーザビリティの問題が解決されました。

数日後、「モバイルユーザビリティの問題が解決されました。」というメールが届きました。

問題となっていたエラーは3点とも解消されました。

テキストが小さすぎて読めません

 

クリック可能な要素同士が近すぎます。

コンテンツの幅が画面の幅を超えています。

 

何もしないで、修正を検証するとモバイルユーザビリティの問題が解決されることもあるんですね。

もし、このようなエラーが出たときには参考にしてくださいね。

 

error: Content is protected !!