跳至主要內容區 (Skip-To)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

此為符合無障礙規範 A 等級所需要的元件。

基礎使用方式

<skip-to>
  <a href="#main" class="skip-to">跳至主要內容區</a>
</skip-to>

Custom Element

漸進增強規則

  • 使用 Document Fragment 連結至目的地，確保即使 JavaScript 沒有讀取出來，使用者仍然可以跳至目的地。

提供多個彈跳點

<skip-to>
  <a href="#main" class="skip-to">跳至主要內容區</a>
  <a href="#navigation" class="skip-to">跳至主要連結表</a>
  <a href="#footer" class="skip-to">跳至頁尾</a>
</skip-to>