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

FC3焦點順序

規則識別碼

FC3

規則名稱

焦點順序

規則類型

原子規則

規則說明

必須以有意義的順序瀏覽可操作的內容。

無障礙要求對應

網站無障礙規範

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

適用性

適用於焦點內容。

期望

以下檢查均正確:

焦點順序與頁面直觀視覺閱讀順序相同。

  1. 當新增的項目出現或啟用,這些項目將出現在觸發他們的項目之後。
  2. 焦點以直覺的方式前後移動。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

iOS的焦點順序由控件/視圖的實體佈局確定。開發人員可以使用UIAccessibilityContainer協議,根據需要重新排序代碼,或控制和更改焦點順序。

預設焦點順序將落到最近、比鄰、可聚焦的元素。有時這可能與預期目的不符,因此可能需要提供顯式替代。

可以使用以下方法完成:

  • android:nextFocusDown 定義當使用者向下導航時接收焦點的下一個視圖
  • android:nextFocusLeft 定義當使用者向左導航時接收焦點的下一個視圖
  • android:nextFocusRight 定義當使用者向右導航時接收焦點的下一個視圖
  • android:nextFocusUp 定義下一個在使用者向上導航時將獲得焦點的視圖

以下內容將確保內容的邏輯順序:

  • 根據tab順序進行編碼。
  • 注意tabIndex(正數、0和負數)可能在行動裝置瀏覽器不受支援。
  • 不要將表格用於佈局目的。

成功範例原始碼

--

// focus moves from button 1 to 2 and then 3 and then back around to 1

<LinearLayout android:orientation="vertical" ... >

  <Button android:id="@+id/btn1" android:nextFocusUp="@+id/btn3" android:nextFocusDown="@+id/btn2"... />

  <Button android:id="@+id/btn3" android:nextFocusUp="@+id/btn2" android:nextFocusDown="@+id/btn1" ... />

  <Button android:id="@+id/btn2" android:nextFocusUp="@+id/btn1" android:nextFocusDown="@+id/btn3" ... />

</LinearLayout>

<div>

    <h3>Shipping Address</h3>

    <label for="n1">Name</label><input type="text" id="n1">

    <label for="a1">Address</label><input type="text" id="a1">

...

</div>

<div>

    <h3>Billing Address</h3>

    <label for="n2">Name</label><input type="text" id="n2">

    <label for="a2">Address</label><input type="text" id="a2">

...

</div>

失敗範例原始碼

--

--

<table>

 <tr>

  <td>Shipping Address</td>

  <td>Billing Address</td>

 </tr>

 <tr>

  <td><label for="n2">Name</label><input type="text"></td>

  <td><label for="n1">Name</label><input type="text"></td>

 </tr>

 <tr>

  <td><label for="a1">Address</label><input type="text"></td>

  <td><label for="a2">Address</label><input type="text"></td>

 </tr>

</table>

測試程序

  1. 使用螢幕報讀軟體啟動應用程式。
  2. 瀏覽運作中螢幕的物件、元件和控件。
  3. 驗證焦點順序是否與頁面的直觀視覺閱讀順序相同。
  4. 選擇單選按鈕、複選框和其他可操作的物件、元件和控件。
  5. 如果新增的項目出現或啟用,確定這些項目是否之後位於焦點順序之中。新進出現的區塊應該之後出現於焦點順序之中。確保焦點以直覺的方式前後移動。注意:Android具備焦點模擬器,可用於方向控制器不存在時使用。

參考詞彙:無

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

參考資源:
Focus order , 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。