# リンクには認識可能なテキストがなければなりません

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

WCAG 2.4.4 リンクの目的（コンテキスト内）, 4.1.2 名前・役割・値・レベルA

一部のリンクに、スクリーンリーダーが読み上げられるテキストがありません。多くはSNSのアイコンやカートのアイコンなど、アイコンだけのリンクです。

## このルールがチェックする内容
リンクに認識可能なテキストが存在することを確認してください.

## なぜ重要なのか
WCAG 2.4.4と4.1.2では、リンクにその目的を説明するアクセシブルな名前が求められます。

## 修正方法
### あらゆるウェブサイトの場合
1. 名前のないリンクを見つけます。ほとんどは<a>タグ内のアイコンや画像です。
2. リンク内に視覚的に非表示のテキストを追加するか、aria-label="Instagram"やaria-label="Cart"のようなaria-labelを追加します。
3. リンクが画像を囲んでいる場合は、代わりにその画像に意味のある代替テキストを付けます。

### Shopifyの場合
1. 名前のないリンクを見つけます。ほとんどは<a>タグ内のアイコンや画像です。
2. リンク内に視覚的に非表示のテキストを追加するか、aria-label="Instagram"やaria-label="Cart"のようなaria-labelを追加します。
3. リンクが画像を囲んでいる場合は、代わりにその画像に意味のある代替テキストを付けます。

### WooCommerceとWordPressの場合
1. 名前のないリンクを見つけます。ほとんどは<a>タグ内のアイコンや画像です。
2. リンク内に視覚的に非表示のテキストを追加するか、aria-label="Instagram"やaria-label="Cart"のようなaria-labelを追加します。
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