# 버튼에 반드시 인식 가능한 텍스트가 있어야 합니다

<https://www.fixreports.com/ko/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