# 이미지는 반드시 대체텍스트를 가져야 합니다

<https://www.fixreports.com/ko/issues/image-alt>

WCAG 1.1.1 텍스트가 아닌 콘텐츠 · 레벨 A

이미지에 대체 텍스트가 없어 스크린 리더 사용자는 이미지가 무엇을 보여 주는지 알 수 없습니다.

## 이 규칙이 확인하는 내용
<img> 엘리먼트가 대체텍스트를 가지고 있거나 none 또는 presentation 역할(role)을 가지고 있는지 확인하세요.

## 중요한 이유
WCAG 1.1.1은 의미 있는 이미지에 대체 텍스트를 요구합니다. 대체 텍스트가 없으면 스크린 리더 사용자는 사진이 어떤 상품인지 알 수 없습니다.

## 수정 방법
### 모든 웹사이트에서
1. CMS나 템플릿에서 각 이미지의 대체 텍스트에 짧고 구체적인 설명을 추가하십시오.
2. 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
3. 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.

### Shopify에서
1. Shopify 관리자에서 제품 > [상품] > 미디어를 열고 각 이미지를 클릭해 ‘대체 텍스트’를 입력하십시오. 섹션 이미지는 온라인 스토어 > 테마 > 사용자 지정을 열고 섹션 설정에서 이미지 대체 텍스트를 설정하십시오.
2. 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
3. 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.

### WooCommerce와 WordPress에서
1. WordPress에서 미디어 > 라이브러리를 열고 각 이미지를 선택해 ‘대체 텍스트’를 입력하십시오. 상품 갤러리 이미지도 같은 필드를 사용합니다.
2. 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
3. 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.

## 수정 확인 방법
- 해당 페이지를 다시 스캔하십시오.
- 스크린 리더(Mac의 VoiceOver: Cmd+F5)로 상품 이미지가 어떻게 읽히는지 들어 보십시오.

## 출처
- axe-core 규칙 문서(Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- WCAG 1.1.1 이해하기(W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content