複雜 Oracle JET 元件中的測試鍵盤導覽

簡介

這是我們第一次在 ACCLearningPath 應用程式中查看「部門」標籤。此輔助功能系列中前一個學習路徑所概述的審核程序會遵循以識別任何輔助功能問題。

目標

在本教學課程中，您將瞭解如何在 ACCLearningPath 應用程式的「部門」頁籤中識別並修正存取性問題。

必要條件

作業 1：複查頁面結構

  1. 在您的終端機視窗中，瀏覽至 ACCLearningPath 資料夾並執行應用程式。

    $ ojet serve

    瀏覽器中的應用程式會開啟「簡介」頁面並載入「總覽」頁籤。

  2. 按一下頁籤列中的「部門」頁籤，然後評估頁面結構。「部門」頁面包含三個面板，每個面板使用各種 Oracle JET 元件來顯示部門資料。

    之前的部門頁標

    圖解 departments_tab_before.png 的說明

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

  4. 在檔案中尋找主要 <div> 標記。

    <div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

  5. 在兩個 <div> 標記之間插入 h3 標題，以識別「部門」頁面。

    <div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

  6. 尋找定義含有影片擷取之中間面板的 <div> 標記。

    <div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

  7. 在開頭 <div> 與 <oj-filmstrip> 標記之間插入 h4 標題，以識別面板並提供影片的可見標籤。

    <div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

  8. 找出構成包含資料網格之左側面板的 <div> 標記。

    <div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

  9. 在 <div> 和 <oj-data-grid> 標記之間插入 h4 標題，以識別面板並提供資料網格的可見標籤。

    <div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

  10. 尋找組成包含圖表之第三個面板的開頭 <div> 標記。

    <div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
      . . . >

  11. 在開頭 <div> 與 <oj-chart> 標記之間插入 h4 標題。此標題識別面板並做為圖表的視覺標籤。

    <div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <h4>Salaries by Department</h4>
   <oj-chart id="pieChart"
      type="bar"
      data="[[chartDataProvider]]"
      animation-on-display="auto"
      animation-on-data-change="auto"
      . . . >

  12. 儲存檔案。在瀏覽器中，驗證您應用程式「部門」標籤的變更。

    部門頁籤 - 晚於

    圖解 departments_tab_after.png 的說明

作業 2：執行僅限鍵盤測試

輔助功能複查的第二部分是執行應用程式「部門」頁標的僅限鍵盤測試。

  1. 按 <Ctrl+L> 將焦點設在網址列上。

  2. 按 <Tab>。「焦點」會移至略過瀏覽連結。

  3. 按 <Tab>。「焦點」會移至頁面右上方使用者功能表中的 john.hancock@oracle.com 。

  4. 按 <Tab>。「焦點」會立即移至使用者功能表下方導覽功能表中的簡介。

  5. 按 <Tab>。「焦點」會移至頁籤列中的總覽。

  6. 按 <Tab>。「焦點」會移至影片片段中的會計。

  7. 按下 <right arrow> 移至影片中的下一個項目 Research 。

  8. 按下 <left arrow> 可移回影片中的會計。

  9. 請按三次 <right arrow>。「焦點」會移至影片片段中的最後一個項目：作業。

  10. 按 <Tab>。「焦點」會移至資料方格中第一個資料儲存格的 Id 資料欄底下。焦點儲存格的值為 10。

  11. 按 <right arrow>。「焦點」會移至資料方格 ( 名稱 ) 第二個資料欄下的會計。

  12. 按 <right arrow>。「焦點」會移至資料方格 ( 位置 ) 最終資料欄中的紐約。

    請注意，焦點大綱會出現在包含城市名稱的儲存格周圍。

  13. 按 <F2>。焦點大綱會緊貼在儲存格中的文字 New York 。

    根據 <oj-data-grid> 元素的鍵盤文件，使用 <F2> 讓儲存格的內容可作用。<F2> 函數鍵可讓您起始作用中元件支援的動作。在此情況下，儲存格包含您將啟用的 Google 地圖連結。

  14. 按下 <Enter> 以啟用紐約連結。新的瀏覽器視窗會開啟至紐約的「Google 地圖」頁面。

  15. 按下 <Ctrl+F4> 以關閉「Google 地圖」視窗。

  16. 按 <Esc>。焦點外框可延伸至第三個資料欄中包含 New York 的儲存格。

    根據 <oj-data-grid> 元素的鍵盤說明文件，使用 <Esc> 結束可作用模式，讓您繼續瀏覽至其他元件。

  17. 按 <Tab>。「焦點」會移至長條圖的第一個長條。

