跳過鏈接是幫助用戶在頁面間移動的小型內部導航鏈接。您可能從未真正見過它，因為它們通常隱藏起來，用作輔助功能增強功能，允許鍵盤用戶和屏幕閱讀器從頁面頂部跳轉到內容，而無需首先遍歷頁面上的其他元素。

事實上，如果您打開 DevTools，您可以在 CSS-Tricks 上找到一個。

在我看來，實現(xiàn)跳過鏈接的最佳方法是隱藏它，然后在它獲得焦點時將其顯示出來。因此，假設我們在 HTML 中有一個鏈接：

<a href="http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  跳至內容
</a>

……我們可以賦予它絕對位置并將其從屏幕上移開：

.skip-to-content-link {
  left: 50%;
  position: absolute;
  transform: translateY(-100%);
}

然后，當它獲得焦點時，我們可以將其重新顯示，并在過程中對其進行一些樣式設置：

.skip-to-content-link {
  background: #e77e23;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}

這將隱藏我們的鏈接，直到它獲得焦點，然后在它獲得焦點時將其顯示出來。

現(xiàn)在，讓我詳細說明一下，從邁爾斯·戴維斯的這句名言開始：

時間不是主要因素，它是唯一因素。

當我坐在雨中的愛爾蘭寫這篇文章時，我想到了許多用戶在使用我習以為常的網(wǎng)絡時面臨的挑戰(zhàn)。我們在創(chuàng)建出色的用戶體驗方面投入了大量精力，卻沒有考慮到所有用戶以及如何滿足他們的需求。誠然，在我完成 Marcy Sutton 在 Frontend Masters 上的課程之前，我從未聽說過跳過鏈接。自從了解到使用跳過鏈接的強大功能和簡單性后，我決定將其作為我的使命，以提高人們的認識——還有什么平臺比 CSS-Tricks 更好呢！

解決方案是對問題的答案，那么幫助鍵盤用戶和屏幕閱讀器快速找到頁面內容的解決方案是什么呢？簡而言之，解決方案是時間。讓用戶能夠導航到他們最感興趣的網(wǎng)站部分，使他們能夠節(jié)省寶貴的時間。

以天空新聞網(wǎng)站為例。它提供了一個“跳至內容”按鈕，允許用戶跳過所有導航項目并直接跳轉到主要內容。

您可以使用鍵盤導航到頁面頂部來查看此按鈕。這與上面顯示的實現(xiàn)類似。該鏈接始終位于文檔中，但僅在其獲得焦點時才可見。

這就是我們將在本文中一起創(chuàng)建的跳過鏈接類型。

我們的示例網(wǎng)站

我構建了一個示例網(wǎng)站，我們將用它來演示跳過鏈接。

該網(wǎng)站有許多導航鏈接，但為了節(jié)省時間，只有兩個頁面：“主頁”和“博客頁面”。這足以讓我們了解事情是如何運作的。

確定問題

以下是我們正在使用的導航：

總共有八個導航項目，鍵盤用戶和屏幕閱讀器必須先遍歷這些項目才能到達導航下方的主要內容。

這就是問題所在。導航對于用戶來說可能無關緊要。也許用戶獲得了指向文章的直接鏈接，他們只想訪問內容。

這是一個使用跳過鏈接的完美用例。

創(chuàng)建鏈接

創(chuàng)建“跳至內容”鏈接有幾種方法。我喜歡做的是類似于天空新聞的示例，即隱藏鏈接直到它獲得焦點。這意味著我們可以將鏈接放在頁面頂部或附近，例如在 <header></header> 元素內。

<a href="http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至內容</a>

此鏈接具有 .skip-link 類，因此我們可以對其進行樣式設置。href 屬性指向 http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3，這是我們將添加到頁面下方出現(xiàn)的 <main></main> 元素的 ID。這就是鏈接單擊時將跳轉到的位置。

<a href="http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至內容</a>

<main></main>

如果我們只是將鏈接放入標題而沒有樣式，這就是我們擁有的內容。

這看起來不太好，但功能是存在的。嘗試使用鍵盤導航到鏈接，并在它獲得焦點時按 Enter 鍵。

現(xiàn)在是時候讓它看起來漂亮了。我們必須首先修復定位，并且只有在我們的跳過鏈接獲得焦點時才顯示它。

.skip-link {
  background: #319795;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0%);
}

這里的魔力在于 transform 屬性，它根據(jù)我們的跳過鏈接是否獲得焦點來隱藏和顯示它。讓我們通過在 transform 屬性上快速轉換來使其看起來更好一些。

.skip-link {
  /* 與之前相同 */
  transition: transform 0.3s;
}

它現(xiàn)在將轉換到視圖中，這使得它更好一些。

您現(xiàn)在（希望）應該擁有我下面的內容：

如您所見，跳過鏈接繞過導航并直接跳轉到單擊時的 <main></main> 元素。

使用多個鏈接是可以的！

目前，該鏈接只服務于一個目的，那就是跳過到我們網(wǎng)站的內容。但我們不必止步于此。

我們可以更進一步，創(chuàng)建一個具有更多選項的跳過鏈接，例如跳轉到網(wǎng)站頁腳的方法。正如您可能想象的那樣，這與我們已經(jīng)完成的工作非常相似。

讓我們通過使用多個跳過鏈接來使示例網(wǎng)站的博客頁面更易于使用。博客通常使用 AJAX，當?shù)竭_頁面底部時會加載更多帖子。這使得很難到達網(wǎng)站的頁腳。這就是我們想要解決的問題。

