# 링크는 반드시 인식 가능한 텍스트를 가져야 합니다

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

WCAG 2.4.4 링크 목적(맥락 내), 4.1.2 이름, 역할, 값 · 레벨 A

일부 링크에 스크린 리더가 읽을 수 있는 텍스트가 없습니다. 소셜 아이콘이나 장바구니 아이콘처럼 아이콘만 있는 링크가 흔한 예입니다.

## 이 규칙이 확인하는 내용
링크가 인식 가능한 텍스트를 가지고 있는지 확인하세요.

## 중요한 이유
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