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

AT7背景圖片

規則識別碼

AT7

規則名稱

背景圖片

規則類型

原子規則

規則說明

傳達訊息或特別含義的背景圖片應該有其他無障礙的替代方式。

無障礙要求對應

網站無障礙規範

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

適用性

適用於背景圖片內容。

期望

背景圖片不可被聚焦,若背景圖片為有意義傳達之圖片,應有替代的表達方式。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

iOS 允許為大多數視圖(Views)設置背景圖片。例如,可以為輔助功能元素的視圖提供標籤,以提供有關這些圖片的資訊。在 iOS 中裝飾背景圖片和行內圖片(inline image)的無障礙方面沒有區別。所有其他輔助功能標準和準則仍然適用。例如:應用程式背景與上面任何文字之間的適當顏色對比,並且不得使用文字的背景圖片。

開發人員應確保向使用者傳達含義或資訊的圖片是可專注的。在 Android 應用程式中,裝飾背景圖片和行內圖片的可造訪性沒有區別。所有其他輔助功能標準和準則仍然適用,例如,應用程式必須確保背景和上面的任何文字以及文字背景圖片之間的顏色正確對比。

由於無法將替代文字分配給 CSS 背景,因此在 CSS 中使用行內圖片或適當的替換技術來提供可視和文字替代。

成功範例原始碼

//LogoImage is a UIImageView

[LogoImage setIsAccessibilityElement:YES];

[LogoImage setAccessibilityLabel:NSLocalizedString(@"Sunny", @"Accessibility label for logo image")];

[LogoImage setAccessibilityHint:NSLocalizedString(@"The sun is shining the birds are singing", @"Accessibility hint for the logo Image")];                         

<ImageView

android:layout_height="wrap_content"

android:id="@+id/sunnyday"

android:src="@drawable/blue"

android:focusable="true"

android:contentDescription="Sunny and Warm"></ImageView>

<a ...><img src="email.jpg" alt="Email" /></a>

失敗範例原始碼

//LogoImage is a UIImageView, UIImageViews by default are not accessible:

(IsAccessibilityElement=NO) and have no label or hint                       

<ImageView

android:layout_height="wrap_content"

android:id="@+id/sunnyday"

android:src="@drawable/blue"></ImageView>

<div tabIndex="0" onclick="email();" style="background-image:url('email.jpg');"> </div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 識別畫面中是否使用所有包含訊息的圖片。
  3. 識別哪些圖片是有包括特別含義的背景圖片。
  4. 確認螢幕報讀軟體報讀此背景圖片的替代文字。
  5. 在某些情況下,這可能需要檢查代碼或在非行動設備上進行測試。

 

參考詞彙:無

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

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