測試 Oracle JET App 以進行輔助功能：視覺檢驗

簡介

Web Content Accessibility Guidelines (WCAG) 2.2 包含一組超過 60 個建立可存取 Web 應用程式的成功條件。在此學習路徑中，我們會將重點放在下列主要重點的條件子集：

本教學課程著重於測試應用程式開始的位置：視覺檢驗。此教學課程和之後的兩個教學課程：測試 Oracle JET App for Keyboard-Only Accessibility 和在 Oracle JET App 上執行螢幕閱讀器驗證，將會逐步引導您完成必要的測試步驟。您必須先完成這三個測試教學課程，才能繼續學習路徑。

評估 Web 應用程式輔助功能的第一個步驟是執行應用程式的視覺複查。在複查期間，尋找下列項目：

目標

在本教學課程中，您將瞭解如何執行 Web 應用程式的手動輔助功能測試，以及瞭解 Oracle JavaScript 稽核架構如何協助找出輔助功能問題。

必備條件

工作 1：準備入門應用程式

我們正在此學習路徑中使用 Oracle JET 13.0 Nav 抽屜入門應用程式。

  1. 在您要應用程式所在的檔案系統中，將下載的 ACCLearningPath.zip 擷取至 ACCLearningPath 資料夾中。

  2. 開啟終端機視窗，確認已安裝最新版本的 Oracle JET 命令行介面 (CLI) (需要 13.0 或更新版本)。

    $ ojet --version

    如果顯示最新版本的 Oracle JET CLI，則安裝正確無誤。如果不是，請使用您平台的 npm install 命令重新安裝。

    • Windows：

       $ npm install -g @oracle/ojet-cli

    • 若為 Mac 與 Linux 系統：

       $ sudo npm install -g @oracle/ojet-cli

      安裝完成後，Oracle JET CLI 會顯示所有變更的摘要。

  3. 瀏覽至 ACCLearningPath 目錄並回復 Oracle JET 應用程式工具。

    $ ojet restore

  4. 執行應用程式。

    $ ojet serve

    Oracle JET 工具會在本機 Web 瀏覽器中執行您的應用程式。瀏覽器會開啟應用程式的「簡介」頁面，並載入「概觀」頁籤。應用程式已可供使用。

    讓終端機視窗與瀏覽器保持開啟，讓您的應用程式能夠自動更新任何您所做的變更。

工作 2：稽核應用程式

「Oracle JET 稽核架構 (JAF)」是一個命令行公用程式和支援的 API，其設計用來稽核 Oracle JET 應用程式的檔案 (根據其在組態檔中找到的程式實際執行選項)。應用程式稽核所傳回的診斷訊息，衍生自應用程式 JET 發行版本特定的內建規則集。不過，稽核架構是可擴充的，使用者可以撰寫自訂規則來擴充其功能。

Oracle JAF 稽核可協助識別應用程式中的輔助功能和其他問題，但在 ACCLearningPath 應用程式中找不到我們將解決的所有輔助功能問題。這就是為什麼除了稽核應用程式之外，您還應該遵循此識別輔助功能問題學習路徑中概述的程序和步驟來尋找及解決輔助功能問題。JAF 稽核應在讓範例應用程式可供存取的一開始執行，以便在開始工作之前識別您應用程式中的潛在問題。如需有關 Oracle JAF 的詳細資訊，請參閱使用及擴充 Oracle JET 稽核架構。

