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

AT6文字圖片

規則識別碼

AT6

規則名稱

文字圖片

規則類型

原子規則

規則說明

除標誌圖徽(logo)、圖示(icon)或使用畫布(canvas)的互動式內容,應避免文字圖片。

無障礙要求對應

網站無障礙規範

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

適用性

適用於圖片、文字內容。

期望

使用實際文字而非使用文字圖片。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用文字標籤元素而不是文字圖片,因圖片標籤放大時易失真。

使用文字標籤元素而不是文字圖片。

使用文字並使用 CSS 對文字進行樣式設定。

成功範例原始碼

[aLabel setText:NSLocalizedString(@"Breaking News", @"Label title to go alongside image")];

<TextView

android: id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="ACME Con​​struction" />

h3 {

 font: bold italic 2em Georgia, Times, Arial;

 border-bottom: 2px dashed black;

 border-top: .5em solid black;

 margin: 0;

 font-size: 1em;

}

...

<h3>Eastenders</h3>     

失敗範例原始碼

[logoImage setAccessibilityLabel:NSLocalizedString(@"Breaking News", nil)];

<ImageView

android:layout_height="wrap_content"

android:id="@+id/acme"

android:src="@drawable/acme"

android:focusable="true"

android:contentDescription="ACME Construction"></ImageView>

 

測試程序

  1. 啟動應用程式。
  2. 透過放大文字大小來確定文字圖片,以確定螢幕上的所有文字是否都會調整大小。
  3. 以放大狀態查看螢幕,確定是否有任何文字看起來為像素化,以判定是文字圖片。
  4. 排除所有被視為例外可以用的文字圖片的狀況,例如標誌圖徽(logo)、圖示(icon)或使用畫布的互動式內容。

參考詞彙:無

變更記錄:

20200816-第1次編撰。

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