測試 Oracle JET App 的僅限鍵盤輔助功能

簡介

這是 Identify Accessibility Issues 學習路徑中的第二個教學課程。

Web Content Accessibility Guidelines (WCAG) 2.2 概述建立可存取 Web 應用程式的許多成功條件。本教學課程的重點在於說明僅使用鍵盤的準則。

僅可使用鍵盤存取的應用程式搭配替代輸入裝置使用，適用於行動力有限或無法操控滑鼠的人員。當人們可以使用鍵盤時，網際網路就觸手可及。

目標

在本教學課程中，您將瞭解如何對 Web 應用程式執行僅限鍵盤測試。

必備條件

工作 1：準備僅進行鍵盤輔助功能測試

視覺檢驗提供可存取頁面的結構與基本功能概要。僅限鍵盤測試是手動輔助功能測試的中心，讓開發者有機會以停用的使用者角度與應用程式互動。「WCAG 2.2 成功條件」的子集，此教學課程著重於數個特定概念。

本節開頭提及的成功準則會間接解決可聚焦元素的概念，因此需要定義幾個詞彙。

定義並說明這些適用的概念之後，您就會準備好測試入門應用程式。

請注意「成功條件 2.1.3」括號中包含的「無例外」文字。這表示鍵盤輔助功能是必要的。

WCAG Guideline 2.1 和後續的成功準則凸顯了鍵盤輔助功能的絕對需求。鍵盤在為所有人提供技術方面扮演著重要的角色。

工作 2：驗證視覺焦點是否存在

僅限鍵盤輔助功能測試僅依賴焦點指標。遵循下列「可見焦點」成功準則是不可轉讓的。停用的使用者無法在沒有作用中焦點或焦點位置不清楚時瀏覽應用程式。

當您逐頁瀏覽 Web 應用程式時，一律會顯示識別焦點位置的可見指標。指示器通常是矩形。停用焦點矩形會導致此準則失敗。

應用程式開發人員在撰寫的應用程式和程式中自豪。他們的目標是將功能與具有視覺吸引力的體驗整合。焦點矩形通常與設計相差；因此，開發人員通常會隱藏或停用該矩形，並違反「成功準則 2.4.7」。

焦點矩形 1

焦點矩形 1

焦點矩形 2

焦點矩形 2

在上面的兩個螢幕擷取畫面中尋找焦點。

第一個螢幕擷取畫面 Focus Rectangle 1 代表具有正確焦點的頁面。焦點指示器非常明顯，因為它圍繞在頁面左上方的「總覽」頁籤。第二個螢幕擷取畫面 Focus Rectangle 2 在「總覽」頁籤中缺少焦點的任何指示。

瀏覽「簡介 (Introduction)」頁面上的前幾個可聚焦元件，觀看焦點矩形。

  1. 如果您的應用程式尚未執行，請瀏覽至 ACCLearningPath 資料夾並啟動它。

    $ ojet serve

  2. 當應用程式在瀏覽器中開啟時，按 <Ctrl+L> 將焦點設為網址列，然後按 <Tab> 將焦點移至略過導覽連結。

  3. 按 <Tab>，將焦點移至頁面右上角之使用者功能表中的 john.hancock@oracle.com 。

  4. 按 <Tab> 即可將焦點移至使用者功能表下方之主導覽功能表中的簡介。

  5. 按 <down arrow> 可將焦點移至導覽功能表中的資源，然後按 <Enter> 可載入「資源」頁面。

    資源頁面

  6. 按 <Tab>，將焦點移至 Oracle JET 主要網站連結。

    請注意，焦點位置沒有明確的指示。「資源」頁面失敗的「成功條件 2.4.7」。

    在下列步驟中，您將修正缺少焦點矩形問題，以符合 WCAG 標準。

  7. 瀏覽至 ACCLearningPath/src/js/views 資料夾，然後在程式碼編輯器中開啟 resources.html 檔案。

  8. 尋找 Oracle JET 主要網站的連結。

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    將 style 屬性中的 "outline-width:0" 變更為 "outline-width:3"。

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. 儲存並關閉 resources.html。

    您的檔案看起來類似於 resources-html.txt 。

  10. 重複上述步驟 2 到步驟 6，確認現在可看見焦點矩形。

任務 3：驗證有意義的頁籤順序

下一次僅用於鍵盤測試的部分，是指透過頁面作為使用者頁籤的頁面組織。

焦點順序最好能透過插圖來理解。當使用者逐頁瀏覽頁面時，焦點位置不是隨機的。它不會從頁面的一側移至另一側，也不會再往回移動。它以預期和邏輯的方式移動。

