建立可存取的調適性表單

簡介

可存取的表單是每個人都可以使用的表單,包括有特殊需求的使用者。 Adaptive Forms包含許多功能,可增強不同功能使用者的可用性。 將協助功能建置至最適化表單,不僅可讓內容的受眾最廣,而且在必須符合協助功能標準的地區提供檔案時,也需要這麼做。 AEM Forms可協助表單開發人員符合協助工具標準。

在製作可調式表單時,作者應考慮以下幾點,以建立可存取的可調式表單:

  • 使用協助工具名稱和描述偵測器(ANDI)協助工具檢查表格
  • 為表單控制項提供適當的標籤
  • 提供影像等效文字
  • 提供足夠的顏色對比度
  • 確保表單控制項可以鍵盤存取

先決條件

您需要協助工具(例如 Accessible Name and Description Inspector(ANDI) ),以及 ​Adaptive Form主題(專為修正協助工具相關問題而開發),以建立協助工具最適化表單。

下載並安裝協助工具測試工具

協助工具名稱和描述偵測器(ANDI)工具可協助您識別並修正網頁內容中與協助工具相容的相關問題。 這是根據美國國土安全部Trusted Tester v5准則推薦的工具。 由美國社會安全管理部​門開發,以檢查Web內容是否符合第508條。 工具:

  • 協助偵測網頁​上的協助工具問題
  • 提供改善無障礙環境支援的建​議
  • 偵測鍵盤協助功能和色彩對比問題
  • 清楚識別螢幕閱讀器內容符合標準

ANDI可與所有主要網際網路瀏覽器搭配使用。 請參閱 ANDI的檔案 ,以取得設定和使用工具的詳細指示。

下載並安裝Ultramarine-Accessible主題

Ultramarine-Accessible主題是參考主題。 它可協助示範如何以最適化表單修正色彩對比和其他協助工具相關問題。 Adobe建議您根據組織核准的樣式,為生產環境建立自訂主題。 執行下列步驟,將主題上傳至您的AEM例項:

  1. 下載主題套件。
  2. 導覽至「 Experience Manager >導覽 導覽 >您的AEM 例項」。
  3. 點選「 建立 >檔案 上傳」。 選擇並上傳x Ultramarine-Accessible-Theme.zip檔案。 它會將主題上傳至您的AEM實例。

讓可存取的最適化表單

您應著重於四個關鍵方面: 鍵盤導覽、顏色對比、影像的有意義替代文字,以及表單控制項的適當標籤,讓可存取最適化表單。 執行下列步驟,讓現有的最適化表單可供存取:

1. 套用可存取的主題並執行其他修正

將Ultramarine-Accessible主題套用至您現有的調適性表單。 若要套用主題:

  1. 開啟最適化表單以進行編輯。
  2. 選取元件並點選父圖示。 在內容選單中,點選「 最適化表單容器 」,然後點選「設定」圖示。
  3. 在屬性瀏覽器中選取「Ultramarine-Accessible」(超海洋可存取)主題,然後點選「 儲存 」圖示。
  4. 重新整理瀏覽器視窗。 該主題將應用於自適應表單。

套用可存取的主題後,請執行下列的其他修正。 這些修正除了協助工具主題中涵蓋的協助工具修正以外:

  1. 在最適化表單中為標誌影像新增有意義的替代文字。

    為最適化表單範本的頁首和頁尾元件中的影像提供有意義的替代文字。 當您修正範本並使用它建立最適化表單時,最適化表單會繼承套用至範本頁首和頁尾的所有協助工具相關修正。 對於現有的最適化表單,請在最適化表單層級進行變更。 對最適化表單範本所做的變更不會自動流向現有的最適化表單。

  2. 將包含表單名稱的標題元件添加到最適化表單。 如果您的表單設計指定公司名稱,請為公司名稱新增個別的標題元件。

    大部分的協助工具都會通知使用者內容的階層,以協助使用者瞭解網頁的結構。 在最適化表單上為組織名稱和表單名稱文字設定不同的標題層級,為這些文字提供階層式結構。 此外,請在每個面板和區段之前使用具有適當標題層級的文字元件來建立階層。

    如何套用頁首樣式

  3. 根據協助工具標準變更頁尾背景顏色以使用適當的對比,以改善文字的可見度和可讀性。 您可以使用ANDI在表單中尋找顏色對比問題。 此外,請勿使用小字型。 小字型很難閱讀。

  4. 以choice(無線電)元件取代現有自適應表單中的切換器和影像選擇元件。

  5. 將現有自適應表單中的數值步進器元件替換為數值框元件。

  6. 以日期選擇器欄位取代日期輸入欄位。

  7. 為日期選擇器元件設定顯示、驗證和編輯模式。 此外,請設定自訂驗證錯誤訊息。 例如,您指定了無效的日期。 日期的正確格式為YYYY-MM-DD。

  8. 為日期選擇器元件設定自定義輔助工具文本。 例如,輸入您的出生日期。 螢幕閱讀程式會閱讀這些自訂的協助工具文字。

  9. 針對最適化表單元件使用簡短說明,而非長篇說明。 詳細說明會新增說明按鈕。 確保最適化表單沒有任何說明按鈕。

  10. 將自訂協助工具文字新增至表格的所有唯讀儲存格。 此外,禁用表的所有只讀單元格。

  11. 移除最適化表單中的塗鴉簽名欄位(如果有的話)。 設定最適化表單,以使用Adobe Sign,提供順暢的數位簽署體驗。

