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

FM3分組表單元件

規則識別碼

FM3

規則名稱

分組表單元件

規則類型

原子規則

規則說明

控件、標籤和其他表單元件必須正確配對。

無障礙要求對應

網站無障礙規範

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

適用性

適用於複雜表單內容。

期望

以下檢查均正確:

  • 邏輯分組一部分的螢幕上欄位具有可見分組名稱,指出為螢幕上欄位的標籤一部分。
  • 對於分組的每個欄位,螢幕報讀軟體報讀分組標籤優先於欄位標籤。
  • 對於每組項目,組項目之間的導航和互動必須按順序進行。例如,正確分組的HTML單選按鈕允許透過向上和向下箭頭在它們之間進行導航。

假設條件

當前沒有任何假設。

無障礙支援

此規則沒有已知的主要無障礙功能支援問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

iOS沒有提供對相關控件進行分組的預設機制。但可透過以下步驟協助VoiceOver使用者:

  • 在一組控件上方提供分組可見的標籤,以及使用UIAccessibilityTraitHeader為該標籤編碼作為標題。
  • 將accessibilityLabel用於每個單獨的相關表單控件,包含可見文本與標題文本,VoiceOver使用將可同時聽見兩者。

例如,可見的homeAddressHeading是"住家地址”, deliveryAddressHeading是”送貨地址”,在每個標題下的表單標籤可見的呈現為”街道”、”城鎮”等,因此,VoiceOver使用者難以區分是住家或送貨地址。透過 accessibilityLabel 標籤,在每個標籤附加額外的上下文脈絡,可以提供VoiceOver使用者區分地址的類型。

Android目前沒有提供將控件分組的機制,除單選按鈕以外(使用 RadioGroup分組)。然而,可能藉由設置在控件清單上方包含分組標籤的TextView,凸顯相關(非單選按鈕)的表單控件,並將android:contentDescription屬性用於在分組中每個單獨的表單控件,提供TalkBack使用者更多的上下文脈絡。

使用fieldset和legend將相關表單控件具語意地分組。

成功範例原始碼

[shipAddy setAccessibilityLabel:[NSString stringWithFormat: NSLocalizedString(@"Shipping Address:", @"Label title")]];

[billAddy setAccessibilityLabel:[NSString stringWithFormat: NSLocalizedString(@"Billing Address:", @"Label title")]];

<RadioGroup android:layout_width="match_parent"

android:id="@+id/radioGroup_1"

android:orientation="horizontal">

  <RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_0"

android:checked="true"

android:text="Option A"

android:contentDescription="Choose Option - Option A"></RadioButton>

  <RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_1"

android:text="Option B"

android:contentDescription="Choose Option - Option B"></RadioButton>

  <RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_2"

android:text="Option C"

android:contentDescription="Choose Option - Option C"></RadioButton>

</RadioGroup>

 

Textview 範例  

 

<TextView

  android:layout_width="match_content"

  android:layout_heigth="wrap_content"

  android:text="Home address"

  android:contentDescription="Home address, heading"/>

<TextView

  android.layout_width="wrap_content"

  android.layout_height="wrap_content"

  android:text="Street"

  android:labelFor="@+id/homeStreet"

  android:contentDescription="Home street"/>

<EditText

  android:id="@+id/homeStreet"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:inputType="text"/>

<TextView

  android.layout_width="wrap_content"

  android.layout_height="wrap_content"

  android:text="Town"

  android:labelFor="@+id/homeTown"

  android:contentDescription="Home town"/>

<EditText

  android:id="@+id/homeTown"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:inputType="text"/>

<TextView

  android:layout_width="match_content"

  android:layout_heigth="wrap_content"

  android:text="Delivery address"

  android:contentDescription="Delivery address, heading"/>

<TextView

  android.layout_width="wrap_content"

  android.layout_height="wrap_content"

  android:text="Street"

  android:labelFor="@+id/deliveryStreet"

  android:contentDescription="Delivery street"/>

<EditText

  android:id="@+id/deliveryStreet"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:inputType="text"/>

<TextView

  android.layout_width="wrap_content"

  android.layout_height="wrap_content"

  android:text="Town"

  android:labelFor="@+id/deliveryTown"

  android:contentDescription="Delivery town"/>

<EditText

  android:id="@+id/deliveryTown"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:inputType="text"/>

Text inputs

<fieldset>

  <legend>Delivery Address</legend>

    <label for="deliveryHouseNumber">House number:</label>

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

    <br/>

    <label for="deliveryStreetAddress">Street address:</label>

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

    <br/>

    <label for="deliveryTown">Town:</label>

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

    <br/>

</fieldset>

 

Radio buttons

 

<fieldset>

  <legend>Do you like football?</legend>

    <input type="radio" id="yesFootball" value="yes" name="football">

    <label for="yesFootball">Yes</label>

    <br/>

    <input type="radio" id="noFootball" value="no" name="football">

    <label for="noFootball">No</label>

</fieldset>

 

Checkboxes

 

 

<fieldset>

  <legend>Select your favourite sports:</legend>

    <input type="checkbox" id="football" name="sports" value="football">

    <label for="football">Football</label>

    <br/>

    <input type="checkbox" id="rugby" name="sports" value="rugby">

    <label for="rugby">Rugby</label>

    <br/>

    <input type="checkbox" id="golf" name="sports" value="golf">

    <label for="golf">Golf</label>

    <br/>

    <input type="checkbox" id="cricket" name="sports" value="cricket">

    <label for="golf">Cricket</label>

</fieldset>

 

Custom form controls

 

Use WAI-ARIA grouping markup for custom form controls, as follows (Note: use role="radiogroup" for groups of custom radio buttons, and role="group" for all other types of controls):

 

 

<p id="groupLabel" tabindex="-1">Do you like football?</p>

<div role="radiogroup" aria-labelledby="groupLabel">

  <span role="radio" aria-checked="false" tabindex="0" aria-labelledby="groupLabel yesFootball">

    <img src="unchecked.png" alt="">

  </span>

  <span id="yesFootball" tabindex="-1">Yes</span>

  <span role="radio" aria-checked="false" tabindex="-1" aria-labelledby="groupLabel noFootball">

    <img src="unchecked.png" alt="">

  </span>

  <span id="noFootball" tabindex="-1">No</span>

</div>

失敗範例原始碼

[shipAddy setAccessibilityLabel:[NSString stringWithFormat:@"Address"]];

[billAddy setAccessibilityLabel:[NSString stringWithFormat:@"Address"]];

<RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_0"

android:checked="true"

android:text="Option A"

android:contentDescription="Option A"></RadioButton>

<RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_1"

android:text="Option B"

android:contentDescription="Option B"></RadioButton>

<RadioButton android:layout_height="wrap_content"

android:id="@+id/radio_2"

android:text="Option C"

android:contentDescription="Option C"></RadioButton>

<input name="r1" type="radio" id="r1" value="yes"/>

<label for="r1">Yes</label>

<input name="r2" type="radio" id="r2" value="no"/>

<label for="r2">No</label>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 找到螢幕上的任何表單。
  3. 確定表單中是否存在一個或多個邏輯分組。
  4. 導航至該分組中的每個欄位,並驗證該分組的名稱是否較該欄位標籤優先報讀。
  5. 驗證與每個分組的互動方法,是否替代輸入方法一樣有效。

參考詞彙:無

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

參考資源:

  1. Grouping form elements, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. H44: Using label elements to associate text labels with form controls, Techniques for WCAG 2.0。