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

LK2合併重複的鏈結

規則識別碼

LK2

規則名稱

合併重複的鏈結

規則類型

原子規則

規則說明

必須將到同一組件的重複鏈結合併成單個鏈結。

無障礙要求對應

網站無障礙規範

  • 2.4.4鏈結目的(脈絡)(檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於鏈結內容。

期望

以下檢查均正確:

  • 具有圖片和文字標籤的物件、元件和控件,僅宣告一次。
  • 具有圖片和文字標籤的物件、元件和控件的分組方式,僅使它們宣告為一個組件。

假設條件

該規則假定,在測試對象的上下文中,鏈結的無障礙名稱所提供的描述只能準確地描述一種資源(值得注意的是,單獨的同音異義詞不能用作鏈結名稱)。因此,如果兩個或多個鏈結具有相同的無障礙名稱但解析為不同的資源,則其中至少一個不會描述其目的。

該規則假定可以正確地確定每個測試目標的語言(以編程方式或通過分析內容)並充分理解。

此規則假定輔助技術無論它們位於哪個文檔樹中,都以相同的方式公開頁面上的所有鏈結。如果輔助技術要求使用者在公開其鏈結之前先“輸入”一個iframe或影子樹,則它是兩個鏈結可能具有相同的名稱和上下文,但可以解析為不同的資源而不會失敗。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

如果鏈結由文字與其他頁面元件(如圖片)組成,避免將他們當成單獨的元件添加在視圖中。取而代之,鏈結與文字應該合併到相同的動作元件(如一個視圖)。無障礙屬性必須在分組元素上,而不在單個圖片和文字物件上。

如果鏈結由文字與其他頁面元件(如圖片)組成,避免將他們當成單獨的元件添加在視圖中。取而代之,鏈結與文字應該合併到相同的動作元件。採取以下步驟:

  1. 使用android:text屬性指出鏈結的可見文本。
  2. 將 android:drawableLeft(或android:drawableRight, android:drawableTop等)屬性用於圖片。

將需要替代文字但帶有冗餘關聯文字鏈結的圖片放入一個錨元素,並將alt圖片的屬性設置為null(alt="")。

成功範例原始碼

/ / Remove accessibility properties from the combined UIButton and UIImageView inside the view

 

[myButton.setIsAccessibilityElement:NO];

[myImage.setIsAccessibilityElement:NO];

 

// Add a trait of button to the container UIView, make it focusable through the isAccessibilityElement property, and add an appropriate label

[myView.setIsAccessibilityElement:YES];

[myView.setAccessibilityTraits:UIAccessibilityTraitButton];

[myView.setAccessibilityLabel:@"Tap me!"];

<Button

  android:id="@+id/search"

  android:layout_width="fill_parent"

  android:layout_height="wrap_content"

  android:padding="24dp"

  android:text="Search"

  android:contentDescription="Search the database"

  android:drawableLeft="@android:drawable/search_icon" />

 <a href="..."><img src="search.jpg" alt=""/>Search</a>

失敗範例原始碼

    // Example 1

    [FNLabel setText:NSLocalizedString(@"First Name", nil)];

    FNField setPlaceholder:NSLocalizedString(@"Required", nil)];

    [FNField setAccessibilityLabel:[NSString stringWithFormat:@"%@ %@", FNLabel.accessibilityLabel, FNField.placeholder]];

    

    // Example 2 - an UIImageView and UILabel

    imageView.image = [UIImage imageNamed:@"addBookmark"];

    ImageView.accessibilityLabel = @"Add";

    textLabel.text = @"Add";

    textLabel.accessibilityLabel = @"Add";                       

 //On-screen text followed by button, the contentDescription for the button component is a repetition of the on-screen text. The on-screen text is focusable.

 

<TextView android:id="@+id/add_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Add"

android:focusable="true"></TextView>

 

<Button android:id="@+id/add" android:layout_height="wrap_content" android:layout_width="wrap_content" android

    <a href="..."><img src="search.jpg" alt="Search"/></a><a href="...">Search</a>                       

測試程序

  1. 啟動螢幕報讀軟體。
  2. 確認具有文字和圖片組件的活動螢幕物件、元件和控件。
  3. 導航到此項目。
  4. 驗證沒有報讀兩次文字。
  5. 驗證每個項目沒有報讀兩個相同意義執行方法。

參考詞彙:無

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

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