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

FM4管理焦點

規則識別碼

FM4

規則名稱

管理焦點

規則類型

原子規則

規則說明

在使用者輸入過程中,焦點或上下文不得自動更改。

無障礙要求對應

網站無障礙規範

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

適用性

適用於表單內容。

提前告知使用者上下文或焦點變更情形者,符合此檢核點,如輸入信用卡號自動跳欄,提前知悉可通過此項檢核點。

期望

以下檢查均正確:

  • 物件、元件或控件在啟動開始(觸摸時)不會觸發動作/事件。
  • (觸摸移開)即觸發動作/事件。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

除非由使用者明確地觸發,否則避免在表單控件與其他介面元件之間移動焦點。例如,提供單獨的介面元件(如送出按鈕)讓使用者啟動相關的程式碼。因此,焦點僅當使用者啟動該按鈕時才變更。

除非由使用者明確地觸發,否則避免在表單控件與其他介面元件之間移動焦點。例如,提供單獨的介面元件(如送出按鈕)讓使用者啟動相關的程式碼。因此,焦點僅當使用者啟動該按鈕時才變更。

除非由使用者明確地觸發,否則避免在表單控件與其他介面元件之間移動焦點。例如,提供單獨的介面元件(如送出按鈕)讓使用者啟動相關的程式碼。因此,焦點僅當使用者啟動該按鈕時才變更。

尤其避免將onChange事件處理器使用於表單控件,如下拉選單。

成功範例原始碼

(IBAction)dataValidation:(id)sender {

    // Do not change focus

}

//A toggle button and progress bar appear on the screen, focus does not switch automatically

<ToggleButton

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/toggleButton_1"

android:contentDescription="@string/toggleButton_1_desc"></ToggleButton>

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content" style="?android:attr/progressBarStyleLarge"

android:id="@+id/progressBar_1"

android:contentDescription="@string/progressBar_1_desc"></ProgressBar>

...

final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.bars_toggleButton_1);

final ProgressBar progressbar=(ProgressBar) findViewById(R.id.bars_progressBar_1);

<fieldset>

  <legend>Mobile phone number</legend>

  <label for="p1"> Country code </label>

  <input type="text" id="p1" onBlur="validateCode();" />

  <label for="p2"> Number </label>

  <input type="text" id="p2" onBlur="validateNumber();" />

</fieldset>

失敗範例原始碼

--

//A toggle button and progress bar appear on the screen and focus switches to the progress bar automatically

<ToggleButton

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/toggleButton_1"

android:contentDescription="@string/toggleButton_1_desc"></ToggleButton>

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content" style="?android:attr/progressBarStyleLarge"

android:id="@+id/progressBar_1"

android:contentDescription="@string/progressBar_1_desc"></ProgressBar>

...

final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.bars_toggleButton_1);

final ProgressBar progressbar=(ProgressBar) findViewById(R.id.bars_progressBar_1);

progressbar.requestFocus();

<fieldset>

  <legend>Mobile phone number</legend>

  <label for="p1"> Country code </label>

  <input type="text" id="p1" onChange="validateAndMove();" />

  <label for="p2"> Number </label>

  <input type="text" id="p2" onChange="validateAndMove();" />

</fieldset>

測試程序

  1. 使用觸控螢幕啟動應用程式。
  2. 導航到螢幕上的物件、元件或控件。
  3. 開始啟動項目(觸摸而不拿起手指或手寫筆)
  4. 驗證該項目未立即觸發動作/事件。
  5. 完成啟動項目(從螢幕中移開手機或手寫筆)
  6. 驗證該項目以觸發動作/事件。

參考詞彙:無

變更記錄:
20200817-第1次編撰。
20200824-第2次編撰,根據109年07月22日討論,於適用性新增例外說明。

參考資源:

  1. Changing focus, 2019 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. Managing focus, 2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。