塊鏈接：尋找完美的解決方案

克里斯（Chris）最近強調了“塊鏈接”的可訪問性和UX缺陷 - 將整個卡片元素包裝在錨標籤中。本文重新討論了挑戰，探討了問題是否在於模式本身或其實施。我們的目標是創建一個解決這些問題的卡組件。在整個過程中，“卡”是指採用塊鏈路模式的組件。

我們理想的卡組件應符合以下標準：

1. 完全可單擊並鏈接。
2. 容納多個內部鏈接。
3. 維護語義HTML以輔助技術兼容性。
4. 允許文本選擇，例如標準鏈接。
5. 支持右鍵單擊鍵盤快捷鍵。
6. 確保適當的選項卡訂單以獲取可聚焦元素。

這帶來了重大挑戰，因為瀏覽器缺乏標準卡小部件。讓我們檢查幾種方法：

方法1：簡單（但有缺陷）<a></a>裹

最簡單的方法 - 將整個卡片包裝成一個<a></a>標籤 - 也是最不可能的。在實現基本可單擊性和右​​鍵/鍵盤快捷鍵功能時，它在多個方面失敗：

1. 防止卡中的嵌套鍊接。
2. 妥協可及性；屏幕讀取器可能會毫不及格地宣布整個卡的內容。
3. 禁用文本選擇。

這種方法顯然不足。

方法2：僅鏈接必要的元素

這種方法通過僅鏈接需要鏈接的單個元素來優先考慮可訪問性。這個成功解決了：

1. 多個內部鏈接。
2. 語義HTML。
3. 文本選擇。
4. 右鍵單擊/鍵盤快捷鍵。
5. 選項卡訂單。

但是，它缺乏全卡可列擊性的關鍵功能。

方法3：pseudo-Element方法::before

使用A ::before ::after可單擊可單擊的區域。但是，此方法仍然遭受：

1. 嵌套鍊接的限制；偽元素層阻礙了基礎鏈接的點擊。
2. 文本選擇仍然有問題。

需要一個更強大的解決方案。

方法4：JavaScript增強方法2

在方法2的基礎上，我們可以利用JavaScript進行逐步增強。我們將在卡中添加單擊事件偵聽器，並編程觸發主鏈接的點擊事件。為了防止干擾文本選擇，我們將使用window.getSelection().toString()檢查是否在觸發鏈接之前選擇文本是：

 const card = document.queryselector（“。卡”）;
const mainlink = document.queryselector（'。主鏈接'）;

card.AddeventListener（“ click”，handleclick）;

功能handleclick（event）{
  const isTextSelected = window.getSelection（）。 toString（）;
  如果（！isTextSelected）{
    mainlink.click（）;
  }
}

//防止卡中可點擊元素的事件傳播
const clickableElements = array.from（card.queryselectorall（“ a”））;
clickablelements.foreach（（Ele）=>
  ele.AddeventListener（“ click”，（e）=> e.stoppropagation（））
）；

這種方法成功地滿足了我們的所有要求。但是，內部鏈接和按鈕上的潛在雙事件觸發可能需要進一步完善。

該解決方案提供了功能可訪問的可單擊卡組件。其他考慮因素，例如使用“閱讀更多”鏈接或圖像的處理卡，需要進行其他探索。

用於進一步閱讀：

• Heydon Pickering的卡片
• Adrian Roselli的塊鏈接，卡片，可點擊區域，行等。
• 克里斯·科伊爾
• Dave Rupert的Card UIS的陷阱

以上是塊鏈接：尋找完美的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！