鍵盤使用者需要知道自己在網頁上的位置。 當鍵盤使用者按鍵到連結或按鈕時，該連結或按鈕應該有視覺上的焦點顯示。 這種視覺指示通常是圍繞焦點元素的輪廓。
在 無障礙測試示範網頁中，側邊欄的藍色連結導覽選單在使用鍵盤時，無法視覺化顯示哪個連結有焦點。 想知道為什麼沒有視覺鍵盤焦點顯示會讓人困惑，試著用 Tab 鍵切換到示範頁面上的藍色連結。 藍色 的 Cats 按鈕有焦點，從瀏覽器左下角的目標連結資訊可見一斑，但沒有視覺上顯示焦點放在那個按鈕上：
使用來源工具分析缺乏焦點指示
要查看連結上套用了哪些 CSS 樣式，例如連結按鈕，請使用 來源 工具：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
在網頁任意位置右鍵點擊，然後選擇 檢查。 或者，按 F12。 DevTools 會在網頁旁邊開啟。
點擊 DevTools 左上角的 Inspect (
) 按鈕，讓該按鈕 (藍色) 被高亮亮出。將滑鼠移到頁面側邊欄導覽選單中的藍色 貓咪 按鈕上。 檢查覆蓋層會出現，並表示該
a元件可 鍵盤聚焦：
但 Inspect 覆蓋層並未顯示當連結聚焦時，元素缺乏視覺指示。
在渲染後的網頁中，點擊 「貓」 按鈕。
檢查 工具關閉 後， 元素工具開啟 ，並標示 DOM 樹中的節點
a。 CSS 規則#sidebar nav li a會出現在 Styles 標籤中，並附有連結指向 ：styles.css
點擊連結
styles.css。 CSS 檔案會在 Sources 工具中開啟：
注意
#sidebar nav li aCSS 規則中有 CSS 屬性設定為outline: none，這會移除瀏覽器在你用鍵盤聚焦連結時自動新增的輪廓。CSS 檔案包含一條使用
:hoverpseudo-class 的 CSS 規則，用來表示你使用滑鼠時正在使用哪個選單項目：#sidebar nav li a:hover。 然而，CSS 檔案中並未包含使用偽類別的:focusCSS 規則，例如#sidebar nav li a:focus。 這表示使用鍵盤時，沒有 CSS 樣式能視覺化顯示你正在使用哪個選單項目。
透過 Styles 面板模擬焦點狀態
你可以不用鍵盤來聚焦連結，而是透過樣 式 面板模擬焦點狀態：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
在網頁任意位置右鍵點擊，然後選擇 檢查。
點擊 DevTools 左上角的 Inspect (
) 按鈕，然後點擊渲染網頁中的 Cats 連結。
<a href="#cats">Cats</a>節點會在 Elements 工具中被高亮顯示。在 樣式 面板中，點擊 Toggle 元素狀態 (
:hov) 按鈕。 會出現 原力元素狀態 章節。勾選
:focus勾選方塊。 對焦狀態會套用在連結上，但連結沒有視覺上的對焦指示：