在平常上網，我們移動滑鼠、點擊元件已經成了日常。
但對於一些使用者來說，「滑鼠」根本不是他們能選擇的輸入工具。

手有受傷的人可能無法精準操控滑鼠，視障者甚至看不到滑鼠游標在哪。
這時候，他們主要的互動方式，就是鍵盤、或透過螢幕報讀軟體來操作介面。

為什麼鍵盤可操作性這麼重要？

想像一下：
你用 Tab 鍵從登入頁開始操作，跳過 logo、到輸入帳號、密碼，再按 Enter 登入。
如果有一個地方焦點卡住了、或跳到看不見的地方，就等於「整個網站用不了」‼️

對於只能用鍵盤的人來說，體驗崩潰的程度，甚至比畫面錯亂還嚴重。( 這點大家自己操作看看就可以了解有多崩潰🤯 )

這也是為什麼在 WCAG 2.1 的第二大原則「可操作（Operable）」 中，第一項準則就是「所有功能皆能用鍵盤操作」。

焦點是鍵盤使用者的「滑鼠」

焦點（Focus）可以理解成「鍵盤版的滑鼠」。
每當使用者按下 Tab 鍵，焦點就會依序移動到下一個可互動的元素上，例如按鈕、連結、輸入框、選單等。
除了要注意「能不能移動」，以下幾點也是要特別注意的事項：

1. 焦點順序必須有邏輯

焦點應該依照畫面上的資訊架構邏輯去移動，就像我們的視覺動線一樣（ 通常從左到右、從上到下 ）。
如果焦點跳來跳去、或先跳到底部再回到中間，使用者很容易迷失方向。

2. 焦點狀態要「明顯可見」

建議保留預設焦點框，或是依品牌風格自訂明顯的 focus 樣式（ 例如：外框加粗、虛線、顏色對比強烈 … ）。
如果因為想讓畫面「乾淨」而把它拿掉，會直接讓鍵盤使用者無法知道他目前在哪個位置上。

第一銀行 - 第e寫字檯：有設置明顯的焦點狀態（黃色粗框線）。

3. 避免焦點消失或無法抵達

像是彈窗，若開啟後焦點沒有在在彈窗內，或關閉後沒回到正確位置，會造成焦點「消失」或「亂跳」。

網站導覽 x 鍵盤操作

鍵盤操作不只是技術層面的「可用」，更是整體互動設計的一部分。

真正的重點是「使用者能靠鍵盤有效導覽整個網站」，這裡我們可以從幾個層面切入說明：

1. 網站區塊說明

通常網站都會依照無障礙網頁設計原則建置，網站的主要內容分為三大區塊：
上方功能區塊、中央內容區塊、下方功能區塊

每個網站的區塊設置可能會因網站需求而有些許不同，像有些網站還有設置左方選單連結區，
所以到一個新的網站時可以先點進「網站導覽」了解這個網站的區塊架構~

2. 快捷鍵設定

因應上述的網站區塊都會設置相對應的快捷鍵，可以快速抵達指定區塊，
大部分網站的快捷鍵設定如下：

• Alt+U：上方功能區塊。
• Alt+L：左方選單連結區。
• Alt+C：中央主要內容區塊。
• Alt+Z：下方功能專區。

同樣，每個網站的快捷鍵設定可能會因網站需求而有些許不同，所以到一個新的網站時可以先點進「網站導覽」了解這個網站的區塊架構~

💬 經驗分享
以前有訪談過幾位視障者都表示：
因為他們對於網站架構都很熟悉了，大部分的網站區塊和快捷鍵都差不多，所以到了新的網站都是偏向自己摸索會比較省時，快捷鍵按一按就大概可以摸清網站架構，除非架構太奇特，找不到東西時才可能會去看網站導覽。

3. 導航磚

每個區塊都會設置「導航磚」，利用三個冒號 ( : : : ) 來代表，且需要搭配快捷鍵來使用，
幫助使用者快速移動至不同的網頁區塊，避免使用者迷失在網頁中。

第一銀行 - 第e寫字檯：每個區塊都會設置「導航磚」。

4. 鍵盤操作方式

當網站項目無法以滑鼠點選時，通常都可利用以下鍵盤操作方式瀏覽資料：

• ← → 或 ↑ ↓
  按左右鍵或上下鍵移動標籤順序。
• Home 或 End
  可直接跳至標籤第一項或者最後一項。
• Tab
  停留於該標籤後，可利用 Tab 鍵跳至內容瀏覽該筆資料，遇到 Radio 按鈕時請配合使用 ← → 或 ↑ ↓ 鍵移動項目順序。
• Tab + Shift
  可往回跳至上一筆資料；當跳回至標籤項目時可繼續利用 ← → 或 ↑ ↓ 鍵移動標籤順序。

5. 鍵盤操作應用

• 在表單中可以用 Tab 切換欄位，用 Shift + Tab 回上一個。
• 下拉選單應該允許使用 ↑↓ 鍵切換選項、Enter 選取。
• 按鈕、開關、分頁等元件皆可用 Enter 或空白鍵操作。

6. 鍵盤可達性

當一個操作需要「太多次 Tab」才能抵達時，也會讓使用者感到煩躁。

舉例來說：上方功能區塊有長串的導覽列或重複元件，建議設計「跳至主要內容」的按鈕，讓使用者能直接略過重複區塊。

第一銀行 - 第e寫字檯：進入網頁後首次按 Tab 會顯示「跳到主要內容」按鈕。

與焦點互動的媒介：報讀軟體

報讀軟體像是 Windows－NVDA、macOS－Accessibility Reader，手機有 iOS－旁白、Android－TalkBack， 都會根據焦點位置唸出目前的內容。

例如當焦點移到一個按鈕上，報讀軟體就會讀出：「送出，按鈕」。
除了唸文字，還會唸出元素類型（ 例如按鈕、連結、輸入框 ），幫助使用者理解目前的互動狀態。

👉 注意重點
彈窗、狀態變化（ 例如錯誤提示、成功訊息 ）必須讓報讀軟體能偵測到，否則使用者會完全不知道畫面有改變。

試著「不用滑鼠」操作一次

要驗證你的設計是否真的可操作，最簡單的方式就是：「放下滑鼠」。
開啟你的網站，使用 Tab、Enter、Space、方向鍵 試著完成主要任務（ 例如搜尋、登入、送出表單 ）。

如果你卡住了，對只能用鍵盤的使用者來說，那個地方就等於是障礙。
體驗幾分鐘，你就會明白「資訊的可見性」不只是畫面上的事情，還關乎語意與操作流程的完整性。

📌 總結

鍵盤操作與焦點管理聽起來像是前端開發的責任，但實際上，它也與 UIUX 設計息息相關。

焦點的可見性、邏輯順序、操作一致性，這些都會在設計階段決定使用體驗的底線。
所以，不要把焦點框當成礙眼的東西刪掉，因為這是能替那些「看不見」介面的人，建立起與網路世界互動的座標。