下載並在 CLI 模式中使用 Oracle JAF 來檢查輔助功能問題。

  1. 使用 npm 來安裝 Oracle JAF CLI。

    開啟終端機視窗，並檢查已安裝的 Oracle JAF 版本。

    $ ojaf -v

    如果未安裝或您的 JAF 版本不是目前的版本，請解除安裝較舊的版本並安裝最新的版本。

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. 瀏覽至您應用程式的 ACCLearningPath 目錄，並使用 --init 命令行旗標來初始化預設 JAF 組態。

    $ ojaf --init

    此工具會鷹架 ACCLearningPath 目錄中的預設 JAF 組態檔 oraclejafconfig.json，並根據 JET 應用程式組態檔 oraclejetconfig.json (也位於應用程式的根目錄) 定義預設組態設定值。

  3. 在編輯器中開啟 oraclejafconfig.json，並確定 jetVer 特性的值對於要稽核的 JET 版本 (例如 13.0、13.1 等等) 是正確的。

    "builtinJetRules": true,
   "jetVer": "13.0",

    您可以在 oraclejafconfig.json 檔案中新增或修改 JAF 特性來自訂您的應用程式稽核。如需組態選項的完整說明，請參閱關於 Oracle JAF 組態檔特性。

  4. 在您第一次稽核應用程式之前，可以使用 --dryrun 命令行旗標，確認 JAF 將稽核之檔案的預設組態。

    $ ojaf --dryrun

    模擬測試不會稽核應用程式，但會根據目前的 JAF 組態設定值來確認要稽核的檔案。

    注意：您可以輸入 ojaf --help 命令，取得完整的命令行旗標清單。

  5. 輸入呼叫 JAF 稽核公用程式的命令來執行應用程式稽核。

    $ ojaf

  6. 當您執行稽核時，Oracle JAF 會搜尋目錄中的 oraclejafconfig.json，並建立稽核報表。

    此報表將列出在應用程式中發現的規則中斷問題，以及其在應用程式檔案中的位置。此外，報告還包括發現問題的摘要及其嚴重性、稽核的規則以及稽核的檔案。

    JAF 稽核報表

    在稽核報表的問題清單中，請注意 departments.html 檔案中找到的嚴重度層次 blocker 問題：'aria-label' or 'aria-labelledby' missing on <oj-film-strip>。

    應用程式中的影片帶元件缺少 aria-label 特性，這可防止螢幕助讀程式存取元件的識別。這是我們將在後續教學課程中解決的輔助功能問題之一。

這是此學習路徑中 Oracle JAF 的討論結束。當您完成稽核應用程式時，請記得從 ACCLearningPath 目錄刪除資料夾 jaftmp@ 和檔案 oraclejafconfig.json。

作業 3：複查頁面結構

頁面結構是應用程式視覺檢查的邏輯起點。HTML 標題提供頁面內容的大綱，而不將焦點放在特定項目。螢幕助讀程式提供捷徑，讓使用者能夠快速地在適當的標記標題之間移動。

使用 ACCLearningPath 應用程式來複查頁面結構。

  1. 在執行的應用程式中，決定頁面區段是否由標題識別。

    標題文字較大或樣式，與頁面上的一般文字不同。使用 <h1> 到 <h6> 標記來建立真正的 HTML 標題。

  2. 決定每個標題的文字是否適當地描述與其相關的內容。

    查看「簡介 (Introduction)」頁面的「總覽 (Overview)」頁籤。第三個最右邊的面板有文字間距標題。此面板的內容與調整文字間距有關。因此，此標題為足夠描述性標題的範例。

  3. 使用 Chrome DevTools 元素頁籤來決定標題是真實的 HTML 標題，還是設計用來類似它們的文字。

    • 在標題簡介頁面上按一下滑鼠右鍵，然後從相關內容功能表中選取檢查，以檢視頁面的「文件物件模型 (DOM)」結構。

      DOM 樹狀結構中醒目提示的元素 (顯示在 DevTools 元素窗格中) 會採用建立 HTML 標題的正確方法。

       <h4>The Introduction Page</h4>

    • 關閉 DevTools，然後在標題資源頁面上按一下滑鼠右鍵，然後從內容功能表中選取檢查。

      此 DOM 樹中反白的元素是類似 HTML 標題的文字樣式。

       <span class="h4Style">The Resources Page</span>

      螢幕助讀程式將無法偵測此程式碼作為標題。螢幕閱讀器使用者通常會依標題瀏覽頁面，且會忽略樣式為類似標題的文字。在下列步驟中，您將修正編碼錯誤的標題。讓您的應用程式保持執行狀態並開啟瀏覽器，以觀察下列變更如何影響應用程式。

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

  5. 尋找 <span class="h4Style"> 標記。

  6. 將 <span class="h4Style"> 標記取代為 <h4> 標記。

  7. 將 </span> 標記取代為 </h4> 標記。

  8. 儲存檔案並在瀏覽器中檢視您應用程式的變更。

