# ボタンには認識可能なテキストが存在しなければなりません

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

WCAG 4.1.2 名前・役割・値・レベルA

一部のボタンにアクセシブルな名前がないため、スクリーンリーダーの利用者には「ボタン」としか聞こえません。

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

## なぜ重要なのか
WCAG 4.1.2では、すべてのコントロールに名前が求められます。名前のないボタンには、数量の増減ボタン、閉じるボタン、スライダーの矢印がよくあります。

## 修正方法
### あらゆるウェブサイトの場合
1. 名前のないボタンを見つけます。たいていはアイコンだけを表示するボタンです。
2. ボタンの機能を示す表示テキスト、視覚的に非表示のテキスト、またはaria-labelを追加します（例：aria-label="Close"やaria-label="Increase quantity"）。

### Shopifyの場合
1. 名前のないボタンを見つけます。たいていはアイコンだけを表示するボタンです。
2. ボタンの機能を示す表示テキスト、視覚的に非表示のテキスト、またはaria-labelを追加します（例：aria-label="Close"やaria-label="Increase quantity"）。

### WooCommerceとWordPressの場合
1. 名前のないボタンを見つけます。たいていはアイコンだけを表示するボタンです。
2. ボタンの機能を示す表示テキスト、視覚的に非表示のテキスト、またはaria-labelを追加します（例：aria-label="Close"やaria-label="Increase quantity"）。

## 修正の確認方法
- 該当するページを再スキャンします。
- スクリーンリーダーでボタンを確認します。

## 出典
- axe-coreのルールのドキュメント（Deque）: https://dequeuniversity.com/rules/axe/4.13/button-name
- WCAG 4.1.2の解説（W3C）: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value