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

AT1非文字內容的替代品

規則識別碼

AT1

規則名稱

非文字內容的替代品

規則類型

原子規則

規則說明

替代文字必須簡要描述圖片、物件或元件的編輯意圖或目的。

無障礙要求對應

網站無障礙規範

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

適用性

適用於有意義的圖片內容。

期望

每個有意義的圖片都有一個替代文字,該替代文字應簡要描述圖片意義並正確。

說明:每個替代文字不需包含描述網頁元素的類型,如影片、圖片、鏈結等。

假設條件

該規則假定可以正確地確定每個測試目標的無障礙名稱的語言(以編程方式或通過分析內容)。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用 accessibilityLabel屬性提供非文字內容的替代說明。或者,在Xcode的識別檢查器(Identity Inspector)中無障礙面版添加標籤。

如果圖片、物件或元件是動態更新,應確保 accessibilityLabel文字也要反映改變而進行更新。

使用android:contentDescription屬性配置標籤,確保該屬性用於每個圖片(非裝飾性),ImageButton、ImageView、Checkbox與其他控件可能需要額外的資訊提供看不見他們的使用者。此外,可獲焦點與importantForAccessibility屬性(選項)也需用於非互動、非裝飾性圖片。

注意android:contentDescription無法為文字輸入提供無障礙名稱,必須使用android:labelFor取代。

將alt屬性用於img元素,提供圖片相等意義的文字。

成功範例原始碼

[aButton setAccessibilityLabel:NSLocalizedString(@"Add to favourites video", @"Add to favourites button accessibility label")];

 Typical example of an image button:

<ImageButton

  android:id="@+id/play_button"

  android:src="@drawable/play"

  android:contentDescription="@string/Play" />

 

Typical example for a non-decorative image:

<ImageView

  android:id="@+id/example_image"

  android:src="@drawable/example_image_source"

  android:focusable="true"

  android:importantForAccessibility="yes"

  android:contentDescription="[alternative text for image]" />

 <img src="example_non_decorative_image.png" alt="[alternative text for image]" />

失敗範例原始碼

[aButton setAccessibilityLabel:NSLocalizedString(@"Adds this video to your favourites", @"Add to favourites button accessibility label")];

<button

android:layout_height="wrap_content"

android:id="@+id/sunnyday"

android:src="@drawable/blue"

android:focusable="true"

android:contentDescription="離開此畫面並回到主選單"></ImageView>

範例 1 :圖片

<img src="rating.jpg" alt="Greyed out stars" />

範例2:輸入

<input id="t1" type="text" />

測試程序

  1. 啟動螢幕報讀軟體。
  2. 識別任何有意義的圖片、元件或物件。
  3. 驗證具有相等意義的文字說明替代,簡要描述功能的意圖。
  4. 確認避免僅使用如“圖片”、“鏈結”之類的詞。

參考詞彙: 無

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

參考資源:

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