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

FM6輸入提示

規則識別碼

FM6

規則名稱

輸入提示

規則類型

原子規則

規則說明

在需要時,應提供輸入提示並可提供視覺和聽覺表現。

無障礙要求對應

網站無障礙規範

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

適用性

適用於互動元件。

期望

以下檢查均正確:

  • 表單提供說明。
  • 提供清楚說明,幫助使用者在填寫表單過程避免與防止錯誤。
  • 具動作的物件/控件/元件提供標籤或說明,指出當該項目啟動時將執行的動作。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

確保所有控件透過 accessibilityLabel與相關的 accessibilityHint屬性,提供無障礙的標籤。說明對所有使用者皆有助益,必須在頁面上視覺呈現。

確保所有控件透過 android:contentDescription 屬性,提供無障礙的標籤。說明對所有使用者皆有助益,必須在頁面上視覺呈現。

確保所有頁面元件皆提供無障礙的標籤。使用label 屬性為表單控件提供單獨的標籤,使用alt屬性為圖片提供相等意義的文本。說明對所有使用者皆有助益,必須在頁面上視覺呈現。

成功範例原始碼

[myButton setAccessibilityLabel:@"Previous"];

[myButton setAccessibilityHint:@"Displays the previous record in the database.];

 <ImageButton

  android.id="@+id/myImage"

  android.source="@drawable/myImage_source"

  android:contentDescription="[alternative text]" />

 

<ImageButton android:layout_height="wrap_content" android:id="@+id/add_btn" android:src="@drawable/addBtn" android:focusable="true" android:contentDescription="Adds a show to queue"></ImageButton>

<!-- provide a label for instructions for screen reader users -->

 <label for="firstName">

   First name

   <span aria-hidden="true">(required)</span>

</label>

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

失敗範例原始碼

[aButton setImage:[UIImage imageNamed:@"add.jpg"] forState:UIControlStateNormal];

[aButton setTitle:NSLocalizedString(@"Add", nil) forState:UIControlStateNormal];

<ImageButton

android:layout_height="wrap_content"

android:id="@+id/add_btn"

android:src="@drawable/addBtn"

android:focusable="true"

android:contentDescription="Add"></ImageButton>

<!-- no instructions for screen reader users -->

<input type="text" id="s1" />

<button>Go</button>

 

<!-- no indication of what an asterisk means -->

<label for="email">*Email: </label>

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

測試程序

  1. 啟動螢幕報讀軟體。
  2. 找到所有表單或可動作的項目。
  3. 驗證頁面或物件/元件/控件包含說明,解釋如何完成表單或物件/元件/控件將執行的操作。
  4. 驗證說明足夠清楚,避免與防止使用者執行錯誤。

參考詞彙:無

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

參考資源:

  1. Instructions, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. H71: Providing a description for groups of form controls using fieldset and legend elements, Techniques for WCAG 2.0。