輕觸目標是指使用者在觸控裝置可以互動的網頁區域。按鈕、連結和表單元素都有輕觸目標。
許多搜尋引擎會根據網頁適合行動裝置瀏覽的方式,決定網頁排名。請確保輕觸目標夠大,彼此相距得足夠,讓網頁更適合行動裝置且易於瀏覽。
Lighthouse 輕觸目標稽核失敗
Lighthouse 標記的輕觸目標頁面需同時符合以下兩項條件:
- 目標小於 48 x 48 像素。
- 至少 25% 的目標區域會在目標中心的 48 像素範圍內與其他目標重疊。
如果稽核失敗,Lighthouse 會在資料表中列出結果,並包含三個資料欄:
輕觸目標 | 觸控目標大小不正確。 |
大小 | 目標的定界矩形大小 (以像素為單位)。 |
重疊目標 | 其他的點按目標 (如果有的話) 距離太近。 |
如何修正輕觸目標
選項 1:增加太小的輕觸目標大小。即使輕觸目標為 48 x 48 像素,則無法執行稽核作業。如有元素不應「看起來」變大 (例如圖示),請嘗試增加 padding
屬性:
選項 2:使用 margin
等屬性,增加距離太近輕觸目標之間的間距。點按目標之間的 8 px 是不錯的起點,但間距不一定能通過稽核,尤其是對於範圍太小的目標。
資源
- 無障礙輕觸目標:進一步瞭解如何確保所有使用者都能存取輕觸目標。
- 「輕觸目標未適當大小」稽核的原始碼