在先前的驗證 Visual Focus 的存在性工作中，您看到焦點如何透過頁面的橫幅以預期的順序移動；不過，已編碼「資源」頁面本身來說明更隨機的定位順序。

  1. 在執行的應用程式中，按 <Ctrl+L> 可將焦點置於網址列。
  2. 按 <Tab> 即可將焦點移至略過瀏覽連結。
  3. 按 <Tab>，將焦點移至頁面右上角之使用者功能表中的 john.hancock@oracle.com 。
  4. 按 <Tab>，將焦點移至主導覽功能表中的簡介。
  5. 按 <Tab>，將焦點移至頁面本文中的 Oracle JET 主要網站連結。

  6. 按 <Tab>。焦點應移至 Oracle JET Developer's Guide ，但改為移至 Oracle JET Cookbook 連結。

    Oracle JET Developer's Guide 連結不在違反「成功條件 2.4.3」的頁籤序列中。

    步驟 7 到 11 描述將 Oracle JET Developer's Guide 連結傳回正確頁籤順序位置的必要方法。步驟 12 到 16 說明如何確認修正已運作。

  7. 在您的程式碼編輯器中，尋找 resources.html 檔案中的 Oracle JET Developer's Guide 連結。

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    tabindex="-1" 屬性會將此連結完全移出頁面的頁籤順序。

  8. 將 tabindex 屬性的值修改為 0，即可在頁面的頁籤順序中傳回正確位置的連結。

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. 儲存並關閉檔案。瀏覽器中的「資源」頁面會自動以其新內容重新整理。

  10. 按 <Ctrl+L> 即可將焦點設為網址列。

  11. 按 <Tab> 三次即可將焦點移至導覽功能表中的簡介。

  12. 按 <Tab>，將焦點移至 Oracle JET 主要網站連結。

  13. 按 <Tab>，將焦點移至 Oracle JET Developer's Guide 連結。

  14. 繼續按 <Tab>，直到焦點放在頁面頁尾中的關於 Oracle 連結為止。

    在您導覽頁面上所有可聚焦元素後，請撤銷處理程序。有時在往回切換頁面時，路徑會意外變更、出現新元素，或某些元素會消失。

  15. 使用 <Shift+Tab> 以由下而上的順序移動，以確保在反向瀏覽頁面時，有意義的順序保持真。

工作 4：與控制項互動

本教學課程中使用的許多控制項都是 Oracle JET 特定的控制項。Oracle JET 的一項功能就是其元件已內建僅具備鍵盤輔助功能的設計。使用 Oracle JET 的開發人員可以直接從 Oracle JET 手冊複製元件，然後將這些元件放到適當位置，即可存取產生的程式碼。

例如，以下是與標準 HTML 元件互動的一般按鍵組合簡短清單：

注意：對於某些控制項 (例如導覽功能表、頁籤列、圓鈕群組和類似的群組控制項)，您可能需要頁籤到控制項中，然後使用方向鍵在控制項中瀏覽。

您可以使用執行中的入門 App 與數個 Oracle JET 元件進行互動。

  1. 按 <Ctrl+L> 即可將焦點設為網址列。

  2. 按 <Tab> 即可將焦點移至略過瀏覽連結。

  3. 按 <Tab>，將焦點移至頁面右上角之使用者功能表中的 john.hancock@oracle.com 。

    根據 <oj-menu-button> 元素的鍵盤文件，按 <Space>、<Enter> 或 <down arrow> 會開啟功能表，然後按 <Escape> 會關閉功能表。

  4. 按 <Space> 以展開使用者功能表。焦點會移至偏好設定。

  5. 按 <down arrow> 可向下移動功能表項目的清單。

  6. 按 <Escape> 以關閉使用者功能表。

  7. 按 <Tab>。焦點會立即移至使用者功能表下方主瀏覽功能表中的簡介。

    如需每個 Oracle JET 元件特定金鑰存放區的其他資訊，請參閱《Oracle JET Keyboard and Gesture Guide 》。

工作 5：識別鍵盤設陷

本自學課程一開始所介紹的最終主題涉及一種稱為鍵盤設陷的概念。使用者無法使用 <Tab>、<Shift+Tab> 或任何方向鍵將焦點從頁面上的元素移出時，就會發生鍵盤設陷。

鍵盤陷阱為僅使用鍵盤的使用者而無法使用整個頁面。鍵盤陷阱的一般解決方案是重新啟動應用程式。

讓我們實踐吧！