作業 3：執行螢幕讀取器驗證

輔助功能複查的最終部分是畫面讀取器驗證。下列驗證步驟是以使用 JAWS 螢幕助讀程式為基礎，但如果您使用 NVDA 螢幕助讀程式，結果將會類似。

  1. 在終端機視窗中，按 <Ctrl+C> 結束執行中的應用程式，如果出現提示，請輸入 y。

  2. 啟動您的螢幕閱讀器，然後重新啟動 Web 應用程式。

    $ ojet serve

    您的應用程式會自動在瀏覽器中開啟，在頁面完整載入後螢幕閱讀器就會開始閱讀。

  3. 按一下頁標列中的「部門」頁標。請勿在此時間點後使用滑鼠。

  4. 按 <Ctrl+L> 將焦點設定為位址列。

  5. 按 <Tab>。JAWS 讀取，「略過主內容」。相同頁面連結。

  6. 按 <Tab>。JAWS 表示：「橫幅區域」。工具列。john.hancock@oracle.com 按鈕功能表。按空白鍵可啟用功能表，然後使用方向鍵進行瀏覽。」

  7. 按 <Tab>。JAWS 表示：「導覽區域頁籤」。已選取「簡介」頁籤。1/2。」

  8. 按 <Tab>。JAWS 表示：「主要區域頁籤」。已選取「部門」頁標。4 之 4。

  9. 按 <Tab> 將焦點移至底片。JAWS 表示：「會計。紐約 3 名員工。顯示第 1 頁 (共 4 頁)。

  10. 按下 <Tab> 以將焦點移至資料網格。JAWS 表示：「這是具有 4 個資料列和 3 個資料欄的資料方格。ID。名稱。位置。讀取資料欄標頭之後，畫面讀取器會從左至右讀取表格的 Databody 儲存格。然後它會讀取目前的焦點「資料列 1」。資料欄 1。ID:10。

  11. 按 <right arrow>。JAWS 表示：「資料欄 2」。名稱：會計。

  12. 按 <right arrow>。JAWS 表示：「資料欄 3」。地點：紐約。包含控制項。已到達最後一欄。」

  13. 按 <Tab>。JAWS 表示：「資料視覺化：圖表。圖形。系列：會計；群組：部門；值：USD 3,750.00。圖形。

    請注意，當焦點在面板之間移動時，JAWS 不會指出面板標題。也無法將影片從頁面捲動至頁面。

  14. 在您的程式碼編輯器中開啟 departments.html 檔案。

  15. 尋找開頭的 <oj-film-strip> 標記並新增 aria-label 屬性。

    <oj-film-strip id="deptFilmstrip"
   max-items-per-page="1"
   aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
   arrow-visibility="hidden"
   class="demo-stretch-items"
   . . . >

  16. 尋找開頭的 <oj-data-grid> 標記並新增 aria-label 屬性。

    <oj-data-grid id="datagrid"
   style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
   aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
   data="[[dgDataProvider]]"
   header.column.style="[[getCellWidth]]"
   . . . >

  17. 尋找開頭的 <oj-chart> 標記並新增 aria-label 屬性。

    <oj-chart id="pieChart"
   type="bar"
   aria-label="Salaries by Department bar chart"
   data="[[chartDataProvider]]"
   animation-on-display="auto"
   animation-on-data-change="auto"
   . . . >

    最終變更涉及中間面板中影片的分頁控制項。

  18. 尋找結尾的 </oj-film-strip> 和 </oj-bind-if> 標記。

          </oj-film-strip>
   </div>
</div>
</oj-bind-if>

  19. 新增分頁控制項，並將 div 元素括在結尾 </div> 與 </oj-bind-if> 標記之間。

          </oj-film-strip>
   </div>
</div>
<div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
   <div class="oj-flex-item">
      <div style="text-align: center;">
      <div style="display: inline-block;margin-top: 4px;">
         <oj-paging-control id="pagingControl"
            aria-controls="deptFilmstrip"
            data="[[pagingModel]]"
            page-size="0"
            page-options='{"type": "dots"}'>
         </oj-paging-control>
      </div>
      </div>
   </div>
</div>
</oj-bind-if>

  20. 儲存檔案。您的檔案應類似 departments-html.txt 。

  21. 重新執行螢幕閱讀器驗證。確保底片、資料網格和圖表都會使用標籤，並且在底片下方會出現分頁控制項。

您已完成應用程式輔助功能系列學習路徑中的最終教學課程。

其他學習資源

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

如需產品文件，請瀏覽 Oracle Help Center。