區塊鏈接是一種痛苦（也許只是一個壞主意）

正如我們的綜合指南所解釋的那樣，儘管您可以將任何HTML細分包裝在<a href=""></a>標籤（讓我們稱其為“塊鏈接”），將整個內容“卡”鏈接起來以創建一個大的可點擊區域並不理想。

<a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e"> 
  </a>
    <h2 id="卡片">卡片</h2>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="區塊鏈接是一種痛苦（也許只是一個壞主意）"><p>內容</p>
  

阿德里安·羅塞利（Adrian Roselli）強調了一個重大的可訪問性問題：將整個塊包裹在鏈接中，導致屏幕讀取器將整個內容宣佈為一個單一的，冗長的鏈接，從而極大地影響了可用性。

因此，避免這種方法。一個更好的選擇是僅鏈接標頭：

<div>
  <h2 id="a-href-https-www-php-cn-link-bc-ceec-e-cd-a-a-b-e-文章-a"><a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e">文章</a></h2>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="區塊鏈接是一種痛苦（也許只是一個壞主意）"><p>內容</p>
</div>

使用CSS擴展可點擊區域以包含整個卡：

 。卡片 {
  位置：相對；
}
.Card H2 a :: after {
  內容： ””;
  位置：絕對；
  頂部：0;
  左：0;
  寬度：100％；
  身高：100％；
}

這解決了可訪問性問題，但介紹了另一個：文本選擇變得笨拙。簡單的點擊啟動鏈接，防止卡中的自然文本選擇。雖然並非完全阻止選擇，但它的用戶友好率要少得多。

可以想像在觸發鏈接之前檢測文本選擇的JavaScript解決方案，但感覺就像是一個過於復雜且潛在不可靠的解決方法。

有關進一步的上下文，請參閱Heydon關於“冗餘點擊事件”的有見地的討論。

總之，塊鏈接提出了巨大的挑戰。雖然一個完美的解決方案仍然難以捉摸，但在大多數情況下，缺點卻大於收益。我們鼓勵採用替代方法來實現大型可單擊區域。

以上是區塊鏈接是一種痛苦（也許只是一個壞主意）的詳細內容。更多資訊請關注PHP中文網其他相關文章！