# 链接必须有可辨识的文本

<https://www.fixreports.com/zh/issues/link-name>

WCAG 2.4.4 链接目的（上下文中）, 4.1.2 名称、角色、值 · A 级

部分链接没有可供屏幕阅读器朗读的文字，通常是只有图标的链接，例如社交媒体图标或购物车图标。

## 此规则检查什么
确保链接有可辨识的文本.

## 为什么重要
WCAG 2.4.4 和 4.1.2 要求链接具有描述其目的的无障碍名称。

## 如何修复
### 在任何网站上
1. 找到没有名称的链接。大多数是 <a> 标签内的图标或图片。
2. 在链接内添加视觉上隐藏的文字，或添加 aria-label，例如 aria-label="Instagram" 或 aria-label="Cart"。
3. 如果链接包裹的是图片，请改为给图片添加有意义的替代文本。

### 在 Shopify 上
1. 找到没有名称的链接。大多数是 <a> 标签内的图标或图片。
2. 在链接内添加视觉上隐藏的文字，或添加 aria-label，例如 aria-label="Instagram" 或 aria-label="Cart"。
3. 如果链接包裹的是图片，请改为给图片添加有意义的替代文本。

### 在 WooCommerce 和 WordPress 上
1. 找到没有名称的链接。大多数是 <a> 标签内的图标或图片。
2. 在链接内添加视觉上隐藏的文字，或添加 aria-label，例如 aria-label="Instagram" 或 aria-label="Cart"。
3. 如果链接包裹的是图片，请改为给图片添加有意义的替代文本。

## 如何检查修复效果
- 重新扫描，确认 link-name 已消失。
- 在运行屏幕阅读器的情况下，用 Tab 键依次移到每个链接，收听其名称。

## 资料来源
- axe-core 规则文档（Deque）: https://dequeuniversity.com/rules/axe/4.13/link-name
- 理解 WCAG 2.4.4（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context
- 理解 WCAG 4.1.2（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value