因此，讓我們添加第二個鏈接，它繞過所有自動加載業(yè)務，并將用戶直接跳轉到頁面上的 http://www.miracleart.cn/link/8248f16fa738b0bfe6013edf69d873bf 元素。

<div>
  跳至 <a href="http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">內容</a> 或 <a href="http://www.miracleart.cn/link/8248f16fa738b0bfe6013edf69d873bf">頁腳</a>
</div>

我們還需要稍微修改一下我們的 CSS 并使用 :focus-within 偽選擇器。

.skip-link {
  transform: translateY(-100%);
}

.skip-link:focus-within {
  transform: translateY(0%);
}

這意味著如果我們的 .skip-link 元素中的任何內容都獲得焦點，那么我們將顯示它。遺憾的是，Internet Explorer 和 Opera Mini 都不支持 focus-within，但它的覆蓋范圍非常好，并且可以使用 polyfill。

此瀏覽器支持數(shù)據(jù)來自 Caniuse，其中包含更多詳細信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

最后我們需要做的是確保我們的頁腳元素上有一個 ID，以便鏈接有東西可以跳轉到。

<footer id="footer"></footer>

這就是這給我們帶來的結果：

如果我們想更進一步（我鼓勵這樣做），我們可以對每個鏈接進行不同的樣式設置，以便用戶可以區(qū)分兩者。此示例中的兩個鏈接都是純白色，這對于執(zhí)行單一操作的單個按鈕非常有效，但如果它們以不同的方式呈現(xiàn)，則更清楚地表明我們正在處理兩個鏈接。

跳到結論

您是否在您的網(wǎng)站上使用跳過鏈接？或者，如果沒有，這是否說服您使用一個？我希望很清楚的是，在網(wǎng)站的可訪問性方面，跳過鏈接是一個極好的附加值。雖然它不是解決所有可訪問性問題的靈丹妙藥，但它確實解決了一些用例，從而創(chuàng)造了更完善的用戶體驗。

以下是一些使用此技術或類似技術的知名網(wǎng)站：

• 亞馬遜
• 大通銀行
• 谷歌（不是跳過鏈接，而是提供可訪問性反饋的鏈接）
• 塔吉特
• 紐約時報
• Zillow

以上是如何創(chuàng)建'跳過內容”鏈接的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！