跳過鏈接是幫助用戶在頁(yè)面間移動(dòng)的小型內(nèi)部導(dǎo)航鏈接。您可能從未真正見過它，因?yàn)樗鼈兺ǔｋ[藏起來，用作輔助功能增強(qiáng)功能，允許鍵盤用戶和屏幕閱讀器從頁(yè)面頂部跳轉(zhuǎn)到內(nèi)容，而無(wú)需首先遍歷頁(yè)面上的其他元素。

事實(shí)上，如果您打開DevTools，您可以在CSS-Tricks 上找到一個(gè)。

在我看來，實(shí)現(xiàn)跳過鏈接的最佳方法是隱藏它，然後在它獲得焦點(diǎn)時(shí)將其顯示出來。因此，假設(shè)我們?cè)贖TML 中有一個(gè)鏈接：

<a href="http://miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  跳至內(nèi)容</a>

……我們可以賦予它絕對(duì)位置並將其從屏幕上移開：

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

然後，當(dāng)它獲得焦點(diǎn)時(shí)，我們可以將其重新顯示，並在過程中對(duì)其進(jìn)行一些樣式設(shè)置：

 .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%);
}

這將隱藏我們的鏈接，直到它獲得焦點(diǎn)，然後在它獲得焦點(diǎn)時(shí)將其顯示出來。

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

時(shí)間不是主要因素，它是唯一因素。

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

解決方案是對(duì)問題的答案，那麼幫助鍵盤用戶和屏幕閱讀器快速找到頁(yè)面內(nèi)容的解決方案是什麼呢？簡(jiǎn)而言之，解決方案是時(shí)間。讓用戶能夠?qū)Ш降剿麄冏罡信d趣的網(wǎng)站部分，使他們能夠節(jié)省寶貴的時(shí)間。

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

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

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

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

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

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

確定問題

以下是我們正在使用的導(dǎo)航：

總共有八個(gè)導(dǎo)航項(xiàng)目，鍵盤用戶和屏幕閱讀器必須先遍歷這些項(xiàng)目才能到達(dá)導(dǎo)航下方的主要內(nèi)容。

這就是問題所在。導(dǎo)航對(duì)於用戶來說可能無(wú)關(guān)緊要。也許用戶獲得了指向文章的直接鏈接，他們只想訪問內(nèi)容。

這是一個(gè)使用跳過鏈接的完美用例。

創(chuàng)建鏈接

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

<a href="http://miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至內(nèi)容</a>

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

<a href="http://miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳至內(nèi)容</a>

<main></main>

如果我們只是將鏈接放入標(biāo)題而沒有樣式，這就是我們擁有的內(nèi)容。

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

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

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

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

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

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

如您所見，跳過鏈接繞過導(dǎo)航並直接跳轉(zhuǎn)到單擊時(shí)的<main></main>元素。

使用多個(gè)鏈接是可以的！

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

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

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

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

<div>
  跳至<a href="http://miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">內(nèi)容</a>或<a href="http://miracleart.cn/link/8248f16fa738b0bfe6013edf69d873bf">頁(yè)腳</a>
</div>

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

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

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

這意味著如果我們的.skip-link元素中的任何內(nèi)容都獲得焦點(diǎn)，那麼我們將顯示它。遺憾的是，Internet Explorer 和Opera Mini 都不支持focus-within ，但它的覆蓋範(fàn)圍非常好，並且可以使用polyfill。

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

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

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

這就是這給我們帶來的結(jié)果：

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

跳到結(jié)論

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

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

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

以上是如何創(chuàng)建'跳過內(nèi)容”鏈接的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！