如何創建'跳過內容”鏈接

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

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

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

<a href="https://www.php.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%);
}

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

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

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

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

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

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

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

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

我們的示例網站

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

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

確定問題

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

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

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

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

創建鏈接

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

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

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

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

<main></main>

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

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

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

 .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屬性，它根據我們的跳過鏈接是否獲得焦點來隱藏和顯示它。讓我們通過在transform屬性上快速轉換來使其看起來更好一些。

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

它現在將轉換到視圖中，這使得它更好一些。

您現在（希望）應該擁有我下面的內容：

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

使用多個鏈接是可以的！

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

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

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

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

<div>
  跳至<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">內容</a>或<a href="https://www.php.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。

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

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

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

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

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

跳到結論

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

以下是一些使用此技術或類似技術的知名網站：

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

以上是如何創建'跳過內容”鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章！