許多人會使用鍵盤 或其他模仿 鍵盤的功能，例如切換裝置 導覽。有暫時性身體限制 (例如手腕扭曲) 的人 也有些沒有智能障礙等精細動作的人 可能會因為個人因素而選擇使用鍵盤瀏覽網頁 偏好、效率或硬體故障
低視能或失明使用者可以搭配使用鍵盤和 的放大功能或螢幕閱讀器軟體但使用不同方法 用來瀏覽畫面的鍵盤快速鍵，而非視線使用者。
針對這些身心障礙和情況，鍵盤支援十分重要。A 罩杯 鍵盤無障礙功能的一大部分是以焦點為主。「焦點」是指畫面上的元素 接收來自鍵盤的輸入內容
在本單元中，我們將專注於 HTML 結構和 CSS 樣式 例如鍵盤和可聚焦的元素 JavaScript 模組 瞭解互動式元素的焦點管理和按鍵動作。
焦點順序
鍵盤使用者可瀏覽的元素稱為「可聚焦」 元素。焦點順序、 又稱為分頁或導覽順序，也就是元素 重點。預設焦點順序必須符合邏輯、符合直覺，且與圖像內容相符 。
在大多數語言中，焦點順序會從頁面頂端開始，至底部結束，由左至右移動。不過，有些語言是從右到左書寫，因此網頁的主要語言可能需要不同的焦點順序。
根據預設，焦點順序會包括可自然聚焦的 HTML 元素，例如 連結、核取方塊和文字輸入內容可自然聚焦的 HTML 元素包括 內建分頁順序支援和基本鍵盤事件處理功能。
您可以更新焦點順序，納入任何不正常的元素 例如非互動式 HTML 元素、自訂元件或 元素並加上 ARIA，會覆寫 自然聚焦語意
定位索引
焦點順序的開頭為具有正數的元素 Tabindex 屬性 (如有)，然後從最小正數移至 最大的物件 (例如 1、2、3)。然後繼續處理 Tabindex 值的元素 系統可能會按照屬性在 DOM 中的順序顯示 0。含有負定位索引的所有元素 會從自然對焦順序中移除
Tabindex
的未聚焦元素 (tabindex="0") 會套用到通常無法聚焦的元素，
根據網頁顯示的方式
。然而，這與自然可聚焦的 HTML 元素不同，您必須
提供更多鍵盤支援
才能完全存取
同樣地，如果元素通常可聚焦，但
無效：例如按鈕在輸入欄位填入資料前無法操作
中，您應該為這項元素新增負索引值 (tabindex="-1")。正在新增
會發出負的 Tabindex 信號，告知輔助技術和鍵盤
按鈕應從自然對焦順序中移除不過請放心，您可以
視需要使用 JavaScript 將焦點移回元素。
在這個範例中，tabindex 屬性會新增至沒有該屬性的元素
自然能接收重點元素順序是使用以下程式碼操控
tabindex，用於說明其可聚焦於專注順序的能力。這是
舉例說明不該做的事！
略過連結
目前，大多數網站都會在網頁主標題中列出一長串的選單連結 讓頁面顯示一致的內容這對一般導覽來說很有用，但 讓純鍵盤的使用者難以輕易前往網站的主要網站 不必反覆按下 Tab 鍵
想要跳脫多餘或沒用的連結群組，其中一個方法是新增 略過連結。跳轉連結為錨定文字 分別透過 ID，而不是將使用者帶往網站上其他頁面或外部 資源。略過連結通常會新增為使用者的第一個可聚焦元素 會在抵達網站時看見，且可以顯示或隱藏 根據設計的要求，判斷要對使用者套用何種標籤。
當使用者按下 Tab 鍵，且可使用有效的略過連結時， 即可將鍵盤焦點移至略過連結。使用者可以按一下略過連結 不需要在頁首部分和主要導覽下方如果他們選擇不點選 略過連結，然後繼續前往 DOM 下方的分頁，系統會將它們傳送到下一個 可聚焦的元素。
如同所有連結，跳轉連結也必須包含
連結用途新增「跳至主要內容」詞組通知使用者
瞭解連結的品質在何時，有許多程式碼選項可以選擇
提供更多相關資訊，例如
aria-labelledby
Aria 標籤，或新增
不符合 <a> 元素的文字內容，如範例所示。
焦點指標
正如所學，焦點順序是鍵盤的重要方面 更方便存取決定焦點的樣式也很重要。由於 但現在即使焦點順序很棒 也能讓使用者知道自己的所在位置 沒有正確的樣式設定網頁？
可見的焦點指標 是監控使用者能否隨時使用重要工具 頁面。這對視障使用者來說尤其重要。
瀏覽器預設樣式
如今，每款新式網路瀏覽器都有不同的預設視覺樣式， 套用於網站或應用程式中的可聚焦元素 。使用者瀏覽頁面時，系統會將這個樣式套用於 元素接收鍵盤焦點。
如果允許瀏覽器處理焦點樣式，就務必要詳閱
確認您的主題不會覆寫瀏覽器的預設值
樣式。覆寫值通常會在以下項目中寫入 "outline: 0" 或 "outline: none"：
。這段一小段程式碼可以移除瀏覽器的預設焦點
會讓使用者難以瀏覽
網站或應用程式
a:focus {
outline: none; /* don't do this! */
}
a:focus {
outline: auto 5px Highlight; /* for non-webkit browsers */
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}
自訂樣式
當然，除了預設瀏覽器樣式以外，您還可以建立自訂瀏覽器 與主題相輔相成的重點指標建立自訂焦點時 指標，你非常自由發揮創意！
焦點指標形狀可以採多種形式，例如外框、邊框、 底線、方塊、背景變更或其他明顯的樣式變更 未依賴顏色就表示鍵盤焦點處於啟用狀態 該元素
您可以變更焦點指標的樣式，確保這不會在 背景。舉例來說，如果網頁背景是白色，您可以將 藍色背景的按鈕焦點指標如果網頁 此時，您可以將同一個按鈕焦點樣式設為白色。
您可以根據元素類型變更焦點元素的樣式。例如： 您可以用底線標示身體連結 按鈕元素
每個焦點指標樣式的數量沒有規則 但請務必維持合理的數字， 混淆不清
總結
請盡可能確保網站或應用程式的無障礙設計 也必須使用鍵盤存取。本單元 著重鍵盤無障礙功能的視覺層面，尤其是焦點 排序和焦點指標
隨堂測驗
測試您對 ARIA 和 HTML 的瞭解程度
使用白色背景時，最容易存取的 :focus CSS 樣式範例為何？
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;跳轉連結的用途為何？