驗證 Oracle JET 元件表格和訊息的輔助功能

簡介

在在 Oracle JET App 上執行螢幕閱讀器驗證教學課程中，我們解決了「員工」頁面中的數個輔助功能問題。我們將在本教學課程中解決一些問題。

目標

在本教學課程中，您將瞭解如何在 ACCLearningPath 應用程式的「員工」頁面中識別並修正其餘的輔助功能問題。

必備條件

用來建立已安裝 JavaScript 程式實際執行、Node.js 以及 Oracle JET 版本 13.0 (或更新的版本) 命令行介面之 Oracle JET 應用程式的開發環境
取用 Oracle JET 開發人員手冊
存取 Oracle JET Keyboard and Gesture Guide
完成此學習路徑中的上一個教學課程，驗證 Oracle JET 應用程式中主要明細檢視的輔助功能

作業 1：驗證頁面結構

複查中的第一個步驟是確保頁面上有所有必要的 HTML 標題。

瀏覽至終端機中的 ACCLearningPath 目錄，然後執行應用程式。
```
$ ojet serve
```
您的瀏覽器將開啟應用程式的「簡介」頁面，其中已載入「總覽」頁籤。按一下頁籤列中的「員工」頁籤，然後檢查「員工」頁面。

「員工」頁面由兩個畫面組成。頁面本身與每個面板中遺漏 HTML 標題。
瀏覽至 ACCLearningPath/src/js/views 資料夾，然後在編輯器中開啟 employees.html 檔案。

找出檔案中第一個開啟的 <div> 標記。

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

在開啟 <div> 標記之後，立即插入 h3 標題來識別「員工」頁面。

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

尋找構成左側面板且包含表格的開始 <div> 標記。

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

在開啟的 <div> 和 <oj-table> 標記之間，插入 h4 標題以正確標示此面板。

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

編輯 <oj-table> 元素的 aria-label 屬性，以同時包含標題文字與顯示在第二個面板中的說明文字。
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
表格現在同時遵循 WCAG Success Criterion 2.5.3 Label in Name 和 WCAG Success Criterion 1.3.1 Info and Relationship 。若要符合這些準則，控制項的口語標籤中必須包含視覺標籤與右側面板中的說明文字。

尋找定義「員工」頁面右側面板且將保存員工詳細資料的開始 <div> 標記。

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

在 <div> 和 <oj-bind-if> 標記之間，在水平規則下方插入 h4 標題，以識別此面板。

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

儲存檔案。您的檔案看起來應該類似於 employees-page-html.txt 。
請確認您在執行中 App 中套用的變更。

工作 2：執行僅鍵盤測試

此區段和下列執行本教學課程的螢幕閱讀器測試部分，不需要使用滑鼠即可完成。在此測試期間，請確保始終能夠清楚識別焦點，並預測 Tab 鍵順序。

在「員工」頁面中，按 <Ctrl+L> 將焦點設為地址列。
按 <Tab>。焦點會移至略過瀏覽連結。
按 <Tab>。焦點會移至頁面右上角的使用者功能表中的 john.hancock@oracle.com 。
按 <Tab>。焦點會移至使用者功能表下方主瀏覽功能表中的簡介。
按 <Tab>。焦點會移至頁籤列中的總覽。
按 <Tab>。焦點會移至「員工表」中的第一個欄標頭 Employee Number 。
按 <down arrow> 將焦點置於表格的第一個資料列。

「員工詳細資料」表單應出現在頁面右側的面板中。
按 <Space> 以選取列，然後按 <F2> 以將焦點移至第一個可定位元素 ( 編輯按鈕)。
按 <Space> 即可啟用編輯按鈕。就會開啟「編輯員工」對話方塊，並將焦點移至員工 ID 欄位。
按 <Tab>。焦點會移至員工姓名欄位。
按 <Tab>。焦點會移至職稱欄位。
按 <Tab>。焦點會移至僱用日期欄位。
按 <Tab>。焦點會移至薪資欄位。
按 <Tab>。焦點會移至儲存按鈕。
按 <Space> 以啟用儲存按鈕並關閉對話方塊。焦點會移回「員工表」中選取的第一個資料列。

