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

FC2鍵盤陷阱

規則識別碼

FC2

規則名稱

鍵盤陷阱

規則類型

複合規則

規則說明

不得有鍵盤陷阱。

無障礙要求對應

網站無障礙規範

  • 2.1.2無鍵盤操作陷阱(檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於焦點內容。

期望

以下檢查均正確:

  • 物件、元件或控件可以使用標準導航方法進行瀏覽或離開。
  • 以可見的方式並透過螢幕報讀軟體離開項目導航的方法,該方法可將焦點穿過或跨過鍵盤陷阱。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

確保VoiceOver使用者能夠滑動手勢進入與離開所有在頁面上可獲焦點的控件。確認以下事項:

•   可以按返回鍵關閉螢幕鍵盤。

•   所有對話框應包含可獲焦點的關閉或OK按鈕。iOS也提供accessibilityPerformEscape方法支援離開手勢(與桌上型鍵盤相似的離開功能),可讓使用者透過使用2指Z型手勢關閉對話框。

•   使用 UITextField時,預設將無法按返回鍵關閉螢幕鍵盤。(解決方式請參成功範例)

確保TalkBack使用者能夠滑動手勢進入與離開所有在頁面上可獲焦點的控件。確認以下事項:

•   可以按返回鍵關閉螢幕鍵盤。

•   所有對話框應包含可獲焦點的關閉或OK按鈕。

確保焦點不會因JavaScript方法如onBlur、onChange、onFocus或嵌入式元件而落入陷阱。當檢查第三方元件時,應確保可以tab鍵進入與離開內容。

如果內容必須以可能引起鍵盤陷阱的方式提供,則應提供使用者可繞過該內容的方法,例如透過在內容上面的頁面內鏈結,引導使用者直接到該內容下方的位置。

成功範例原始碼

// Dismiss the keyboard on return

- (IBAction)returnKey:(id)sender {

    [sender resignFirstResponder];

}

--

<!-- JavaScript updates field label to indicate an error but does not trap focus -->

<script>

function check() {

  if (isValid()) {

    // update field label to explain that field is in error but do not trap focus

   var s = createElement("span");

   s.innerText = "(Invalid name)";

   document.getElementById("l1").appendChild(s);

  }

}

</script>

<label id="l1" for="name1"> First name</label>

<input onBlur="check();" type="text" id="name1">

失敗範例原始碼

// not dismissing the keyboard thus blocking other components

(IBAction)returnKey:(id)sender{

    // Validate the field

    if (someValidCondition) {

       [sender resignFirstResponder]; // Dismiss the keyboard

       // Do something with the field contents

    } else {

      return;

      // the keyboard doesn't close

    }

}

--

<!-- JavaScript keeps returning focus to a field until a user enters data correctly -->

<script type="text/javascript">

function check() {

  if (isValid()) {

document.getElementById("name1").focus();

  }

}

</script>

<label for="name1"> First name</label>

<input onBlur="check();" type="text" id="name1">

測試程序

  1. 啟動螢幕報讀軟體。
  2. 導航到可操作的物件、元件或控件。
  3. 當焦點位於項目上時,嘗試透過導航方法離開項目。
  4. 確保焦點移出項目。
  5. 如果焦點不能透過標準手勢或方法移出項目,請確保移出項目焦點的方法有視覺的描述與透過螢幕報讀軟體描述,如對話框有關閉按鈕,或提交/取消按鈕。

參考詞彙:無

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

參考資源:

  1. Keyboard trap, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G21: Ensuring that users are not trapped in content, Techniques for WCAG 2.0。