作業 4：複查頁面標題

應用程式的視覺檢查包含頁面標題有效性的評估。

瀏覽執行中的入門應用程式，並查看每個頁面標題。

  1. 決定頁面標題是否清楚識別頁面、頁籤以及應用程式名稱。

  2. 在頁面之間或「簡介」頁面中的頁籤之間瀏覽時，決定頁面標題是否會變更。

    每個顯示的新頁面或頁籤的頁面標題應該變更。例如，在頁面右上方的主功能表中選取簡介時，標題必須閱讀「簡介」，選取資源時，標題應該是「資源」。

    「簡介」頁面的標題應同時包含「簡介」和目前選取之頁籤的名稱。當您從分頁列選取不同的分頁時，標題應該會變更以反映新選取的分頁。

    • 簡介 - 概要
    • 簡介 - 組織
    • 簡介 - 員工
    • 簡介 - 部門

    同樣地，「資源」頁面標題應包含 "Resources" 這個字。

    您會在頁面或頁籤之間瀏覽時，注意到頁面標題不會變更。這個問題將在稍後的教學課程中修正。

當 Web 應用程式的頁首中有如瀏覽連結與標誌等重複內容時，請包含略過瀏覽連結。產業標準建議在 Tab 鍵存取略過導覽連結之前，應該隱藏檢視中的跳過導覽連結。

測試在瀏覽器中執行的應用程式是否存在略過瀏覽連結。

  1. 在應用程式中，按 <Ctrl+L> 可將焦點移至網址列。

  2. 按 <Tab> 即可顯示略過瀏覽連結並接收焦點。

    因為不會顯示略過瀏覽連結，所以焦點會移至頁面右上角之使用者功能表中的第一個可聚焦元素：john.hancock@oracle.com 。在僅鍵盤輔助功能教學課程中更詳細地定義可聚焦元素。

    您在測試期間判斷，入門應用程式未實行略過導覽連結。

    新增略過瀏覽連結有三個步驟：

    1. 新增 index.html 檔案的連結。
    2. 新增樣式類別至 app.css 檔案，以隱藏略過導覽連結，直到定位至該連結為止。
    3. 將目標錨點新增至 intro.html 和 resources.html 檔案。

更新 index.html 檔案

index.html 檔案定義 Oracle JET Web 應用程式的覆寫結構。必須在此頁面中放置略過瀏覽連結。

  1. 瀏覽至 ACCLearningPath/src 目錄，然後在程式碼編輯器中開啟 index.html。

  2. 尋找 <body> 標記。

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. 在 <body> 標記與之後的註解之間，插入其目標為 #main 的連結。

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    除非使用者從頁面頂端開始並按 <Tab>，否則 hideSkipNav 類別將隱藏連結。

  4. 儲存並關閉 index.html。您的檔案看起來類似於 index-html.txt 。

更新 app.css 檔案

我們已經參照 index.html 檔案中的 hideSkipNav 樣式類別。現在我們需要在 app.css 中加以定義。所有自訂樣式定義都位於此檔案中。

  1. 導覽至 ACCLearningPath/src/css 資料夾並編輯 app.css。

  2. 將 .hideSkipNav 樣式類別和特性新增至檔案的結尾。

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. 儲存並關閉 app.css。您的檔案看起來類似於 app-css.txt 。

更新頁面的 HTML 檔案

