如何使用跳過鏈接使您的 WordPress 網站更易於訪問
已發表: 2017-07-06在我們的無障礙系列介紹中，我們討論了各種 Web 內容無障礙指南 (WCAG) 的基礎。 現在是時候通過查看一些關鍵指南並向您展示如何使您的網站更易於訪問來採取下一步行動了。 讓我們從繞過塊開始，通常稱為跳過鏈接。
什麼是跳過鏈接？
跳過鏈接是隱藏在您網站上的特殊鏈接，直到它通過 Tab 鍵或屏幕閱讀器進入:focus 。 他們的目的是讓替代技術用戶（使用鍵盤和屏幕閱讀器的人）能夠跳過內容塊。 直接從標準：
“有一種機制可以繞過在多個網頁上重複的內容塊。” – WCAG 標準 2.4.1 – 旁路塊
2.4.1是A級標準。 這意味著它包含在第 508 節中，並且是法律要求的。 您需要有跳過鏈接。
你能猜出最常見的內容跳過鏈接塊適用於什麼嗎？ 如果您猜到了“菜單”，那麼您是對的。 菜單幾乎出現在網站的每個頁面上。 有視力的用戶和鼠標用戶傾向於向右滾動，因為它是您期望出現的那些站點元素之一。 但是導航菜單並不是唯一需要跳過鏈接的塊。
跳過鏈接通常被忽視的區域是左側邊欄（或從右到左語言（如阿拉伯語）的網站的右側邊欄）。 由於它們傾向於按語義順序排列，用戶將需要一種方法來跳過定期重複的側邊欄，以便直接進入內容。
顯示在主頁之外的特色帖子塊也是如此。 一些網站設計將特色帖子部分或滑塊帶到內部頁面。 除非這些部分的內容髮生變化，即：類別或存檔頁面，否則應該有一個跳過鏈接。
可訪問性簡介：第 1 部分
可訪問性是您經常聽到的一個術語，但可能並不完全理解。 這部分是因為這個詞本身可能有點令人困惑。 詞根，訪問，使這個概念看起來與諸如......
如何添加跳轉鏈接？
現在您知道什麼是跳過鏈接，是時候將它們添加到您的網站了。 有幾種方法可以解決這個問題。 最簡單的方法（對於非編碼人員來說，唯一的方法）是安裝插件。 困難的方法是自己將它們編碼到您的主題中。
使用插件
當涉及到跳過鏈接時，我推薦兩個插件：Joe Dolson 的 WP Accessibility 和 Rian Rietveld 的 Genesis Accessible。 這兩個插件都解決了幾個可訪問性問題，包括為您添加基本的跳過鏈接。 請記住，Genesis Accessible 專門用於使用 Genesis 框架構建的站點。 如果您沒有 Genesis 站點，請使用 WP Accessibility。
自己編碼
您的另一個選擇是自己編寫跳過鏈接的代碼。 代碼本身相當簡單，只需要一些基本的 HTML 和 CSS 知識，但在嘗試此方法之前，您需要熟悉 WordPress 主題和模板的工作方式。 從現在開始，我假設您知道如何查找引用的文件以及如何編輯它們。
我們將首先編寫實際的跳過鏈接。 這將允許輕鬆複製並粘貼到模板文件中。 回顧 HTML 知識，您需要寫出一個錨標記。 請注意，此處的格式是為了便於閱讀。
<a href=”[don’t fill this in yet]” class=”skip-link”> Skip to Main Content </a>
我們故意將href屬性留空。 這是因為我們需要定義跳過鏈接將鏈接到的位置。 對於這個例子，我們將使用<main>元素作為我們的目標。 因為我們不能直接鏈接到沒有 ID 的元素，所以我們需要確保我們的<main>元素有一個。 您的<main>元素可能會在header.php中找到，但並非總是如此。 找到元素後，您需要確保它具有 ID。 如果沒有，像這樣添加一個：
&lt;main id=”main-content”&gt; [a bunch more code below]
ID 的具體值並不重要，但您需要記住它。 現在您需要使用 ID 值更新您的跳過鏈接代碼。
&lt;a href=”#main-content” class=”skip-link”&gt; Skip to Main Content &lt;/a&gt;
現在您已經構建了跳過鏈接，返回到header.php文件或主題的打開<body>標記所在的任何位置。 <body>標籤是跳過鏈接必不可少的位置，因為它們必須成為:focus鍵盤和屏幕閱讀器用戶的絕對首選。
就在<body>標記之後，通過您完成的 HTML。 下面顯示了一個更詳細的示例，其中包含多個跳過鏈接。 如果您想向您的網站添加多個鏈接，請確保正確應用了 ID。
&lt;body&gt; &lt;a href=”#left-sidebar” class=”skip-link”&gt;Skip to Sidebar&lt;/a&gt; &lt;a href=”#featured-posts-block” class=”skip-link”&gt;Skip to Featured Posts&lt;/a&gt; &lt;a href=”#main-content” class=”skip-link”&gt;Skip to Main Content&lt;/a&gt; [Header navigation goes here]
現在您的代碼中有跳過鏈接，但您還沒有完成！ 如果您現在加載頁面，您會在頂部看到跳過鏈接。 是時候添加一些 CSS 了。 使用下面的示例，跳過鏈接的樣式非常簡單：
.skip-link
{
position: absolute;
top: 0;
z-index: 9999;
right: 100%;
padding: 5px;
padding: 0.5rem;
font-size: 20px;
font-size: 2rem;
color: #000;
background: #FFF;
}
.admin-bar .skip-link
{
top: 32px;
}
.skip-link:focus
{
right: auto;
}
你看不到的是display: none的使用。 使用它會導致屏幕閱讀器完全跳過鏈接，完全違背了目的。 隱藏是通過使用right: 100%將文本移出屏幕並將其移動到right: auto on :focus來完成的。
應用 CSS 後，一切就緒。 您的跳過鏈接已到位，但已隱藏。 當鍵盤用戶或屏幕閱讀器在initials :focus加載您的頁面時，您的跳過鏈接將讓他們直接轉到他們想要的內容。
把它包起來
跳過鏈接是可訪問性功能的完美示例，看起來需要做很多工作，但實際上並非如此。 我們在代碼方面所做的只是添加幾行 HTML 和 CSS。 對於非技術方法，我們安裝了一個插件。 這兩種方法都需要很長時間，這一點很重要，因為跳過鏈接是 WCAG 2.0（最新的 WCAG 標準）的 A 級標準。 法律要求您將它們放在您的網站上。 不要讓自己處於危險之中； 今天添加您的跳過鏈接！