建立無障礙的最適化表單

Adobe建議使用現代化且可擴充的資料擷取 核心元件建立新的Adaptive Forms將最適化Forms新增至AEM Sites頁面. 這些元件代表最適化Forms建立工作取得重大進展,可確保提供令人驚歎的使用者體驗。 本文說明使用基礎元件製作最適化Forms的舊方法。

簡介

無障礙表單是每個人都能使用的表單,包括有特殊需求的使用者。 最適化Forms包含許多特色和功能,可提升不同功能使用者的可用性。 在最適化表單中建立協助工具,不僅可讓內容有儘可能廣泛的受眾,而且在必須遵循協助工具標準的地理位置提供檔案時,這也是必須具備的條件。 AEM Forms說明表單開發人員符合協助工具標準。

編寫調適型表單時,作者應考量以下幾點,以建立無障礙調適型表單:

  • 使用協助工具名稱和說明檢查器(ANDI)協助工具檢查表單
  • 為表單控制項提供適當的標籤
  • 提供影像的對等文字
  • 提供足夠的色彩對比
  • 確保可使用鍵盤存取表單控制項

必備條件

您需要協助工具,例如 可存取的名稱和說明檢查器(ANDI)為解決協助工具相關問題而開發的最適化表單主題 以建立無障礙的最適化表單。

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

可存取的名稱和說明檢查器(ANDI)工具可協助您識別和修正網頁內容中與可存取性相容相關的問題。 這是美國國土安全部的Trusted Tester v5指引下的建議工具。 它由美國的社會安全管理​部開發,用於檢查網頁內容的Section 508合規性。 工具:

  • 協助偵測網頁​上的協助工具問題
  • 提供改善協助工具的建議​。
  • 偵測鍵盤協助工具及色彩對比問題
  • 清楚識別符合標準的熒幕助讀程式內容

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

下載並安裝Ultramine-Accessible主題

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

  1. 下載主題套件。
  2. 導覽至 Experience Manager > 導覽 導覽 > Forms 在您的AEM執行個體上。
  3. 點選 建立 > 檔案上傳. 選取並上傳x Ultramine-Accessible-Theme.zip檔案。 它會上傳主題至您的AEM執行個體。

讓最適化表單可供存取

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

1.套用無障礙主題並執行其他修正

將Ultraminary-Accessible主題套用至您現有的最適化表單。 若要套用主題:

  1. 開啟最適化表單進行編輯。
  2. 選取元件並點選父圖示。 在快顯選單中,點選 最適化表單容器 然後點選「設定」圖示。
  3. 在屬性瀏覽器中選取Ultramine-Accessible主題,然後點選 儲存 圖示。
  4. 重新整理瀏覽器視窗。 主題已套用至最適化表單。

套用無障礙主題後,請執行以下列出的其他修正。 這些修正是輔助功能主題中涵蓋的輔助功能修正:

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

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

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

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

    如何套用標頭樣式

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

  4. 以選擇(選項式)元件取代現有最適化表單中的切換器和影像選擇元件。

  5. 以數值方塊元件取代現有最適化表單中的數值步進器元件。

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

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

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

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

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

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

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

元件的標籤或標題可識別表單元件的代表內容。 例如,「名字」文字會告訴使用者他們必須在文字欄位中輸入名字。 為方便熒幕閱讀程式存取,標籤會以程式設計方式與表單元件相關聯。 或者,也可以使用其他協助工具資訊來設定表單控制項。

熒幕助讀程式感知到的標籤不一定與視覺註解相同。 在某些情況下,您可能會想要更明確地說明控制項的用途。 對於表單中的每個欄位物件,協助工具選項可用於指定熒幕助讀程式會朗讀的內容,以識別特定表單欄位。

若要使用「協助工具」選項,請遵循下列步驟:

  1. 選取元件並點選 cmppr.
  2. 按一下 協助工具 以選擇所需的協助工具選項。

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

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

