タップターゲットのサイズが適切でない

タップターゲットは、タッチデバイスのユーザーが操作できる Web ページの領域です。ボタン、リンク、およびフォーム要素にはすべてタップターゲットがあります。

多くの検索エンジンは、モバイルフレンドリー度に基づいてページをランク付けします。タップターゲットが十分に大きく、互いに十分に離れていることを確認すれば、ページはよりモバイルフレンドリーでアクセスしやすくなります。

Lighthouse のタップターゲット監査に失敗する原因 #

Lighthouse は、小さすぎるか互いに近すぎるタップターゲットのあるページにフラグを立てます。

48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。監査に失敗すると、Lighthouse は結果を 3 列構成のテーブルに表示します。

タップターゲットを修正するには #

ステップ 1: タップターゲットのサイズが小さすぎる場合は、大きくします。48 px x 48 px のタップターゲットは絶対に監査に失敗しません。大きく表示されてはいけないアイコンなどの要素の場合は、padding プロパティを増やしてみてください。

ステップ 2: margin などのプロパティを使用して、互いに近すぎるタップターゲット間の間隔を広げます。タップターゲット間には少なくとも 8 px が必要です。

リソース #

• アクセス可能なタップターゲット: すべてのユーザーがアクセスできるタップターゲットを得るための方法に関する詳細。
• 「タップターゲットのサイズが適切でない」監査のソースコード****