2. 為表單控制項提供適當的標籤

元件的標籤或標題標識表單元件所代表的內容。 例如,文字"First name"會告訴使用者,他們必須在文字欄位中輸入其名字。 為便於螢幕閱讀器訪問,標籤以寫程式方式與表單元件相關聯。 或者,表單控制項配置有附加的可訪問性資訊。

螢幕閱讀程式所察覺的標籤不一定與視覺標題相同。 在某些情況下,您可能希望對控制項的目的有更詳細的說明。 對於表單中的每個欄位物件,可使用協助工具選項來指定螢幕閱讀程式所宣佈的,以識別特定的表單欄位。

若要使用「協助工具」選項,請依照下列步驟進行:

  1. 選取元件並點選 cmppr
  2. 按一 下側邊欄 中的「協助工具」,選擇所要的協助工具選項。

表單元件中的協助工具選項

表單元件中的協助工具選項

「自訂文字 」表單的作者會在協助工具選項「自訂文字」欄位中提供內容。 輔助技術(例如螢幕閱讀器)使用此自訂文字。 在大多數情況下,使用「標題」設定是最佳選項。 僅當無法使用「標題」或簡短說明時,才可考慮建立自訂螢幕閱讀器文字。

簡短說明 :對於大部分的元件,當使用者將指標暫留在元件上時,簡短說明會在執行時期顯示。 您可以在說明內容選項下方的簡短說明欄位中設定此選項。

Title (標題)使用此選項,讓AEM Forms將與表單欄位關聯的視覺標籤當做螢幕閱讀程式文字。

名稱 :您可以在「系結」標籤的「名稱」欄位中指定值。 名稱不能包含任何空格。

「無 」選擇「無」會導致表單對象在已發佈表單中沒有名稱。 表單控制項不建議使用無。

注意
  • 「選項按鈕」和「核取方塊」對於協助工具只能有兩個選項,即「自訂文字」和「標題」。
  • 對於基於XFA的自適應表單,輔助功能選項繼承自XDP中設定的輔助功能選項。 來自XDP的工具提示會對應至「簡短說明」,而「標題」會對應至「標題」。 其他選項的運作方式相同。

3. 提供影像等效文字

影像有助於改善部分使用者的理解。 不過,對於使用螢幕閱讀程式的使用者,影像會降低表單的協助功能。 如果您選擇使用影像,請提供所有影像的文字說明。

確保文本在表單中描述了對象及其用途。 當螢幕閱讀程式遇到影像時,會讀取此替代文字。 影像必須一律指定替代文字。

選取影像元件並點選 cmppr。 在側欄的「屬性」下,指定影像的替代文字。

影像的替代文字

4. 提供足夠的顏色對比度

協助工具設計需要考慮其他色彩使用准則。 表單製作者可以使用顏色,透過反白顯示各種表單元件來改善表單的外觀。 然而,不當使用顏色可能使不同能力的人難以或無法閱讀表格。

視覺障礙的使用者依賴文字與背景之間的高對比度來閱讀數位內容。 如果沒有足夠的對比度,某個表格可能會變得很難,甚至不可能,讓某些使用者閱讀。

建議您使用預設字型和背景顏色——在白色背景上使用黑色的內容。 如果您變更預設顏色,請選擇淺色背景顏色的深色前景顏色,或選擇淺色背景顏色的深色前景顏色,反之亦然。

如需 變更最適化表單色彩對比和主題的詳細資訊,請參閱建立自訂主題。

5. 確保表單控制項可以鍵盤存取

僅使用鍵盤或等效輸入設備即可完全填充可訪問的表單。 行動性降低或視力受損的使用者可能別無選擇,只能使用鍵盤,而許多可以使用滑鼠的使用者則偏好鍵盤輸入。 允許使用各種輸入方法,您不僅可建立可存取的表單,還可建立更符合所有使用者偏好的表單。

AEM Forms提供下列鍵盤快速鍵。

動作 鍵盤快速鍵
在表單中向前移動游標 索引標籤
在表單中向後移動游標 Shift+Tab
移至下一個面板 Alt+向右鍵
移至上一個面板 Alt+向左鍵
重設表單中填入的資料 Alt+R
提交表格 Alt+S

使用協助工具尋找其他協助工具問題

協助工具名稱和描述偵測器(ANDI)可協助您在最適化表單中識別和修正協助工具相容性相關問題。 若要使用ANDI工具,以最適化形式尋找協助工具問題:

  1. 在預覽模式中開啟最適化表單。
  2. 按一下書籤化ANDI工具圖示。 ANDI工具會分析最適化表單並顯示協助工具問題。 如需如何使用工具的詳細資訊,請參 閱ANDI的檔案
  3. 檢閱並修正ANDI回報的問題。

本頁內容