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

LK1描述式鏈結

規則識別碼

LK1

規則名稱

描述式鏈結

規則類型

原子規則

規則說明

鏈結和導航文字必須唯一地描述鏈結或項目的目標或功能。

無障礙要求對應

網站無障礙規範

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

適用性

適用於鏈結內容。

期望

以下檢查正確:

通過文字(在螢幕上或螢幕外)或替代文字可以充分描述鏈結、按鈕或導航項目,以清楚地指出其目的。

注意:使用螢幕報讀軟體可以最輕鬆地驗證螢幕外文字。如果文字創建正確,則螢幕報讀軟體會報讀該文字,但不會出現在螢幕上。

假設條件

該規則假定,在網頁的上下文中看到鏈結的目的通常不會對使用者造成歧義,這是「成功準則2.4.4 鏈結目的(脈絡)」提到的例外。如果鏈結通常對使用者不明確,則輔助技術的使用者在脫離上下文查看鏈結時不會處於不利地位,這使鏈結問題是普通使用者體驗問題,而不是無障礙問題。

該規則假定所有具有“link”語義角色的元素都用作鏈結。

無障礙支援

  • iOS/Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:由於不同的瀏覽器或輔助技術之間對角色衝突的解析,實作上會有差異,因此,某些元素可以具有“link”語義角色,某些技術中可能無法通過此規則,但是其他技術的使用者將不會遇到任何無障礙問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用 accessibilityLabel 屬性識別頁面中具有相同可見文本的鏈結或按鈕。例如,如果頁面含有2個”編輯”按鈕,一個用於編輯電子郵件地址,一個用於編輯電話號碼,可採取範例之方法為兩者提供唯一的標籤。

使用 contentDescription 屬性識別頁面中具有相同可見文本的鏈結或按鈕。例如,如果頁面含有2個”編輯”按鈕,一個用於編輯電子郵件地址,一個用於編輯電話號碼,可採取範例之方法為兩者提供唯一的標籤。

使用螢幕外的文字識別頁面中具有相同可見文本的鏈結。例如,如果頁面含有2個”編輯”按鈕,一個用於編輯電子郵件地址,一個用於編輯電話號碼,可採取範例之方法。

成功範例原始碼

[deleteNameButton.setAccessibilityLabel:@"Delete name"];

[deleteAddressButton.setAccessibilityLabel:@"Delete address"];

 <Button

  …

  android:id="@+id/button_deleteName"

  android:contentDescription="Delete name"

  … />

<Button

  …

  android:id="@+id/button_deleteAddress"

  android:contentDescription="Delete phone number"

  … />

 <style>

  .visually-hidden {

  clip: rect(1px 1px 1px 1px); /* IE 6/7 */

  clip: rect(1px, 1px, 1px, 1px);

  -webkit-clip-path: inset(50%) !important;

  clip-path: inset(50%) !important;

  height: 1px;

  overflow: hidden;

  position: absolute;

  white-space: nowrap;

  width: 1px;

  }

</style>

<p><a href="…">Edit <span class="visually-hidden">email address</span></a></p>

<p><a href="…">Edit <span class="visually-hidden">phone number</span></a></p>

失敗範例原始碼

[dNameBtn setAccessibilityLabel:@"Delete"];

[dAddressBtn setAccessibilityLabel:@"Delete"];

<Button android:contentDescription="Delete" ...> </Button>

<Button android:contentDescription="Delete" ...> </Button>

<p>Content 1 title and description.

    <a href="page1.html>More</a>

</p>

<p>Content 2 title and Rule description.

    <a href="page2.html>More</a>

</p>

<p>Content 3 title and Rule description.

    <a href="page3.html>More</a>

</p>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 找到鏈結、按鈕或導航項目。
  3. 確定鏈結或項目本身是否足以唯一地描述組件並清楚地指出其目的。

參考詞彙:無

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

參考資源:

  1. Descriptive links, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G91: Providing link text that describes the purpose of a link, Techniques for WCAG 2.0。