請注意頁面左上角的訊息方塊。訊息方塊提供確認已儲存更新的確認。

螢幕放大軟體會將焦點放在「員工表」上，因此確認訊息可能位於放大鏡的視埠外。
導覽至 ACCLearningPath/src/js/viewModels 資料夾並編輯 employees.js。

尋找 this.positionObject 的定義。

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

修改 positionObject 定義，讓物件的位置以表格而非視窗為基礎。
```
  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };
```
儲存檔案。然後重複僅鍵盤測試的步驟 1 到 15，以確認確認訊息的位置已移至表格中。

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

在終端機視窗中，按 <Ctrl+C> 結束執行中的應用程式，如果出現提示，請輸入 y。
啟動螢幕助讀程式，然後重新啟動 Web 應用程式。
```
$ ojet serve
```
您的應用程式將自動在您的瀏覽器中開啟；一旦頁面完全載入，螢幕助讀程式就會開始閱讀。
按一下頁籤列中的「員工」頁籤。請不要在此刻之後使用滑鼠。
按 <Ctrl+L> 可將焦點設為網址列。
按 <Tab>。JAWS 讀取，「跳到主要內容」。相同的頁面連結。」
按 <Tab>。JAWS 表示：「橫幅區域」。工具列。john.hancock@oracle.com 按鈕功能表。按空格鍵以啟用功能表，然後使用方向鍵進行瀏覽。」
按 <Tab>。JAWS 表示：「導覽區域」頁籤。已選取「簡介」頁標。第 1 頁，共 2 頁。」
按 <Tab>。JAWS 說：「主要區域」頁籤。已選取「員工」頁標。第 3 頁，共 4 頁。」
按 <Tab>。JAWS 表示：「有 6 個資料欄且超過 13 個資料列的表格。員工表格 - 啟動列以查看員工詳細資料。欄位表頭 1，員工編號。」焦點會移至表格欄標題列中的第一個儲存格。
按 <down arrow>。JAWS 表示：「列 1:7839。未選取。第 1 欄，員工編號：7839。焦點位於表格的第一個資料列中。
按 <right arrow>。JAWS 表示欄編號與員工使用者名稱。
按 <Space>。已選取資料列，JAWS 表示「空格」。已選取。」
按 <F2> 即可移至第一個可定位元素。JAWS 表示：「編輯」按鈕。若要啟用，請按 Enter 鍵。
按 <Enter>。JAWS 表示：「編輯員工。編輯僱員。員工 ID 7,839 … " 螢幕助讀程式會開啟 [ 編輯員工 ] 對話方塊，並且會繼續閱讀，直到按下按鍵為止。
按 <Tab> 五次，將可編輯和唯讀欄位移至儲存按鈕。JAWS 說：「儲存」按鈕。若要啟用，請按 Enter 鍵。
按 <Enter>。JAWS 說：「訊息類別：確認」。已儲存更新。已儲存員工 Onegin 的變更。」您應用程式中的員工使用者名稱可能會因先前教學課程所做的編輯而有所不同。
按 <F6> 以讀取訊息方塊內容。JAWS 表示：「訊息補充區域。已儲存更新。輸入訊息區域。按 F6 即可回到先前的焦點元素。」
按 <Tab>。JAWS 說：「關閉」按鈕。若要啟用，請按 Enter 鍵。
按 <Enter> 以關閉訊息方塊。焦點會返回表格和先前選取的儲存格。
停止您的螢幕助讀程式。
在您的終端機視窗中，按 <Ctrl+C> 結束應用程式，如果出現提示，請輸入 y。

這完成了第三組輔助功能修正。

下一步

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

此教學課程是驗證並修正應用程式輔助功能模組的一部分。

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

其他學習資源

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

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

標題與著作權資訊

Verify the accessibility of Oracle JET components table and message

F58365-02

Oracle 和 (或) 其關係企業。