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

DT1可操作元件

規則識別碼

DT1

規則名稱

可操作元件

規則類型

原子規則

規則說明

鏈結和其他可操作元素必須清楚區分。

無障礙要求對應

網站無障礙規範

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

適用性

適用於可辨識設計內容。

期望

以下檢查均正確:

  • 可以從視覺上區分可操作項目和不可操作項目。
  • 可操作項目報讀的方式,指出可被螢幕報讀軟體操作。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

除視覺提示外,確保正確設置特徵用於使用者介面元件,以使VoiceOver正確報讀。大部分原生控件(尤其按鈕與標籤)預設內建必要的語意與行為。然而,對於自定義的介面元件,必須透過介面創建檢查工具或在編碼級別上,手動添加特徵。

當使用標準的使用者介面元件時,將自動賦予角色。儘可能地使用一般原生元素而不要創建自定義的解決方案,因為必要的語意與行為預設內建於原生元素,並且具有使用者習慣的樣貌。

使用原生HTML元素於可操作控件,而不是重新調整其他元素的用途,因為必要的語意與行為已預設內建。按鈕使用button元素,鏈結使用a元素,表單控件使用input元素等。再者,原生控件給使用者習慣的樣貌,當使用CSS調整頁面元素樣式時,確保樣式不會影響頁面元素的意圖,例如,確認按鈕具有視覺的外觀,以暗示按鈕可點擊而非純文本。

成功範例原始碼

[myCustomButton setAccessibilityTraits:UIAccessibilityTraitButton];

[myCustomButton setIsAccessibilityElement:YES];

[myCustomButton setAccessibilityLabel:@"My Custom Button];

 <Button

  android:id="@+id/button_myButton"

  android:background="@drawable/add"

  android:layout_width="wrap_content"

  android:layout_height="wrap_content"

  android:contentDescription = "Add";

  … />

 <button onclick="…">I am a button</button>

<a href="…">I am a link</a>

 

OR

 

Link with a background that will stand out from surrounding content, and button with a pointer cursor:

 

<style>

 body {

  background: #fff;

 }

 a {

  background: #def;

 }

 button {

  cursor: pointer;

 }

</style>

 

<a href="/">Home</a>

 

<button type="submit">Search</button>

失敗範例原始碼

// Custom control acts like a button but does not have the correct traits so will be confusing for a VoiceOver user

[customControl setTitle:NSLocalizedString(@"Smile", @"Button title")]; 

// use of an image that does not appear clickable

<imageview

android:src="@drawable/add"

android:contentDescription="Add"></imageview>

<style>

a {

       cursor: text;

       text-decoration: none;

}

</style>

 

<a href="/">Home</a>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 找出所有可操作的項目。
  3. 驗證可以從視覺上區分可操作項目和不可操作項目。
  4. 驗證螢幕報讀軟體可指出可操作狀態。

參考詞彙:無

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

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