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

AD1內容順序

規則識別碼

AD1

規則名稱

內容順序

規則類型

原子規則

規則說明

內容順序必須符合邏輯順序。

無障礙要求對應

網站無障礙規範

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

適用性

適用於可調式設計內容。

期望

以下檢查正確:

  • 以有意義的順序宣告內容。

假設條件

僅在影響含義的情況下才需要提供特定的線性順序。

可能有多個“正確”的順序(根據WCAG 2.0的定義)。

只需要提供一份正確的表單。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

預設VoiceOver將基於螢幕布局,從左上到右下順序報讀頁面內容。因此,需確保頁面內容閱讀順序合理性。例如, 確保表單上的提交按鈕放置於表單結束處而非表單欄位清單之前。

預設TalkBack將基於編碼順序與內建演算法報讀頁面內容。如果焦點順序與預期不符,開發者可使用一個或多個以下屬性確定地設置焦點順序:

  • nextFocusUp
  • nextFocusDown
  • nextFocusLeft
  • nextFocusRight

螢幕報讀軟體按照在文檔物件模型(DOM)中出現的順序傳遞頁面內容。因此,確保頁面以有意義的順序結構化,亦即報讀與頁面的編碼順序匹配。例如:

確保頁面的頁尾出現在HTML文檔的尾端,不要將它放在HTML的頂端而使用CSS在視覺上定位在頁面的底部。不要使用HTML表格語法作為布局目的。避免使用大於0的tabindex值強制tab跳位順序,因在每次新頁面元素增加時滑動順序必須重新配置,所以僅在重新排序HTML順序不支援預期的滑動順序時才採用此方法。

成功範例原始碼

view.accessibilityElements = @[moduleButton,  followLabel, buttonContainer];

<EditText

android:hint="@string/text_2_desc"

android:nextFocusDown="@+id/edit3"

android:nextFocusUp="@+id/edit1"

android:nextFocusLeft="@+id/edit1"

android:nextFocusRight="@+id/edit3" />

 

android:nextFocusRight="@+id/edit3" />

<div>Banner </div>

<div>

 <div style="float:left;">

  <div><h1>Main story</h1></div>

  <div>Story content</div>

 </div>

 <div style="float:right;">Supplementary info</div>

</div>

失敗範例原始碼

自定義視圖缺少accessibilityElements。

--

<div>Banner</div>

<div>

<div><h1>Main story</h1></div>

<div style="position:relative; left:50%;top:-50%;">Supplementary info</div>

<div>Story content</div>

</div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 使用標準命令導航下一個和上一個。
  3. 驗證內容按照有意義的順序報讀。

參考詞彙:無

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

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