跳到主要內容
  • 字級
:::|

FM2表單輸入

規則識別碼

FM2

規則名稱

表單輸入

規則類型

原子規則

規則說明

必須指明並支援預設輸入格式。

無障礙要求對應

網站無障礙規範

  • 1.3.5:識別輸入目的(檢測等級AA)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於表單內容。

期望

以下檢查正確:

向使用者呈現正確的鍵盤類型:

  • 文字鍵盤類型用於自由文字。
  • 數字鍵盤類型用於數字輸入。
  • 電話號碼鍵盤類型用於電話號碼。
  • 日期鍵盤類型用於日期。
  • 日期與時間鍵盤類型用於日期與時間。
  • 月份鍵盤類型用於月份。
  • 搜尋鍵盤類型用於搜尋輸入。
  • URL鍵盤類型用於搜尋。
  • email鍵盤類型用於email。
  • 密碼輸入類型用於密碼。

假設條件

Autocomplete屬性未使用在與HTML 5.2規範所描述的自動完成欄位不一致的表單欄位,如果autocomplete欄位用於描述”自定義”分類法,而不是規範所描述,即使本項規則失敗,但成功準則1.3.5識別輸入目的可能仍滿足。

依據input元素的預期目的正確使用type屬性,如果不正確的type屬性使用在input元素,則本規則可能使滿足成功準則1.3.5識別輸入目的的元素失敗。例如具有數字類型的input元素,但其預期為e-mail信箱。

無障礙支援

  • iOS/Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:儘管autocomplete是HTML支持個人化的有為技術,但輔助技術對此功能的支援則非常有限。

測試案例:

作業系統

iOS

Android

HTML

範例說明

創建表單時,確保使用的每個輸入格式具有正確的插件類型。例如,使用UIDatePicker從使用者端獲得日期,使用文本欄位(UITextField) 從使用者端獲得純文本,使用UISwitch允許使用者在2個可能選項值中選擇(如開與關)。這些插件預設內建必要的語意、行為與手勢。

原生插件可使用各種相關的屬性進一步客製,例如keyboardType屬性可用於UITextField實例,指出在遇到文字欄位時向使用者呈現的鍵盤類型(文字、數字等)。案例包括:

  • Default-預設鍵盤
  • decimalPad -用於抽出數字,包含小數
  • url -用於抽出URLs

當開發自定義組件時,可能有自定義的手勢,確保藉由提示方式(透過accessibilityHint property)或最好透過accessibilityLabel 屬性清楚指出手勢,確保所有VoiceOver使用者(即使無法使用提示者)都能理解手勢。對於複雜的插件,如果互動依賴特定的知覺,如視覺或動作能力,可能需要提供無障礙替代方式。

使用android:inputType屬性於editText元素,當使用者與表單控件互動時,選擇鍵盤類型呈現給使用者。輸入類型的案例包含電話鍵盤、密碼、數字文本與其他各種類型

幫助使用者透過textAutoCorrect自動更正輸入錯誤,以及透過 AutoCompleteTextView提供自動完成建議。

確保提供每個表單控件的更正輸入類型,當抽出電話號碼時,使用phone的 android:inputType,使用DatePickerDialog 用於抽出日期,RadioButton 物件用於單選按鈕等。對於需要特定的指示或手勢的自定義組件,確保將此資訊包含在contentDescription。

 HTML5為表單引進許多新的輸入類型,之前開發人員必須創建,自定義組件,範例包含:

  • input type="search"
  • input type="email"
  • input type="tel"
  • input type="range"
  • input type="time"
  • input type="date"

必須注意這些輸入類型的支援具變異性,特別是在舊版瀏覽器與輔助技術,因此(如果考慮舊版瀏覽器的支援)提供未受支援輸入類型的備用方法(如自定義的日期揀選器),在此種情況下,需確保備用的插件具可及性。

即使使用以上之一輸入類型時,需在表單控件的標籤中以文字指出任一必填格式。例如當抽出日期時,在標籤中指出日期格式,將能協助偏好手動增加日期而非從日期揀選器插件選取日期的使用者。

成功範例原始碼

// Example 1 - set the default input type for a text field

textField.keyboardType=UIKeyboardTypeNumbersAndPunctuation;

 

// Example 2 - allow and indicate direct interaction for gestures

[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];

[aButton setAccessibilityHint:NSLocalizedString(@"Draw a smile on this button!", @"Accessibility hint for the smile button")];

[aButton setAccessibilityTraits:UIAccessibilityTraitSelected | UIAccessibilityTraitImage | UIAccessibilityTraitAllowsDirectInteraction];

// Example 1 - setting the default keyboard type

<EditText android:inputType="number" ... />

 

// Example 2 - using android:contentDescription to indicate gestures that can be used with graphical elements

 

<View android:contentDescription="Mood - Draw a smile or a frown" />

input[type=range] with descriptive fallback text in associated label:

 

<label for="t1">Rating (between 1 and 5):</label>

<input type="range" min="1" max="5" value="3" id="t1">

失敗範例原始碼

// No indication of input type or gestures expected

[aButton setTitle:NSLocalizedString(@"Smile", @"Button title") forState:UIControlStateNormal];

[aButton setAccessibilityTraits:UIAccessibilityTraitSelected | UIAccessibilityTraitImage];

// Example 1 - not setting the default keyboard type to number for a number field

<EditText ... />

 

// Example 2 - not setting the contentDescription property with instructions for gesture use

<View android:hint="Mood" ... />

No indication of expected input:

 

<label for="t1">Rating:</label>

<input type="text" id="t1">

測試程序

  1. 啟動螢幕報讀軟體。
  2. 找到表單欄位。
  3. 驗證鍵盤類型與輸入相關。
    • 文字鍵盤類型用於自由文字。
    • 數字鍵盤類型用於數字輸入。
    • 電話號碼鍵盤類型用於電話號碼。
    • 日期鍵盤類型用於日期。
    • 日期與時間鍵盤類型用於日期與時間。
    • 月份鍵盤類型用於月份。
    • 搜尋鍵盤類型用於搜尋輸入。
    • URL鍵盤類型用於搜尋。
    • email鍵盤類型用於email。
    • 密碼輸入類型用於密碼。

參考詞彙:無

變更記錄:20200817-第1次編撰。

參考資源:

  1. Input format, 2019 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. Form inputs, 2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  3. G131: Providing descriptive labels, Techniques for WCAG 2.0。