更好的塊連接實現方案

設計頁面時，爲了提高用戶點擊體驗，會有擴大元素的可點擊區域的需求——即咱們看見的元素很小，但實際可響應的區域倒是大的。好比，用一個 <a> 標籤包裹一大塊內容，以達到點擊這塊區域的任何部分都會跳轉，這就是咱們所謂的「塊連接」。功能上固然沒問題，但卻沒有考慮屏幕閱讀器使用者的體驗。

《Block Links, Cards, Clickable Regions, Etc.》一文的做者 Adrian Roselli 對此話題作了討論並給出瞭解決方案。簡單地說，就是不要使用 <a> 或 <button> 去包含大量內容，而是使用下面這種方式來達到擴大響應區域的效果。

a::after,
button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
複製代碼

不只能達到效果，並且對屏幕閱讀也是友好的。

若是你對細節感興趣，能夠繼續閱讀下面我翻譯的正文部分~~

連接

使用 <a href> 包裹全部內容實現的塊連接（block link）的作法是可能最不可取的。

例如，下面的代碼：

<article>
  <a href="https://example.com/linkwrap" rel="nofollow">
    <h3>Wrapping Entire Thing</h3>
    <img src="https://www.fillmurray.com/640/360" alt="Bill Murray on the award carpet.">
    <p>
      Gastropub sartorial ... affogato bicycle rights.
    </p>
  </a>
</article>

<style> a:link { text-decoration: none; } </style>
複製代碼

若是這裏的 <a> 標籤，沒有設置 display: block ，就會有問題。

能夠看見，在鼠標劃入的過程當中，並不老是懸停 （以出現下劃線爲標誌）在連接上的。在文本週圍、圖片與文本之間是有點擊死區的，容易讓人根絕是懸停到了不一樣地址的連接。一樣，若是對整段文本都使用下劃線作標識的話，有增長了閱讀難度；若是都沒有下劃線的話，就削減了 點擊暗示。

更壞的是，屏幕閱讀器讀到這裏的時候，會把這裏的整段文本（包括標題、圖片（還不會告訴你這是個圖片，只是讀它的 alt）和文本塊）都讀出來，讀完以後才告訴你一聲「link」（即 <a> 標籤的類型）。

Tabbing through the links in Firefox 72 with NVDA 2019.3.1.

以下所示，是另外兩個類型的連接的結構：

<!-- 第二個例子 -->
<article style="position: relative;">
  <h3><a href="https://example.com/heading">Only on Heading</a></h3>
  <img src="https://www.fillmurray.com/600/380" alt="Bill Murray in a still from Caddyshack.">
  <p>   
		Tumeric prism tattooed ... slow-carb unicorn.
  </p>
</article>

<!-- 第三個例子 -->
<article style="position: relative;">
  <a href="https://example.com/linkwrap" rel="nofollow">
    <h3>Wrapping Entire Thing</h3>
    <img src="https://www.fillmurray.com/640/360" alt="Bill Murray on the award carpet.">
    <p>
      Sriracha actually ... party flannel. 
      <a href="https://example.com/text" rel="nofollow" aria-describedby="A3">Read more…</a>
    </p>
  </a>
</article>

