建立無障礙的最適化表單 creating-accessible-adaptive-forms

Adobe 建議使用新式且可擴充的資料擷取核心元件,用來建立新的最適化表單將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步,可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

簡介 introduction

可存取的表單是所有人都能使用的表單,包括有特殊需求的使用者。 最適化Forms包含多項功能,可提升不同功能使用者的可用性。 將協助工具建置到調適型表單中,不僅可讓內容有儘可能廣泛的閱聽眾,而且在必須遵循協助工具標準的地理位置提供檔案時,這也是必要條件。 AEM Forms可協助表單開發人員遵守協助工具標準。

製作最適化表單時,作者應考量下列幾點,以建立無障礙的最適化表單:

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

必備條件

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

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

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

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

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

下載並安裝Ultraminary-Access主題

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

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

讓最適化表單可供存取

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

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

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

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

套用無障礙主題後,請執行以下列出的其他修正。 除了協助工具主題中涵蓋的協助工具修正之外,這些修正也包括:

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

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

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

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

    如何套用標頭樣式

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

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

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

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

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

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

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

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

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

2.為表單控制項提供適當的標籤 provide-proper-labels-for-form-controls

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

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

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

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

表單元件中的協助工具選項 accessibility-options-in-form-components

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

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

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

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

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

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

NOTE
  • [Radio Button]和[Check-box]只能有兩個協助工具選項,即[Custom Text]和[Title]。
  • 對於XFA型調適型表單,協助工具選項繼承自XDP中設定的協助工具選項。 XDP的工具提示會對應至簡短說明,而標題會對應至標題。 其他選項則可正常運作。

3.提供影像的等效文字 provide-text-equivalents-for-images

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

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

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

影像的替代文字

4.提供足夠的色彩對比 provide-sufficient-color-contrast

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

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

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

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

5.確認可使用鍵盤存取表單控制項 ensure-that-form-controls-are-keyboard-accessible

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

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回報的問題。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2