你或許須要擴充可點擊區域的範圍⛅

您是否曾經嘗試單擊或點擊某個元素（例如，按鈕，連接），而且意識到只有單擊該元素的特定區域，它纔會響應？

發生這種狀況是由於可點擊區域未應用於整個元素。爲了更加清楚，請參見下圖。我舉例說明了可點擊區域應該和不該該如何。

對於本文，我將介紹不少我注意到的示例，並展現如何正確解決它們。

用戶體驗注意事項

WCAG準則

根據WCAG 2.1，觸摸或鼠標的最小目標尺寸應爲 44×44 像素。大小不是固定的，可能會根據使用狀況而改變。可是，44×44 像素是一個很好的起點。

菲茨定律

UX設計中要遵循的重要定律。簡而言之，觸摸或點擊目標越大，越接近，則須要用戶與其進行交互的時間越短。

在下圖中，我爲主按鈕模擬了兩種不一樣的狀況。在左側，按鈕更小，更遠，這須要用戶花費更多時間與之交互。在右側，按鈕的大小更大且更接近其同級輸入元素，這將使其更容易，更快地進行交互。

讓咱們來看一些實際的例子，並牢記 WCAG 2.5.5 目標大小和 Fitts 定律。

按鈕

button 在須要時使用實際值很是重要。下面的示例來自我使用的在線銀行系統：

<div class="navig next" onclick="validateLogin()">Next</div>
複製代碼

這是上述按鈕的 HTML 的 GIF 圖片。我將鼠標懸停在按鈕上，而且光標仍然是指針，這很好。可是，我也能夠選擇文本，而且在懸停時還有一個文本光標！若是使用正確的元素，則不會發生這種狀況。

使用 HTML的button 元素時，您將免費得到如下內容：

• 可經過鼠標，鍵盤或觸摸訪問
• 能夠經過鍵盤選擇（表單元素均可以）
• Javascript 事件（聚焦，失去焦點）、CSS 表單僞類

一旦使用了正確的元素，出於兩個緣由，您須要添加足夠的填充：

• 讓按鈕看起來能夠點擊（cursor: pointer）！
• 使其變大，這樣很容易被注意到（菲茨定律）。

連接

我過去曾犯過這個錯誤。當有導航菜單時，應爲 a 元素而不是 li 元素提供填充。

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

.nav-item {
  padding: 12px 16px;
}
複製代碼

根據上述 HTML 和 CSS，可點擊區域將僅爲文本。檢查下圖：

正確的方法是在連接自己上添加填充。請注意，頂部和底部填充默認爲行內元素，所以默認狀況下不起做用。不管是哪一種狀況，它均可以是 block 或 inline-element 或 flex。

.nav-item a {
  display: block;
  padding: 12px 16px;
}
複製代碼

結果，整個連接如今是可單擊/可點擊的。這是顯示差別的圖：

漢堡菜單

仍是烤肉串？隨便你怎麼說 重要的是增長它們的可點擊區域，由於它們大多數將用在觸摸設備上。

假設可點擊區域以下：

這不是很好，而且將很難使鼠標或手指指向屏幕上如此小的目標。在下圖中，它更大而且更易於交互。

如下是效果演示:

複選框和單選按鈕

當存在複選框或單選按鈕元素時，我但願能夠單擊它或關聯的標籤來激活/禁用它。

在下圖中，可單擊區域僅與複選框或單選元素綁定。換句話說，您不能單擊標籤來激活/禁用它。

從用戶體驗的角度來看，這是沒法訪問的而且是很差的。在 HTML 中，您可使用 for 屬性將標籤與輸入綁定。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
複製代碼

或者您能夠將輸入內容放置在標籤內：

<label for="option1">
  Option 1
  <input type="checkbox" id="option1">
</label>
複製代碼

而後，您將須要在 label 元素上添加填充，以使可點擊區域變大。這樣，問題得以解決，整個複選框或單選按鈕都是可單擊的，以下圖所示：

側邊欄

對於帶有類別的頁面，有時我會注意到列表連接沒有擴展到其父級的整個寬度。也就是說，可點擊區域僅在文本上。

下圖顯示：

解決方法是：

從 li 元素上刪除填充，而是將其移動到 a 元素上（在連接點中進行了討論）。 經過添加使連接採用其父級的完整寬度 display: block。

.nav-item a {
  /*Other styles*/
  padding: 12px 16px;
  display: block;
}
複製代碼

很好奇，看看上面添加了少許 CSS 後的外觀如何？

現實生活中的例子

在最近的 Twitter 更新中，導航設計在可點擊區域大小方面存在問題。最初，它僅與文本相關，以下面的屏幕截圖所示，但他們在收到反饋後將其修復。

箭頭

在某些狀況下，須要在節標題的遠端添加「查看更多」按鈕或箭頭。在下面的示例中，我將箭頭放置在假圓中，以即可以正確地使箭頭居中。

一般，箭頭的間距能夠在 CSS 中使用填充或寬度和高度來完成。不管哪一種狀況，您均可以使用。

使用僞元素增長可點擊區域

僅經過更改元素的寬度和高度或使用填充，並不必定老是能夠增大可點擊區域。好吧，僞元素能夠解救！

這個怎麼運做？

這個想法是，僞元素屬於其父元素，所以當咱們建立具備特定寬度和高度的僞元素時，它將充當其父元素的單擊/觸摸/懸停區域。

在下圖中，我向 :after 菜單按鈕添加了一個僞元素。這是使用的 CSS：

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}
複製代碼

請注意，55px 出於說明目的，我有意將正方形放在其父級的左側。當該正方形位於其父對象的中心時，它將增長觸摸目標。達成目標！！

如下是效果演示:

本文已結束，感謝您看到最後。

原文地址：ishadeed.com/article/cli…

最後

若是你以爲這篇文章不錯，請別忘記點個贊跟關注哦~😊

交流

微信公衆號「前端宇宙情報局」，將不定時更新最新、實用的前端技巧/技術性文章，對了偶爾還會有互聯網中的趣事趣聞🍻

關注公衆號，回覆"1"獲取羣聊二維碼，一塊兒學習、一塊兒交流、一塊兒摸魚🌊