이 규칙이 확인하는 내용
<img> 엘리먼트가 대체텍스트를 가지고 있거나 none 또는 presentation 역할(role)을 가지고 있는지 확인하세요.
중요한 이유
WCAG 1.1.1은 의미 있는 이미지에 대체 텍스트를 요구합니다. 대체 텍스트가 없으면 스크린 리더 사용자는 사진이 어떤 상품인지 알 수 없습니다.
수정 방법
모든 웹사이트에서
- CMS나 템플릿에서 각 이미지의 대체 텍스트에 짧고 구체적인 설명을 추가하십시오.
- 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
- 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.
Shopify에서
- Shopify 관리자에서 제품 > [상품] > 미디어를 열고 각 이미지를 클릭해 ‘대체 텍스트’를 입력하십시오. 섹션 이미지는 온라인 스토어 > 테마 > 사용자 지정을 열고 섹션 설정에서 이미지 대체 텍스트를 설정하십시오.
- 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
- 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.
WooCommerce와 WordPress에서
- WordPress에서 미디어 > 라이브러리를 열고 각 이미지를 선택해 ‘대체 텍스트’를 입력하십시오. 상품 갤러리 이미지도 같은 필드를 사용합니다.
- 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
- 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.
수정 확인 방법
- 해당 페이지를 다시 스캔하십시오.
- 스크린 리더(Mac의 VoiceOver: Cmd+F5)로 상품 이미지가 어떻게 읽히는지 들어 보십시오.
FixReports가 찾아내는 방법
저희 스캔은 테스트하는 모든 페이지에서 실제 Chrome 브라우저로 axe-core 규칙 image-alt을(를) 실행하고, 실패한 요소마다 해당 페이지와 마크업, 그리고 해당하는 경우 스크린샷을 함께 보고합니다.
자동화 테스트는 이 특정 문제가 있다는 것을 확인할 뿐, 페이지의 나머지 부분이 접근 가능한지는 알 수 없습니다. 어떤 장벽은 사람이 페이지를 확인해야만 드러납니다.