<style> a[href]::after { content: ""; /* 譯註： 這一句其實不須要，元素 pos absolute 後，會自動呈現塊狀元素特性 這裏爲了顯式體現是個 block 元素，就不刪除了 */ display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style>
複製代碼

一個連接包在了 <h3> 裏，另外一個則包在了段落元素 <p> 中。第三個例子我使用了 aria-describedby 將連接描述指向了 <h3>。這兩種形式的連接就是今天咱們要介紹的解決方案——就是 positoin: ablsolute 將連接的可點擊範圍充滿整個卡片空間，固然，這可能不是最好的方案。

說到這裏，就要講開發者中存在的一個誤解——認爲屏幕閱讀器用戶在頁面上瀏覽內容時只使用 Tab 鍵，而忘記了實際上的主要方式—箭頭（或是在觸摸設備上的滑動）。

下面是上述示例，使用箭頭（arrow）瀏覽內容時的效果。

Arrowing through the content in Firefox 72 with NVDA 2019.3.1.

針對第一種連接類型，屏幕閱讀器會把每塊文本都被聲明成連接，這很容易讓用戶迷惑這些是否都指同一個連接。也許只有那些有經驗的用戶才能識別出出來，知道它們指的都是同一個地方。相對來講，後面兩個的塊連接效果就相對好一些。

塊連接的 CSS 實現比較簡單：

a[href]::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
複製代碼

須要注意的是，這種方法實現的塊連接會阻止文本選擇。

Heydon Pickering 在《Inclusive Components 中的卡片組件》一文中，也對這裏的內容做了相似的討論，但沒有給出屏幕閱讀器的例子。

變體

我常常被問到這種方式帶來的兩個挑戰。一個是內容順序（Content order），還有一個是額外控件（additional controls）。

內容順序

我認爲最好可以使用標題來組織內容（其後的內容都是對這個標題的描述），一些開發人員可能不知道如何標記視覺上，圖片位於標題之上的設計。提及來，像在卡片組件中出現的圖片，本質仍是爲卡片的標題和文本環境服務的。所以，爲了突出內容中心，結構上我老是把標題放在組件中的第一位。

那如何實現，圖片視覺上的超前呢。我會使用 Flex 項目的 order 屬性來實現，這也是算是我主張的、使用 CSS 對內容從新排序以實現視覺設計需求的少數用例之一。

.card {
  display: flex;
  flex-direction: column;
}

.card img {
  order: -1;
}
複製代碼

額外控件

若是須要在卡片中添加其餘連接、按鈕或其餘控件，要把它放在卡片底部或頂部（甚至沿着側變），這是一樣能夠經過預留空間來解決。代碼相似於下面這樣：

a[href]::after {
  bottom: 3.75em;
}

/* <p> 標籤裏的 <a> 不須要擴大可點擊區域 */
p a[href]::after {
  content: none;
}
複製代碼

效果以下：

開發工具顯示了塊連接的可點擊區域，在底部留有了一些空白

在圖片下面咱們保留了一些空白，這能夠幫助咱們避免誤點擊/輕擊到上面的連接內容。

按鈕

你在上面學到的大部份內容也適用於 <button> 標籤。儀表板頁面一般會包含相似於卡片的界面組件，並且這些每每會包含一個 <button>。

與 <a> 標籤不一樣的是，你能夠在 <button> 中嵌套標題、列表（無論有所少）等其餘元素，這些結構元素嵌套在<button> 裏後，便再也不具有結構特性。好比，<button> 中 <h3> 再也不具備標題含義了，而是變成了一段普通文本。

如下面代碼爲例：

<button type="button" onclick="alert('You look nice in those shoes.');">
  <h3>Wrapping Entire Thing</h3>
  <p>
  	Hundreds of ... pale blue dot?
  </p>
  <p>
  	<span>Settings</span>
  </p>
</button>
<section style="position: relative;">
  <h3>Only on Settings Text</h3>
	<p>
  	Hundreds of ... pale blue dot?
  </p>
	<button type="button" class="btn" onclick="alert('You look nice in that shirt.');">
  	<span>Settings</span>
  </button>
</section>

<style>
.btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
複製代碼

屏幕閱讀器的閱讀效果以下：

Tabbing through the buttons in Safari with VoiceOver on macOS.

下面是使用箭頭瀏覽 <button> 的效果，與上面同樣。

使用屏幕閱讀的用戶可能對只讀出「Settings」的控件就夠了。即便感受困惑，返回或跳轉到前面的標題以得到所需的上下文的過程也是簡單和快捷的。

上面講到的塊連接樣式在這裏也一樣適用。甚至對按鈕中還包含圖像或其餘的什麼控件的狀況，也一樣適用。

Demo

上面講過的全部示例代碼在下面的 codepen 筆記中都能找到，你能夠直接點擊查看代碼運行效果，也可使用本身模擬輔助設備環境對它進行調試。

codepen.io/aardrian/pe…

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）