在這篇文章中，我們將帶大家認識一個簡單但非常實用的無障礙元素 — — Skip Link。我們會介紹它如何提升鍵盤使用者的操作體驗、常見的使用情境，以及實做時需要注意的要點。就讓我們一起來深入了解並巧妙運用 Skip Link，打造更加無障礙的數位產品吧！
Skip link 是一個允許使用者將焦點略過一些區塊，到達頁面其他位置的連結元素，它可以放置在略過區塊的開頭處，或是在頁面的頂部。只要確保這個連結的可訪問名稱獨特且易於理解，同時能正確跳轉到符合名稱所述的位置即可。雖然實作 Skip link 並不困難，但如果編排恰當的話，能很好的提升鍵盤使用者的操作體驗。
![A11y 新手村網站截圖，示範 Skip Link 功能。頁面頂部出現「跳到主要內容區塊」的連結，並以標示框說明這是「Skip Link：跳到主要內容區域」。下方為網站導覽列與關於我們頁面內容，介紹 A11y 新手村每週分享無障礙相關原創文章，涵蓋原理、UX/UI 設計到開發實作，並訪問障礙者與 Accessibility 實踐者。
]在A11y新手村部落格官網，按下 Tab 可以觸發跳到主要內容區塊的連結，圖片來源：A11y 新手村。
大多數網站的頁首都會有一個由多個連結或按鈕組成的導覽列，這個導覽列通常會出現在每個頁面上，用來放置網站的主要連結，而其後才接續頁面的正文內容。由於導覽列通常擁有大量的互動元素，使得每次頁面載入後，鍵盤使用者都必須移動焦點，重複經過這些元素，才能瀏覽到正文內容。因此，我們可以在頁首放置一個略過這些元素的 Skip link — Skip to content 來提高鍵盤使用者的瀏覽效率。
Skip to content 通常是頁面中的第一個可聚焦元素。使用者點擊連結後，鍵盤焦點會直接移至網頁的主要內容區域。一般來說，我們會使用 <main> 地標來包含網頁的主要內容區域，因此，點擊 Skip to Content 後，焦點通常是會移至 <main> 地標上。
除了將這個連結的可訪問名稱取為 Skip to content 外，常見的命名還有：
• Skip navigation (跳過導覽)
• Skip main navigation (跳過主要導覽)
• Skip navigation links (跳過導覽連結)
• Skip to main content (跳到主要內容)
那麼，有無提供 skip to content 對鍵盤使用者究竟有多大的差異呢？我們假設有一個網站的頁首導覽區有 12 個可聚焦元素。如果沒有 Skip to content 連結，焦點要到達主要內容區就必須從頭逐項移動 12 次。若有一個資訊從首頁到達的路徑需要經過 5 個頁面，沒有 skip to content 的話，鍵盤使用者就必須必頊進行 60 次（5X12）的焦點移動。但如果有 skip to content，就只需要點擊 5 次，就能到達資訊的所在區域了！
你可能會認為在介面上顯示 Skip link 不夠美觀，或是覺得這些連結對不需要的使用者而言會很雜亂，因此想要將它們隱藏。然而，如果這些連結過小或完全隱藏，對於最需要它們的鍵盤使用者來說，反而難以使用。
![Skip link 注意事項，共四點。預設隱藏：在非聚焦狀態下，這個連結應該隱藏不可見。可用鍵盤導覽：使用者應能夠透過鍵盤導覽到這個連結。焦點可見：當這個連結獲得焦點時，其焦點環應明顯可見。正確焦點轉移：點擊連結時，焦點需移動到符合可訪問名稱所描述的區域。]在設計 skip link 時，須注意的事項有：預設隱藏、可用鍵盤導覽、焦點可見、正確焦點轉移，圖片來源：A11y 新手村。
為了在不影響美觀的同時，確保 Skip link 對一般鍵盤使用者仍然可用，最佳做法是讓該連結預設為隱藏，僅當使用者透過鍵盤聚焦時才顯示。也就是這個元素應具備以下行為：
- 預設隱藏：在非聚焦狀態下，這個連結應該是隱藏不可見的。
- 可用鍵盤導覽：使用者應能夠透過鍵盤導覽到這個連結。
- 焦點可見：當這個連結獲得焦點時，它應明顯可見。
- 正確的焦點轉移：當點擊這個連結時，焦點必頊移動到符合可訪問名稱所描述的區域。
這種做法既保持了介面的美觀，又確保了需要使用 Skip link 的使用者能夠輕鬆找到它。當鍵盤使用者按下 Tab 鍵時，跳轉連結就會出現在螢幕上。而對於不需要使用這個功能的使用者來說，介面也不會有額外不需要的元素。
此外，為了避免當快速使用 Tab 鍵進行導航， Skip link 可能只會在頁面上顯示短短一瞬間就消失，造成使用者不小心忽略它的問題，我們可以加強這個連結與周圍的對比度、使用動畫展示該元素的出現或將其放至於明顯的位置來突顯這個連結。最後，在點擊 Skip link 如果略過的內容較多而導致頁面的捲動的話，可以做平滑捲動的效果，這會讓使用者有更好的操作體驗。
![Rakuten Kobo 網站截圖，示範 Skip link 功能。頁面中央出現「Skip to main content」連結，顯示在獲得鍵盤焦點時的可見狀態。背景為網站首頁，顯示法語書籍促銷活動。]Kobo 官方網站將 skip to main content 連結放置在網頁正中央，確保使用者可以清楚看到連結的出現，圖片來源：Kobo 官方網站。
在實做 Skip link 的樣式時，為了兼顧可用性與美觀，我們可以使用 CSS 將連結初始隱藏在螢幕外，當它獲得鍵盤焦點時再移至螢幕內。此外，我們還可以加上 scroll-behavior 的屬性讓跳轉時平滑滾動，例如：
雖然「Skip to content」 是最常見的 Skip link 應用方式，但我們也可以運用在許多不同的情境中，例如：
- 嵌入的社群媒體動態頁框：這些內容有時看似無窮無盡，可能需要多次按下 Tab 鍵才能跳出，甚至因為自動載入而使得內容無限增長，導致無法離開。
- 搜尋過濾器：某些頁面可能包含複雜的搜尋過濾器，內含多個輸入框，但使用者可能對這些過濾器不感興趣。範例：Booking 網頁版左側進階搜尋過濾面板。
- 側邊欄：側邊欄可能包含按月份排列的文章連結列表，有時可能有超過 100 個可聚焦元素。
![Booking.com 住宿搜尋結果截圖，左側篩選表單包含房價範圍滑桿、飯店類型、評分、含早餐、床型、公寓、青年旅館、星級、距離等大量欄位。]Booking 網頁版左側有非常複雜的進階過濾搜尋表單，使用鍵盤的使用者需要跳過大量欄位才能跳過此區域，圖片來源：Booking.com 官方網站。
這些例子並非涵蓋所有可能的情境，只是提供你一些思考的方向。如果網站上的某些內容區塊對部分使用者來說並非必要，或不必每次都瀏覽，但卻包含大量可聚焦元素，那麼這或許就是使用 Skip link 的好時機。
那麼， Skip link 對螢幕閱讀器使用者的幫助如何呢？ 這可能取決於使用者的操作習慣。螢幕閱讀器提供多種導覽方式，使用者可以快速導覽至特定類型的元素，如標題、地標、列表、連結、按鈕、圖片等。儘管使用者可以利用螢幕閱讀器的這項功能進行導覽，而不需要透過 skip link 的輔助。不過如果有 skip link 的話，能讓使用者有多一種選擇略過內容的方式。沒有提供 skip link 或許對螢幕閱讀器使用者不會有太大的不便，但一般鍵盤使用者將無法快速略過內容，導致難以使用。
你可能會有這樣的疑問：「按住鍵盤的 Tab 鍵不放，不就能快速移動焦點嗎，為何還需要 skip link ？」。但別忘了，你的使用者可能有著不同的背景和需求，例如：對於無法使用雙手操作的肢體障礙者而言，他們可能需要使用頭部開關或口含棒來操作鍵盤，根本無法作出按住鍵盤這樣的動作。而對於螢幕閱讀器的使用者來說，由於無法透過視覺掌握焦點的位置，單靠按住 Tab 鍵來移動焦點，會使他們難以精確掌握焦點的相對位置，也無法建立清晰的心理地圖。
在 WCAG 中，2.4.1 跳過區塊是與 skip link 最有關的成功準則，此準則要求：「應提供一個機制，以跳過多個網頁上重複的內容區塊」。
我們可以從這條成功準則的 Understanding 文件得知，達成這個成功準則的充分機制不僅限於使用 Skip link，像是使用標題 (heading) 與地標 (landmark) 也是充足的機制之一。不過，由於這些技術對於沒有使用螢幕閱讀器或特殊軟體的鍵盤使用者來說，並不特別實用，所以在有重複區塊的頁面上，僅提供標題與地標通常被認為是不夠無障礙的。
因此，同時提供標題、地標與跳過連結這三種機制，或許是最明智的做法。這樣不僅能省去對這個成功準則的爭論，更是優先考量使用者需求的展現。畢竟，實現無障礙體驗才是我們最終的目標。
