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

PD2一致的導覽

規則識別碼

PD2

規則名稱

一致的導覽

規則類型

原子規則

規則說明

除非使用者做出變更,否則在一組元件中,反覆出現的導覽機制每次都要有相同的相對順序。

無障礙要求對應

網站無障礙規範

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

適用性

適用於可預期內容。

期望

以下檢查均正確:

  • 元件、控件和物件的視覺佈局與樣式可指出其操作動作;
  • 元件、控件和物件的可操作狀態和目的可被報讀。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

確保accessibilityFrame、traits與accessibilityLabels正確地向看不見的使用者指出物件的目的與功能。使用標準控件向看不見的使用者指出物件的目的。請參閱iOS人機界面指南設計原則|

使用標準控件向看不見的使用者指出物件的目的。在Android平台上無法更改無障礙角色或特徵資訊。請參閱Android Material Design原則。

使用視覺樣式指出項目具操作性。鏈結應與靜態文字不同,例如,不同的字體粗細、輪廓或不僅僅依賴顏色的其他視覺樣式。使用標準元素而不使用自定義樣式將自動為鏈結和按鈕提供此功能,儘管在小螢幕上多個或長鏈結可能變得難以辨認。

確保圖示、鏈結文字等具一致性,例如,如果鏈結至首頁是頁面上的”回首頁”,應確保在其他頁面上稱為”開始頁”。此外,如果特定的圖示在頁面上參照到”幫助”,則在其他面頁上就不能表示其他的涵義。

成功範例原始碼

[myButton setImage:[UIImage imageNamed:@"play.jpg"] forState:UIControlStateNormal];

[myButton setTitle:NSLocalizedString(@"Play clip", nil) forState:UIControlStateNormal];

[myButton setAccessibilityTraits: UIAccessibilityTraitButton];

//A custom element that doesn't look like a button uses the default button theme and indicate visual focus

<CustomButton

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:background="@drawable/my_button"></CustomButton>

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:drawable="@android:drawable/btn_default"></item>

    <item android:drawable="@drawable/btn_default"></item>

</selector>

<a href="..."> Next story</a>

<button>Next story</button>

失敗範例原始碼

// an image that doesn't look like a button

UIImageView* aImage = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];

[aImage imageNamed:@"playbtn"];

[aImage setTitle:NSLocalizedString(@"Play clip", nil) forState:UIControlStateNormal];

//A custom button element that is drawn in a non-standard way

<CustomButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@drawable/my_button"></CustomButton>

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_custom">

    </item>

</selector>

<div onclick="openStory();"> Next story </div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 瀏覽可操作的項目。
  3. 驗證元件、控件和物件的視覺佈局與樣式可指出其操作動作;
  4. 驗證元件、控件和物件的目的可被報讀。

參考詞彙:無

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

參考資源:

  1. Consistency, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G61: Presenting repeated components in the same relative order each time they appear, Techniques for WCAG 2.0。