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

FM1標記表單控件

規則識別碼

FM1

規則名稱

標記表單控件

規則類型

原子規則

規則說明

必須標記所有表單控件

無障礙要求對應

網站無障礙規範

  • 3.3.2標籤或說明(檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於表單內容。

期望

  • 所有表單輸入欄位具有視覺的標籤。
  • 螢幕報讀軟體正確報讀所有表單輸入欄位標籤。
  • 驗證移除上下文內容時,標籤可清楚且唯一描述控件的用途與使用者應採取的動作。
  • 透過螢幕報讀軟體正確報讀表單輸入欄位的限制。
  • 必填輸入欄位可由螢幕報讀軟體清楚指出。

假設條件

  • 該規則假定標籤是為有視力的使用者準備,並且在輔助技術中隱藏可見標籤是「成功準則4.1.2 名稱、角色和價值」的失敗,而不是「成功準則2.4.6 標題和標籤」的失敗。
  • 該規則假定元素的程序化標籤也屬於其視覺上下文。
  • 該規則假定可以正確地確定每個測試目標的語言(以編程方式或通過分析內容)並充分理解。

無障礙支援

  • iOS/Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:演示角色的實現衝突解決方案從一種瀏覽器或輔助技術到另一種瀏覽器或輔助技術有所不同。依賴於此,某些元素可以具有適用的語義角色之一,並且在某些技術下無法通過此規則,但是其他技術的使用者將不會遇到任何無障礙問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

採取以下步驟標記表單控件:

  1. 使用UILabel提供每一表單控件視覺的文字標籤。
  2. (選用)在UILabel文本使用isAccessibilityElement屬性並設定屬性值為false,從VoiceOver滑動焦點順序中移除視覺的文字標籤。本方法避免瀏覽頁面時傳遞2次標籤文本(亦即確保標籤僅在相關的標單控件獲得焦點時宣告)。
  3. 確認每一表單控件具有適當的特徵(如UITextField)。
  4. 確認表單控件透過識別檢查器(Identity Inspector)正確標記且啟用無障礙功能。或者,使用accessibilityLabel property提供標籤。大部分情況,標籤文字應透過UILabel類別與視覺的標籤文字匹配。
  5. 如果表單輸入欄位為必填,確保此資訊包含於accessibilityLabel。

對於基本表單控件,使用android:labelFor屬性提供標籤。

開發原生Android應用程式時,沒有特定的required屬性。但是,可以透過使用contentDescription覆蓋標籤文本指出必填欄位。然後,TalkBack會報讀此屬性的內容以取代標籤文本。

使用label元素與表單控件視覺標籤明確連結,並將for屬性對應至該標籤,且屬性值必須與關連的表單控件的id屬性匹配。

某些情況下,頁面的視覺設計可能意味著對顯示一個單獨、視覺與程式化連結標籤有困難或潛在困擾。案例包含在資料表格中的表單控件(無相關聯的表格標題代表視覺標籤)與搜尋欄位(可見標籤為”搜尋”的按鈕,或放大鏡圖示,可能已經指出此為搜尋欄位),此情況下,可使用title屬性。

使用aria-required屬性指出必填的表單欄位,以及可見的指示(如*號),確保輔助技術使用者能獲得該欄位為必填的通知。如果沒有支援舊版瀏覽器的問題,應使用HTML5 required屬性取代。

如果基於ASCII碼的星號用於指出必填欄位,則使用aria-hidden屬性於字符容器並設定屬性值為false,確保對螢幕報讀軟體隱藏。

成功範例原始碼

[myLabel.setIsAccessibilityElement:YES];

[myTextField.setAccessibilityLabel:@"Your first name:"];

[myTextField.setAccessibilityHint:@"Entry must be between 4 and 20 characters."];

 

Note that iOS lacks a specific required attribute or property. The generally accepted approach is to use an asterisk character to indicate required fields, but VoiceOver will normally announce this character as "star" or "asterisk" rather than "required".

 

To resolve this issue, include the asterisk within the (visible) label, and then use the accessibilityLabel property to indicate that the field is required.

 

[myTextField.setAccessibilityLabel:@"Your first name (required):"];

Example 1:

<TextView

android.layout_width="wrap_content"

android.layout_height="wrap_content"

android:text="Your first name:"

android:labelFor="@+id/firstname" />

<EditText

android:id="@+id/firstname"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="text"/>

 

Example 2:

<TextView

android.layout_width="wrap_content"

android.layout_height="wrap_content"

  android:text="First name:*"

android:labelFor="@+id/firstname"

android:contentDescription="First name (required)"/>

<EditText

android:id="@+id/firstname"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="text"/>

 Example 1

 

  <label for="firstname">First name (required):</label>

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

 

Example 2

 

 

  <input type="text" title="Enter a list of search terms">

  <input type="button" value="Search">

 

Example 3

 

<label for="firstname">First name:<span aria-hidden="true">*</span></label>

<input type="text" id="firstname" aria-required="true">

失敗範例原始碼

[FNLabel setText:NSLocalizedString(@"First Name", nil)];

螢幕上的文本後跟一個文本輸入,該文本輸入沒有無障礙的標籤或使用contentDescription屬性。

<div>Username:

<input type="text" id="uname" /></div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 瀏覽頁面上的表單欄位。

參考詞彙:無

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

參考資源:

  1. Labelling form controls, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G131: Providing descriptive labels, Techniques for WCAG 2.0。