教學課程的本節提供僅使用鍵盤測試方法的詳細範例。

當您測試應用程式的「組織」頁面時，請確認焦點位置和焦點一律會顯示在可預測的樣式中。

您要測試的頁面是透過「簡介」頁面上的「組織」頁籤來存取。

組織頁面

使用入門應用程式執行「組織」頁面的鍵盤測試。

  1. 在應用程式的「資源」頁面中，按 <Ctrl+L> 即可將焦點放在網址列。

  2. 按 <Tab> 即可將焦點移至略過瀏覽連結。

  3. 按 <Tab>，將焦點移至頁面右上角之使用者功能表中的 john.hancock@oracle.com 。

  4. 按 <Tab>，將焦點移至使用者名稱下方之主要導覽功能表中的簡介。

    根據 <oj-navigation-list> 元素的鍵盤文件，使用 <up arrow> 和 <down arrow> 鍵瀏覽主導覽功能表中的項目。

  5. 按 <Enter> 以選取簡介。

  6. 按 <Tab>，然後按 <right arrow>，將焦點移至頁籤列中的「組織」頁籤。按 <Enter> 以載入「組織」頁面。

    根據 <oj-tab-bar> 元素的鍵盤文件，使用方向鍵在標籤列內移動。

  7. 按 <Tab> 可將焦點移至樹狀結構檢視。將焦點放在第一個可聚焦的項目，即會計節點。

    根據 <oj-tree-view> 元素的鍵盤文件，使用 <up arrow> 和 <down arrow> 鍵在樹狀結構檢視中的節點之間瀏覽。

  8. 按 <right arrow> 以展開樹狀結構中的會計群組節點，然後按 <left arrow> 以收合群組節點。

  9. 按兩下 <down arrow>，即可將焦點移至 RESEARCH 群組節點中的員工 JONES 。然後按下 <Enter> 以選取。

    表單會顯示在頁面右側，其中包含員工詳細資料。

    含員工明細表單的組織頁標

  10. 按 <Tab>，將焦點移至員工 ID 欄位。
  11. 按 <Tab>，將焦點移至員工名稱欄位。
  12. 按 <Tab>，將焦點移至職稱欄位。

  13. 按 <Tab> 可將焦點移至僱用日期欄位，並顯示展開的行事曆方格。

    根據 <oj-date-picker> 元素的鍵盤文件，按方向鍵可變更行事曆方格中的日期焦點。

  14. 按 <down arrow>，然後使用方向鍵將焦點移至展開日期選擇器中的日期。然後按下 <Enter> 以選取日期。

  15. 按 <Tab>，將焦點移至薪資欄位。

    根據 <oj-input-number> 元素的鍵盤文件，使用 <up arrow> 來增加薪資值，並使用 <down arrow> 來減少薪資值。

  16. 按 <Tab>，然後嘗試將焦點移至管理者 ID 欄位。

    您是否注意到，一旦焦點移至薪資欄位，按 <Tab> 或 <Shift+Tab> 並未將焦點移出欄位？此欄位有鍵盤設陷。如果沒有修正程式碼，結束陷阱的唯一方法是重新整理頁面。

任務 6：移除陷阱

  1. 瀏覽至 src/js/views 資料夾，然後在編輯器中開啟 organization.html 檔案。

  2. 尋找 id="salary" 的 <oj-input-number> 元素：

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    移除造成鍵盤陷阱的 on-blur 屬性。

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. 儲存檔案。然後重複上一個識別鍵盤陷阱工作中的步驟，以確保已移除鍵盤陷阱。

  4. 當您到達管理者 ID 欄位時，請按 <Tab>，將焦點移至工作圓鈕。

    根據 <oj-radioset> 元素的鍵盤說明文件，請使用 <up arrow> 來選取群組中的上一個按鈕。使用 <down arrow> 來選取群組中的下一個按鈕。

  5. 按 <Tab>，將焦點移至頁面頁尾區段中的關於 Oracle 連結。

  6. 撤銷處理程序。按 <Shift+Tab> 以返回工作圓鈕。繼續按 <Shift+Tab> 即可在使用者功能表中將頁面往回移動至 john.hancock@oracle.com 。

如果您有任何關於在 Oracle JET 元件中使用或瀏覽之必要按鍵組合的問題，請務必參閱 Oracle JET Keyboard and Gestures Guide 。

僅鍵盤測試階段已完成。

下一步

繼續本模組的下一個教學課程。

本教學課程是識別輔助功能問題模組的一部分。

您可以返回輔助功能學習路徑的主頁面，以存取所有輔助功能模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。