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

AT2裝飾性內容

規則識別碼

AT2

規則名稱

裝飾性內容

規則類型

原子規則

規則說明

裝飾性圖片必須從輔助技術中隱藏。

無障礙要求對應

網站無障礙規範

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

適用性

裝飾性圖片。

期望

以下任一檢查正確:

  1. 沒有意義的圖片、元件或物件不會獲得焦點,也不會被螢幕報讀軟體讀取。
  2. 圖片、物件或沒有意義但取得焦點的元件被宣告為“不可用”或“禁用”,並且不可操作。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

如果圖片、物件或元素屬於裝飾性,或不提供做為使用者互動之意圖,應避免使用標籤,並確認將isAccessibilityElement屬性值設定為false。

確保裝飾性圖片的importantForAccessibility屬性值設定為no,focusable屬性值設定為false,contentDescription設定為@null(僅針對舊版)。TalkBack將忽略此圖片。

即使圖片是裝飾性的,也必須將alt屬性應用於img元素,但是必須將此屬性的值設置為null(alt="")。

成功範例原始碼

[somethingDecorative setIsAccessibilityElement:NO];

<ImageView
android:id="@+id/example_decorative_image"  android:source="@drawable/example_decorative_image_source"  android:focusable="false"  android:importantForAccessibility="false"  android:contentDescription="@null" />

<img scr="example_decorative_image" alt="" />

失敗範例原始碼

[somethingDecorative setIsAccessibilityElement:YES]; 

<ImageView
android:layout_height="wrap_content"
android:id="@+id/image_1"
android:src="@drawable/blue"
android:focusable="true">
</ImageView>

<img scr="example_decorative_image" alt="*" />  

測試程序

  1. 開啟螢幕報讀軟體。
  2. 識別沒有特定意義任何圖片、元件或物件,已被關閉或被隱藏。
  3. 嘗試將焦點移到或導航到這些圖片、元件或物件。
  4. 確認圖片、元件或物件沒有獲得焦點並且沒有被螢幕報讀軟體讀取處理。
  5. 如果可以導航到圖片、元件或物件,請確保將其聲明為“不可用”或“禁用”,並確認無法操作。

參考詞彙:無

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

參考資源:

  1. Alternatives for non-text content, 2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. Decorative content,2019 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  3. H37: Using alt attributes on img elements, Techniques for WCAG 2.0。