自訂文字 表單作者在協助工具選項自訂文字欄位中提供內容。 熒幕助讀程式等輔助技術會使用此自訂文字。 在大部分的案例中,使用「標題」設定是最佳選項。 只有在無法使用標題或簡短說明時,才考慮建立自訂熒幕Reader文字。

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

標題 使用此選項可讓AEM Forms使用與表單欄位相關聯的視覺標籤作為熒幕助讀程式文字。

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

選取「無」會導致表單物件在已發佈的表單中沒有名稱。 不建議對表單控制項使用「無」設定。

注意
  • 「選項按鈕」和「核取方塊」只能有兩個協助工具選項,即「自訂文字」和「標題」。
  • 對於XFA型調適型表單,協助工具選項繼承自XDP中設定的協助工具選項。 XDP的工具提示會對應到簡短說明,而註解則會對應到標題。 其他選項則按原樣運作。

3.提供影像的對等文字

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

請確定文字在表單中描述物件及其用途。 熒幕助讀程式會在遇到影像時讀取此替代文字。 影像必須一律指定替代文字。

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

影像的替代文字

4.提供足夠的色彩對比

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

有視覺障礙的使用者需仰賴文字與背景的高對比來閱讀數位內容。 如果沒有足夠的對比,某些使用者可能很難閱讀表單,甚至根本無法閱讀。

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

另請參閱 建立最適化表單的自訂主題,以取得有關變更最適化表單的顏色對比和主題的詳細資訊。

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

可存取的表單僅能使用鍵盤或同等輸入裝置填滿。 行動力下降或視力不良的使用者可能別無選擇,只能使用鍵盤,而許多使用滑鼠的使用者則偏好使用鍵盤輸入。 透過允許各種輸入方法,您不僅可建立無障礙的表單,還可建立更適合所有使用者偏好設定的表單。

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

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

此外,還有各種鍵盤快速鍵可供使用 日期選擇器 最適化Forms中的元件。 若要啟用快速鍵,請點選 日期選擇器 元件並點選 設定 以開啟屬性。 在 模式 區段,使用 型別圖樣 下拉式清單。 儲存屬性以啟用快捷鍵用於 日期選擇器 元件。

下列鍵盤快速鍵適用於Adaptive Forms中的日期選擇器元件:

動作 鍵盤快速鍵
  • 當索引標籤焦點反白標示行事曆圖示時,顯示日期選擇器元件選項
  • 當索引標籤焦點反白某個選項時,執行點按事件
空格或Enter
隱藏日期選擇器元件選項 Esc 鍵
  • 在日期選擇器元件中可用的選項中向前移動游標。
  • 當日期輸入欄位作用中時,將索引標籤焦點設定在行事曆圖示上
定位字元
在日期選擇器元件中可用的選項之間向後移動游標 Shift+Tab鍵
  • 當索引標籤焦點反白顯示日期輸入欄位時,顯示日期選擇器元件選項
  • 在日期選擇器元件中可用的行事曆中,將游標向下移動
向下鍵
在日期選擇器元件中可用的行事曆中,將游標向上移動 向上鍵
在日期選擇器元件中可用的行事曆中,將游標向後移動 向左鍵
在日期選擇器元件中可用的行事曆中向前移動游標 向右鍵
對行事曆中右導覽和左導覽箭頭之間的可用註解執行動作 Shift +向上鍵
執行向右導覽箭頭圖示的動作 向右鍵 在行事曆中可用 Shift +向左鍵
執行向左導覽箭頭圖示的動作 向左鍵 在行事曆中可用 Shift +向右鍵

使用協助工具來尋找剩餘的協助工具問題

協助工具名稱和說明檢查器(ANDI)可協助您識別及修正最適化表單中與協助工具相容相關的問題。 若要使用ANDI工具找出最適化表單中的協助工具問題:

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

本頁內容