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

AT4視覺格式

規則識別碼

AT4

規則名稱

視覺格式

規則類型

原子規則

規則說明

不得單獨使用視覺格式來傳達含義

無障礙要求對應

網站無障礙規範

  • 1.3.1 資訊與關連性(檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於文字、圖片及圖表內容。

期望

當物件、元件或控件使用視覺格式傳達含義時,應該提供螢幕上的文字、替代文字或音訊提示。

假設條件

如果目標元素上的顯式語義角色(explicit semantic role)是錯誤使用,並且元素之間的任何關係都已經可被程式化確定,則認定此規則失敗可能不會導致輔助技術使用者的無障礙問題,因此在WCAG成功準則的情況下,不應將其視為失敗。

無障礙支援

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

HTML:aria-owns 在某些使用者代理中支援有限。

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用無障礙的特徵或標籤來傳達通過視覺呈現與視覺傳達的意義。

在無障礙名稱的元素中包含傳達格式的任何資訊。

這可以通過設置欄位的[contentDescription]屬性來完成。

應該在使用CSS的純視覺格式上使用諸如[strong]、[em]等的語義標記,指示有意義的方面,例如文字格式。

此外,應使用列表和標題之類的結構來指示項目之間的關係。

成功範例原始碼

// aLabel is a UILabel that is selected

[aLabel setText:NSLocalizedString(@"Setup", @"Label title")];

[aLabel setAccessibilityTraits:UIAccessibilityTraitStaticText | UIAccessibilityTraitSelected];

[aLabel setTextColor:[UIColor whiteColor]];

[ALabel setBackgroundColor:[UIColor blueColor]];

文字輸入欄位是必填欄位,並使用大字體表示它是必填欄位。 這也通過螢幕上的文字(標籤)和相應[EditText]元素上的[contentDescription]屬性來指示。

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:id="@+id/label"

android:text="Password (required)"

android:textStyle="bold"></TextView>

 

<EditText

android:id="@+id/editText"

android:inputType="textPassword"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:="Password (required)"></EditText>

<h2>Fruit</h2>

<ul>

    <li>Apples</li>

    <li>Oranges</li>

    <li>Bananas</li>

</ul>

 

<div>An <strong>error</strong> was detected...</div>     

失敗範例原始碼

[aLabel setText:NSLocalizedString(@"Setup", @"Label title")];

[aLabel setAccessibilityTraits:UIAccessibilityTraitStaticText];

[aLabel setTextColor:[UIColor whiteColor]];

[aLabel setBackgroundColor:[UIColor blueColor]];

<TextView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:id="@+id/label"

android:text="Password"

android:textStyle="bold"></TextView>

 

<EditText

android:id="@+id/editText"

android:inputType="textPassword"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:hint="Password:"></EditText>

<div class="heading">Fruit</div>

<div>

<div style="padding-left:1em;">Apples</div>

<div style="padding-left:1em;">Oranges</div>

<div style="padding-left:1em;">Bananas</div>

</div>

 

<div>An <span style="font-weight:bold;">error</span> was detected...</div>

 

測試程序

  1. 啟動應用程式。
  2. 確定是否有任何組件使用視覺格式傳達含義,包括:
    顏色、形狀/尺寸、字體屬性(粗體/斜體等)、位置、方向、選擇等。
  3. 啟動報讀軟體。
  4. 確定是否存在補充視覺格式的說明文字、替代文字或音訊提示:
    • 使用螢幕報讀軟體導航至該項目,以確認其是否有隱藏的說明敘述。
    • 目視驗證螢幕上文字的存在。

參考詞彙: 無

變更記錄:

20200816-第1次編撰。

參考資源:

  1. Visual formatting , 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. C22: Using CSS to control visual presentation of text, Techniques for WCAG 2.0。