タップターゲットのサイズが適切でない
— 更新済み
Appears in: SEO の監査
タップターゲットは、タッチデバイスのユーザーが操作できる Web ページの領域です。ボタン、リンク、およびフォーム要素にはすべてタップターゲットがあります。
多くの検索エンジンは、モバイルフレンドリー度に基づいてページをランク付けします。タップターゲットが十分に大きく、互いに十分に離れていることを確認すれば、ページはよりモバイルフレンドリーでアクセスしやすくなります。
Lighthouse のタップターゲット監査に失敗する原因 #
Lighthouse は、小さすぎるか互いに近すぎるタップターゲットのあるページにフラグを立てます。
48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。監査に失敗すると、Lighthouse は結果を 3 列構成のテーブルに表示します。
タップターゲットを修正するには #
ステップ 1: タップターゲットのサイズが小さすぎる場合は、大きくします。48 px x 48 px のタップターゲットは絶対に監査に失敗しません。大きく表示されてはいけないアイコンなどの要素の場合は、padding
プロパティを増やしてみてください。padding
を使用すると、要素の外観を変更せずにタップターゲットを大きくできる。
ステップ 2: margin
などのプロパティを使用して、互いに近すぎるタップターゲット間の間隔を広げます。タップターゲット間には少なくとも 8 px が必要です。
リソース #
- アクセス可能なタップターゲット: すべてのユーザーがアクセスできるタップターゲットを得るための方法に関する詳細。
- 「タップターゲットのサイズが適切でない」監査のソースコード****
最終更新: — 記事を改善する