使用索引標籤和 Enter 鍵檢查鍵盤支援

使用鍵盤時，網頁的使用者介面必須能夠運作，因為並非所有使用者都有指標或觸控裝置，而且並非所有使用者都能看到網頁。 請確定您可以使用 Tab 鍵將焦點移至網頁上的每個表單控制項，並確定您可以使用 Enter 鍵來提交表單。

測試鍵盤支援的方式

您可以透過數種方式來測試鍵盤使用者網頁的可用性：

• 使用鍵盤，特別是 Tab、 Shift+Tab和 Enter 鍵。 本文將說明此方法。

• 使用 檢查工具檢查 個別專案的鍵盤支援。 檢查工具的資訊重迭包含協助工具區段，其中包含鍵盤焦點資料列。 請參閱 使用檢查工具，藉由將滑鼠停留在網頁上來偵測協助工具問題。

• 如需鍵盤支援問題，請參閱 問題 報告的 協助工具 一節。 如需 協助工具問題，請參閱自動測試網頁。

檢查網頁是否有鍵盤協助工具問題

若要使用鍵盤而非滑鼠來檢查 輔助功能測試示範網頁 是否有協助工具問題：

1. 在新的視窗或索引標籤中開啟 輔助功能測試示範網頁 。

2. 使用鍵盤流覽示範檔，使用 Tab 鍵或 Shift+Tab 鍵從元素跳到元素。 在示範網頁上， Tab 鍵會先將焦點移至區段中的 header 搜尋表單。

3. 按 Tab 鍵 將焦點放在按鈕上，然後按 Enter 鍵按一下焦點按鈕。 例如，在示範頁面中，按 Tab 鍵 將焦點放在 [ 搜尋 ] 欄位上，然後按 Enter 以提交搜尋。 此方法會產生與選取 [前往 ] 按鈕相同的結果。 選 取 Enter 以傳送 搜尋 表單正常運作。

4. 再次按 Tab 鍵。 您將焦點放在下一個專案是網頁區段中 content 的第一個[更多] 連結，如大綱所示：

   

5. 請再按 Tab 數次，直到您傳遞最後一個[更多]連結為止。 頁面會向上捲動，而您似乎位於頁面的元素上，但無法分辨其所在元素。

6. 請注意左下方的 URL。 如果您在畫面左下方 (或使用螢幕助讀程式) ，您會發現您位於包含藍色連結的提要欄導覽功能表上，因為瀏覽器會顯示 [貓 ] 連結指向 () #cats 的 URL。

   

7. 再次按 Tab 鍵，以取得表單中的輸入欄位。 不過，您無法藉由選取 [索引卷標] 來連線到文字方塊上方的按鈕。您無法使用鍵盤將焦點放在50、100或200個按鈕上，然後選取它們。 此外，選 取 Enter 並不會提交填寫表單。

   

8. 再次選取 [索引標籤 ] 會將焦點放在頁面的頂端導覽列上，其中包含 [ 首頁]、[ 採用寵物]、[ 附加]、[ 作業] 和 [ 關於我們] 的功能表按鈕。 按 Tab 鍵或 Shift+Tab 鍵 ，將焦點放在功能表按鈕上，如焦點外框所示。 然後按 Enter 鍵以存取網頁的該區段。

   

發現需要修正的問題

根據上述逐步解說，我們發現下列問題需要修正：

• 使用鍵盤時，側邊欄導覽功能表的藍色連結不會以視覺化方式指出哪個連結具有焦點。 請參閱 分析鍵盤焦點缺少指示。

• 在感謝表單中，數量按鈕和 [新 式] 按鈕無法與鍵盤搭配使用。 請參閱 分析表單中缺少鍵盤支援。

• 透過頁面區段的鍵盤存取順序不正確。 在到達提要欄位導覽功能表之前，您會流覽檔中的所有 [ 更多 ] 連結。 當 Tab 鍵將焦點放到提要欄位導覽功能表時，您已經周遊所有頁面內容。 提要欄位導覽功能表旨在讓您輕鬆存取頁面內容。

  如需如何解決此問題的詳細資訊，請參閱 使用來源順序檢視器測試鍵盤支援。