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

FC1可聚焦元件

規則識別碼

FC1

規則名稱

可聚焦元件

規則類型

原子規則

規則說明

所有互動元件必須是可聚焦的,非互動元件必須不能聚焦。

無障礙要求對應

網站無障礙規範

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

適用性

適用於互動元件。

期望

以下檢查均正確(Android):

  • 每個可操作的元件皆可直接獲得焦點(透過觸摸);
  • 每個可操作的元件皆可以使用鍵盤或d-pad獲得焦點/導航。

以下檢查均正確(iOS):

  • 每個可操作的物件皆可直接獲得焦點(透過觸摸),並以視圖的焦點順序顯示;
  • 每個可操作的物件皆可使用螢幕報讀軟體透過滑動手勢獲得焦點。

假設條件

該規則假定所有具有可見內容的可滾動元素都需要鍵盤無障礙。不需要鍵盤無障礙的可滾動元素,可能是因為其內容純粹是裝飾性,或者因為可以以其他方式控制滾動,所以可能無法通過此規則,但仍滿足成功準則2.1.1鍵盤。

無障礙支援

Android 4以下作業系統不會捕獲觸摸事件,因此某些輔助技術(如TalkBack)的使用者無法在不啟動元件的情況下直接觸摸螢幕。

測試案例:

作業系統

iOS

Android

HTML

範例說明

在iOS上,除非使用者打開VoiceOver,否則無法使用外接藍牙鍵盤訪問許多元素。

透過使用isAccessibilityElement屬性並將其值設定為true,確保所有具有意義和功能的內容都可聚焦。如果頁面元素是裝飾性或禁用,請將其值設定為false。

Android 4以下作業系統不會捕獲觸摸事件,因此“TalkBack”的使用者無法在不觸發元素的情況下直接觸摸螢幕。

將android:focusable屬性設定為true,確保所有具有意義和功能的內容都可聚焦。此外,將importantForAccessibility設定為yes。如果頁面元素是裝飾性或禁用,則將值設定為false,並將importantForAccessibility attribute設定為no。

使用如button、a和input元素等原生交互式元素,而不要重新使用另一個元素,因為此類控件預設是可獲得焦點,並且包含所需的語義和行為。如果必須使用預設無法透過鍵盤訪問的元素(例如div和span元素),則應使用tabindex屬性,並將其值設置為0。將需要進一步的腳本編寫,以確保可以在適當的情況下使用Enter、空格鍵或方向鍵來觸發此類元素,並且將需要進一步的WAI-ARIA標記,以確保將元素正確地暴露於輔助技術。

請勿將tabindex屬性值為0或大於0的屬性應用於非活動/非交互式元素,例如標題和圖片。

對於不活動的元素,透過使用disabled,從焦點順序中移除該元素。這是首選方法,因為它得到很好的支援。或者在支援的地方禁用aria的屬性,使用tabindex屬性並將其值設置為-1,然後使用aria-hidden屬性並將其值設置為false。還可以使用tabindex屬性並使用aria-hidden屬性將其值設置為-1。

成功範例原始碼

[myPageElement.setIsAccessibilityElement :YES];

[myDecorativeElement.setIsAccessibilityElement:NO];

<ImageView

android.id="@+id/my_focusable_image"

android.source="@drawable/my_focusable_image_source"

android:contentDescription="[alternative text]"

android:focusable="true"

android:importantForAccessibility="yes"/>

 

 

<ImageView

android.id="@+id/my_decorative_image"

android.source="@drawable/my_decorative_image_source"

android:contentDescription="[alternative text]"

android:focusable="false"

android:importantForAccessibility="no"/>

<!-- Standard button element that is interactive by default -->

<button>Click me!</button>

 

<!-- Custom button made focusable using tabindex="0", and provided with an appropriate role -->

<span role="button" tabindex="0" onclick="…">Click me!</span>

 

<!-- Disabled/non-interactive button (option 1) -->

<button tabindex="-1" aria-hidden="true">I am not focusable!</button>

 

<!-- Disabled/non-interactive button (option 2) -->

<button disabled>I am discoverable by screen readers but not focusable!</button>

測試程序

Android系統:

  1. 開啟TalkBack。
  2. 確認每個可操作元素都可以直接導航(透過觸控Android 4+)。
  3. 確認可以使用鍵盤或d-pad導航到每個可操作的元素。

 

iOS:

  1. 開啟VoiceOver。
  2. 驗證每個可操作物件都可以直接訪問(透過觸摸),並以視圖的焦點順序顯示。
  3. 驗證每個可操作的物件皆可使用螢幕報讀軟體透過導航(滑動手勢)獲得焦點。

參考詞彙:無

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

參考資源:

  1. Focusable elements, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G202: Ensuring keyboard control for all functionality, Techniques for WCAG 2.0。