許多電腦用戶使用鼠標瀏覽網頁，但也有不少人依賴鍵盤操作。理論上，使用鍵盤瀏覽網頁不成問題——按TAB鍵在可聚焦元素間移動，再按ENTER鍵激活，簡單易行！然而，許多（如果不是大多數）網站頂部都有一個鏈接菜單，有時需要多次按鍵才能到達目標內容。例如，瑞士最大的新聞網站之一20min的首頁，要閱讀頭條新聞，可能需要近40次按鍵——這可不是最佳用戶體驗。
因此，為了讓鍵盤用戶真正使用您的網站，而不是感到厭煩而離開，您需要在幕後做一些工作，使直接跳到主要內容更快、更容易。您可以找到各種各樣的技巧散佈在網絡上（包括在CSS-Tricks），但大多數都忽略了一些技巧，許多推薦使用過時或已棄用的代碼。因此，在本文中，我將深入探討跳過內容，並以2021年友好的方式涵蓋所有內容。
儘管人們使用各種類型的鍵盤或等效開關設備進行導航，但從編碼的角度來看，我們只需要考慮兩組用戶：
我們的跳過內容技術需要同時滿足這兩組用戶的需求，而不會妨礙鼠標用戶。我們將使用兩種互補的技術來獲得最佳結果：地標和跳過鏈接。
我創建了一個名為Style Magic的示例網站來說明我們將要介紹的技術。我們將從對鼠標用戶來說運行良好的狀態開始，但對於使用鍵盤的用戶來說卻有點麻煩。您可以在CodePen上找到基本網站以及每種技術的版本，並且由於在CodePen上測試鍵盤導航有點棘手，您也可以在這裡找到獨立版本。
嘗試使用TAB鍵導航此示例。 （在獨立頁面上更容易； TAB鍵在鏈接之間移動， SHIFT TAB鍵向後移動。）您會發現它還不錯，但這僅僅是因為菜單項不多。
如果您有時間並且使用的是Windows系統，我還建議您下載NVDA屏幕閱讀器的免費副本，並使用它嘗試所有示例，並參考WebAIM的概述以了解使用方法。大多數Mac用戶已經可以使用VoiceOver屏幕閱讀器，WebAIM也有一個關於如何使用它的很好的介紹。
屏幕閱讀軟件可以做的一件事是顯示他們在網頁上找到的地標列表。地標代表頁面上的重要區域，用戶可以調出該列表，然後直接跳轉到其中一個地標。
如果您使用的是帶有完整鍵盤的NVDA，則按INS F7調出“元素列表”，然後按ALT d顯示地標。 （您可以使用Web項目轉子在VoiceOver上找到類似的列表。）但是，如果您在示例站點上這樣做，則只會看到一個無用的空列表。
讓我們先解決這個問題。
添加地標非常容易，如果您使用的是HTML5，您可能已經在您的網站上使用了它們而沒有意識到，因為它們直接鏈接到HTML5語義元素（<h1></h1>到<h6></h6>，<main></main> ，等等）。
以下是用於生成站點標題部分的HTML的修改前後示例：
<div>
<div>
<div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a></div>
<div>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>
</div>
</div>
</div>變為
<header>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a><nav aria-label="Main menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>
</nav></header>使用的類保持不變，因此我們不需要對CSS進行任何更改。
以下是我們需要在示例站點中進行的更改的完整列表：
<div>現在是一個<code><header></header>元素。<div>現在是一個<code><header></header>元素。<div>已被<code><nav></nav>元素替換。<nav></nav>元素已獲得一個aria-label屬性，該屬性描述了它們：頁面頂部的菜單為“主菜單”，頁面底部的菜單為“實用程序菜單”。現在是一個<main></main>元素。- 表示頁面底部頁腳的
<div>現在是一個<code><footer></footer>元素。您可以在CodePen上查看完整的更新後的HTML。讓我們再次嘗試NVDA中的地標列表技巧（ INS F7然後ALT d ——這是獨立頁面的鏈接，您可以自行測試）：
太棒了！我們現在有了橫幅地標（映射到<header></header>元素）、主菜單；導航（映射到頂部的<nav></nav>元素，並顯示我們的aria-label ）、主內容（映射到<main></main>）和內容信息（映射到<footer></footer>）。在這個對話框中，我可以使用TAB鍵和光標鍵選擇主地標並直接跳到頁面的內容，或者更好的是，我可以在瀏覽頁面時按D鍵從一個地標角色直接跳轉到下一個。 JAWS屏幕閱讀器的用戶更容易——他們在瀏覽時只需按Q鍵即可直接跳轉到主地標。
作為額外的好處，使用語義元素還可以幫助搜索引擎更好地理解和索引您的內容。這是使網站更易訪問的一個不錯的額外好處。
添加跳過鏈接
我希望您此時正坐在那裡想“工作完成了”。好吧，我恐怕總是有一個“但是”需要考慮。早在2011年，谷歌就對使用CTRL f在網頁中搜索進行了研究，發現驚人的90%的人要么不知道它存在，要么從未使用過它。當涉及到地標時，使用屏幕閱讀器的用戶行為大致相同——他們中的很大一部分根本不使用此功能，即使它非常有用。因此，我們將向我們的網站添加一個跳過鏈接，以幫助這兩組用戶以及所有不使用屏幕閱讀器的鍵盤用戶。
良好的跳過鏈接的基本要求是：
- 當需要時，它應該對所有鍵盤用戶（包括屏幕閱讀器用戶）可見。
- 它應該向鍵盤用戶提供足夠的信息來解釋它的作用。
- 它應該在盡可能廣泛的當前瀏覽器上運行。
- 它不應該干擾鼠標用戶的瀏覽。
步驟1：改進鍵盤焦點外觀
首先，我們將提高整個網站上鍵盤焦點的可見性。您可以將鍵盤焦點視為在文字處理器中編輯文本時光標位置的等效項。當您使用TAB鍵導航時，鍵盤焦點會在鏈接（或表單控件）之間移動。
最新的網絡瀏覽器在顯示鍵盤焦點的位置方面做得相當不錯，但仍然可以從幫助中受益。有很多創造性的方法可以設置焦點環的樣式，儘管我們的目標是使其比任何東西都更突出。
我們可以使用:focus偽類進行樣式設置（並且最好將相同的樣式也應用於:hover ，我們已經在示例站點上這樣做了——CodePen，實時站點）。這是我們至少可以做的，儘管通常會更進一步，並在整個頁面上的:focus上反轉鏈接顏色。
以下是我們的:focus狀態的一些CSS（我們已經為:hover提供的代碼副本）：
a:focus { /* 整個頁面的通用規則*/
border-bottom-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
}
.menu-right a:focus,
.branding a:focus {
/* 反轉標題和頁腳中鏈接的顏色*/
background-color: white;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
}登入後複製
步驟2：添加HTML和CSS
最後的更改是將跳過鏈接本身添加到HTML和CSS中。它由兩部分組成：觸發器（鏈接）和目標（地標）。這是我推薦用於觸發器的HTML，它位於頁面開頭<header></header>元素內部：
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a>
登入後複製
這是目標的HTML，它直接放置在<main></main>內容的開頭之前：
<a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">Start of main content.</a>
<main></main>
登入後複製
以下是HTML的工作原理：
- 跳過鏈接觸發器使用標準頁面片段（href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target"）鏈接到跳過鏈接目標，該片段引用目標（
<a></a> ）的id屬性。按照鏈接會將鍵盤焦點從觸發器移動到目標。
- 我們鏈接到一個錨點（
<a></a> ）元素，而不是直接向<main></main>元素添加id屬性，原因有兩個。首先，它避免了鍵盤焦點無法正確移動的任何問題（這在某些瀏覽器中可能是一個問題）；其次，這意味著我們可以向用戶提供清晰的反饋，以表明跳過鏈接已成功。
- 兩個鏈接的文本具有描述性，以便清楚地向用戶解釋正在發生的事情。
我們現在有了一個功能正常的跳過鏈接，但是有一個問題：每個人都能看到它。我們將使用CSS默認情況下將其隱藏，這可以使它不會妨礙鼠標用戶，然後只有當它接收到鍵盤焦點時才會出現。有很多方法可以做到這一點，大多數方法都可以，但是有一些錯誤的方法你應該避免：
-
應該：使用
clip-path使鏈接不可見，或使用transform: translate或position: absolute將其定位到屏幕外。
-
不應該：使用
display: none ， visibility: hidden ， hidden屬性，或將跳過鏈接的寬度或高度設置為零。所有這些都會使您的跳過鏈接對一類或兩類鍵盤用戶都不可用。
-
不應該：使用
clip ，因為它已棄用。
這是我推薦用於隱藏這兩個鏈接的代碼。使用clip-path及其前綴的-webkit-版本在撰寫本文時可以覆蓋96.84%的用戶，這（在我看來）對於大多數網站和用例來說是可以的。如果您的用例需要，還有許多其他技術可供使用，這些技術在WebAIM上有詳細介紹。
.text-assistive {
-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
box-sizing: border-box;
position: absolute;
margin: 0;
padding: 0;
}登入後複製
為了在它們獲得焦點時顯示鏈接，我建議使用此CSS的版本，顏色和大小與您的品牌相匹配：
.text-assistive.display-at-top-on-focus {
top: 0;
left: 0;
width: 100%;
}
.text-assistive.display-at-top-on-focus:focus {
-webkit-clip-path: none;
clip-path: none;
z-index: 999;
height: 80px;
line-height: 80px;
background: white;
font-size: 1.2rem;
text-decoration: none;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6;
text-align: center;
}
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target:focus {
background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b084367;
color: white;
}登入後複製
這為在頁面頂部提供觸發器和目標的非常可見的顯示，用戶期望在加載頁面後直接在該處看到鍵盤焦點。當您按照鏈接時，還會更改顏色，以提供清晰的反饋，表明某些事情已經發生。您可以在CodePen（如下所示）上自己修改代碼，並在獨立頁面上使用NVDA進行測試。
進一步改進
跳過鏈接不僅僅用於聖誕節您的主菜單，每當您的網頁包含很長的鏈接列表時，它們都很有用。事實上，此CodePen演示了在頁面內容中使用跳過鏈接的一種好方法（此處為獨立頁面），使用CSS中的transform: translateY()來隱藏和顯示觸發器和目標。如果您處於需要支持舊版瀏覽器的“幸運”位置，那麼這裡有一個關於此的技巧（此處為獨立頁面）。
讓我們檢查一下！
最後，這裡有一些簡短的視頻演示跳過鏈接對我們兩類鍵盤用戶如何工作。
以下是使用NVDA屏幕閱讀器時完成的跳過鏈接的工作方式：（此處應嵌入視頻）
以下是再次使用鍵盤瀏覽而無需屏幕閱讀器時的情況：（此處應嵌入視頻）
我們剛剛查看了我認為在2021年可訪問跳過鏈接的現代方法。我們在更新它們以適應更好的CSS實踐、改進鍵盤用戶的UI以及改進使用屏幕閱讀器的用戶的體驗（感謝更新的HTML方法）的同時，借鑒了過去示例中的一些想法。
以上是深入跳過內容的深入研究的詳細內容。更多資訊請關注PHP中文網其他相關文章！