由於略過導覽連結的目標應該位於每個頁面的主要內容頂端，因此請將目標錨點標記新增至「簡介」和「資源」頁面。

  1. 導覽至 ACCLearningPath/src/js/views 資料夾並編輯 intro.html 檔案。

  2. 使用 oj-hybrid-padding 類別尋找 <div>。

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. 在兩個 <div> 標籤之間插入錨點標籤和 h2 標題。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    新增的程式碼不僅提供略過瀏覽連結的目標，還提供可改善頁面結構的 h2 標題。

  4. 儲存並關閉 intro.html。您的檔案看起來類似於 intro-html.txt 。

  5. 在程式碼編輯器中開啟 resources.html，然後使用 oj-hybrid-padding 類別尋找 <div>。

    <div class="oj-hybrid-padding">
   <ul>

  6. 在 <div> 和 <ul> 標記之間插入錨點標記和 h2 標題。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. 儲存並關閉 resources.html。您的檔案看起來類似 resources-html.txt 。

  8. 在執行的應用程式中，按 <Ctrl+L> 可將焦點移至網址列。

  9. 按 <Tab> 即可顯示略過瀏覽連結並接收焦點。

  10. 按 <Enter> 即可啟用略過瀏覽連結。

    焦點隨即移至頁面的主要內容。

    測試過略過導覽連結的功能之後，請移至視覺檢驗的下一個元素。

工作 6：檢查顏色和位置的使用

按鈕是方向的一部分，可將使用者從一個頁面或動作移至下一個頁面。開發者可使用彩色按鈕來加強頁面的外觀與功能。「按綠色按鈕以繼續」為常用指示。不過，如果沒有適當的標籤，視障使用者就無法遵循這些和類似的指示。

「總覽」頁面的中央面板包含三個彩色按鈕的工具列，以及一些根據按鈕顏色和位置按下按鈕的指示。盲人或盲人使用者無法區分按鈕，因為沒有標籤或其他辨別功能。這組按鈕的成功條件 1.3.3 和 1.4.1 失敗。

使用色彩指示

中心面板中的每個彩色按鈕都必須有關聯的文字標籤。下列變更會將顏色名稱新增為按鈕的標籤。

  1. 導覽至 ACCLearningPath/src/js/views 資料夾並編輯 overview.html 檔案。

  2. 找到這組 oj-button 元素。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. 修改程式碼中的按鈕，以建立顏色識別碼。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. 儲存 overview.html 並驗證按鈕現在是否有適當的文字標籤。

    您的檔案看起來應該類似 overview-html.txt 。

工作 7：驗證可讀性

視覺檢驗的最終階段專供低視圖使用者使用。決定是否調整行、單字與字元間距，或變更頁面的縮放比例，會增加或減少可讀性。

我們將使用「總覽」頁面來說明這些條件，並驗證文字間距並放大應用程式。

確認文字間距與縮放

  1. 在執行中的應用程式中，查看頁面最右側的面板，標題為文字間距。面板包含兩個區段。比較兩個區段中的文字，以確保所有文字都存在。

    面板頂端的文字有一般間距。底部部分包含的文字與增加的字元、文字和行間距相同。

    如果下方區段中沒有任何字元失真、剪輯或重疊，則頁面會符合「成功準則 1.4.12」。

  2. 將瀏覽器的縮放比例提高至 200%。按一下工具列中的放大鏡縮放圖示，然後按一下 + 符號以增加縮放。

    如果所有文字皆可讀取，且文字在每個面板中正確換行，則頁面會符合 200% 放大率的「成功準則 1.4.4」。

    • Success Criterion 1.4.10 Reflow 狀態：「可以呈現內容而不遺失資訊或功能，而且不需要在兩個維度中捲動：
      • 垂直捲動內容，寬度相當於 320 個 CSS 像素；
      • 高度等於 256 個 CSS 像素的水平捲動內容。除了需要使用或意義之二維版面配置的內容部分之外。」

    頁面應重新格式化，以僅需要捲動一個方向。頁面會水平或垂直捲動，但不會同時捲動這兩個方向。Success Criterion 1.4.10 讓網頁更容易使用。

  3. 將縮放比例提高為 400%。

  4. 檢查頁面是否有捲動列的外觀。若水平與垂直捲動列皆出現，則頁面會失敗此準則。

初始測試階段已完成。

下一步

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

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

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

其他學習資源

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

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