複雜 Oracle JET 元件中的測試鍵盤導覽
簡介
這將是我們第一次瀏覽 ACCLearningPath 應用程式中的「部門」頁籤。此輔助功能系列中先前學習路徑所概述的複查程序，是用來識別任何輔助功能問題。
目標
在本教學課程中，您將瞭解如何在 ACCLearningPath 應用程式的「部門」頁籤中識別及修正輔助功能問題。
必備條件
- 用來建立已安裝 JavaScript 程式實際執行、Node.js 以及 Oracle JET 版本 13.0 (或更新的版本) 命令行介面之 Oracle JET 應用程式的開發環境
- 取用 Oracle JET 開發人員手冊
- 存取 Oracle JET Keyboard and Gesture Guide
- 完成此學習路徑的上一個教學課程，驗證 Oracle JET 元件表格與訊息的輔助功能
作業 1：複查頁面結構
-
在您的終端機視窗中，瀏覽至
ACCLearningPath資料夾並執行應用程式。$ ojet serve瀏覽器中的應用程式會開啟「簡介」頁面，其中已載入「概觀」頁籤。
-
按一下頁籤列中的「部門」頁籤，並評估頁面結構。「部門」頁面由三個面板組成，其中每個面板都使用各種 Oracle JET 元件顯示部門資料。
-
瀏覽至
ACCLearningPath/src/js/views資料夾，然後在程式碼編輯器中開啟departments.html檔案。 -
在檔案中尋找主要
<div>標記。<div class="oj-hybrid-padding"> <div id="mainContainer" class="oj-flex" style="width:100%;"> -
在兩個
<div>標記之間插入h3標題，以識別「部門」頁面。<div class="oj-hybrid-padding"> <h3>Departments</h3> <div id="mainContainer" class="oj-flex" style="width:100%;"> -
尋找定義中間面板 (包含影片) 的
<div>標記。<div class="oj-flex-item fs-container"> <oj-film-strip id="deptFilmstrip" max-items-per-page="1" . . . > -
在開啟的
<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” . . . > -
尋找構成包含資料方格之左側面板的
<div>標記。<div class="oj-flex-item"> <oj-data-grid id="datagrid" style="width:100%; min-width:400px; height:200px; margin-bottom:5px" . . . > -
在
<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" . . . > -
尋找構成包含圖表之第三個面板的開始
<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" . . . > -
在開頭的
<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" . . . > -
儲存檔案。在瀏覽器中，驗證您應用程式之「部門」頁籤的變更。
工作 2：執行僅鍵盤測試
輔助功能複查的第二部分是針對應用程式的「部門」頁籤執行僅鍵盤的測試。
-
按
<Ctrl+L>即可將焦點設為網址列。 -
按
<Tab>。焦點會移至略過瀏覽連結。 -
按
<Tab>。焦點會移至頁面右上角的使用者功能表中的 john.hancock@oracle.com 。 -
按
<Tab>。焦點會移至使用者功能表下方的導覽功能表中的簡介。 -
按
<Tab>。焦點會移至頁籤列中的總覽。 -
按
<Tab>。焦點會移至影片片段中的會計。 -
按
<right arrow>可移至影片區中的下一個項目 Research 。 -
按
<left arrow>以返回影片帶中的會計。 -
按
<right arrow>三次。焦點會移至影片片段作業中的最後一個項目。 -
按
<Tab>。焦點會移至資料方格中 Id 資料欄下的第一個資料主體儲存格。焦點儲存格的值為 10。 -
按
<right arrow>。焦點會移至資料方格名稱第二欄下的會計。 -
按
<right arrow>。焦點會移至資料方格位置的最後一個欄中的紐約。請注意，焦點輪廓會出現在包含城市名稱的儲存格周圍。
-
按
<F2>。焦點大綱僅圍繞儲存格中的文字 New York 。根據
<oj-data-grid>元素的鍵盤文件，使用<F2>讓儲存格的內容可以執行。<F2>函數鍵可讓您起始作用中元件支援的動作。在此情況下，儲存格會包含您將啟用的「Google 地圖」連結。 -
按
<Enter>以啟用 New York 連結。新的瀏覽器視窗便會開啟至紐約的 Google Maps 頁面。 -
按
<Ctrl+F4>以關閉「Google 地圖」視窗。 -
按
<Esc>。焦點會加寬以圍繞第三欄中包含 New York 的儲存格。根據
<oj-data-grid>元素的鍵盤說明文件，使用<Esc>結束可操作模式，讓您繼續瀏覽至其他元件。 -
按
<Tab>。焦點會移至長條圖中的第一個長條。
工作 3：執行螢幕讀取器驗證
輔助功能複查的最後一個部分是畫面讀取器驗證。下列驗證步驟是以使用 JAWS 螢幕助讀程式為基礎，但如果您使用 NVDA 螢幕助讀程式，結果將會類似。
-
在終端機視窗中，按
<Ctrl+C>結束執行中的應用程式，如果出現提示，請輸入y。 -
啟動螢幕助讀程式，然後重新啟動 Web 應用程式。
$ ojet serve您的應用程式將自動在您的瀏覽器中開啟；一旦頁面完全載入，螢幕助讀程式就會開始閱讀。
-
按一下頁籤列中的「部門」頁籤。請不要在此刻之後使用滑鼠。
-
按
<Ctrl+L>可將焦點設為網址列。 -
按
<Tab>。JAWS 讀取，「跳至主要內容」。相同的頁面連結。」 -
按
<Tab>。JAWS 表示：「橫幅區域」。工具列。john.hancock@oracle.com 按鈕功能表。按空格鍵以啟用功能表，然後使用方向鍵進行瀏覽。」 -
按
<Tab>。JAWS 表示：「導覽區域」頁籤。已選取「簡介」頁標。第 1 頁，共 2 頁。」 -
按
<Tab>。JAWS 說：「主要區域」頁籤。已選取部門頁標。4 之 4。」 -
按
<Tab>將焦點移至底片。JAWS 說：「會計」。紐約。3 名員工。顯示第 1 頁，共 4 頁。」 -
按
<Tab>可將焦點移至資料方格。JAWS 表示：「這是包含 4 列與 3 欄的資料方格。ID。名稱。地點。」讀取資料欄標頭之後，螢幕助讀程式會從左至右讀取表格的資料主體儲存格。然後，它會讀取目前的焦點「資料列 1」。資料欄 1。ID:10。」 -
按
<right arrow>。JAWS 說：「第 2 欄。名稱：會計。 -
按
<right arrow>。JAWS 說：「第 3 欄。地點：紐約。包含控制項。您已到達最後一個資料欄。」 -
按
<Tab>。JAWS 表示：「資料視覺化：圖表」。圖形。系列：會計；群組：部門；值：USD 3,750.00。圖形。請注意，當焦點在面板之間移動時，JAWS 不會顯示面板標題。沒有辦法將影片從頁面捲動到頁面。
-
在程式碼編輯器中開啟
departments.html檔案。- 成功條件 4.1.2 名稱、角色、值要求三個面板中的每個元件都有一個相關聯的標籤。第 4 級標題可做為可見的標籤。
- 名稱中的成功條件 2.5.3 標籤需要將標題的整個文字包含在標籤中。在下列步驟 18 到 23 中新增的
aria-label屬性會併入面板的標題文字。
-
尋找開始的
<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" . . . > -
尋找開始的
<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]]" . . . > -
尋找開始的
<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" . . . >最終變更涉及中間面板中影片帶的分頁控制項。
-
尋找結束的
</oj-film-strip>和</oj-bind-if>標記。</oj-film-strip> </div> </div> </oj-bind-if> -
在關閉的
</div>和</oj-bind-if>標記之間新增分頁控制項和周圍div元素。</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> -
儲存檔案。您的檔案看起來類似於
departments-html.txt。 -
重新執行螢幕助讀程式驗證。確保在影片、資料方格和圖表中朗讀標籤，並在影片片段下方顯示分頁控制項。
下一步
本教學課程總結了 Web 應用程式輔助功能上此學習路徑中的驗證並修正應用程式輔助功能模組。
- 自訂互連生命週期事件
- 驗證 Oracle JET 應用程式中主要明細檢視的輔助功能
- 驗證 Oracle JET 元件表格和訊息的輔助功能
- 複雜 Oracle JET 元件中的測試鍵盤導覽
您可以返回輔助功能學習路徑的主頁面，以存取輔助功能的所有模組，以及其他學習路徑。
其他學習資源
在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。
如需產品文件，請造訪 Oracle Help Center 。
Test keyboard navigation in complex Oracle JET components
F58358-02