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