WCAG 2.2 · 1. 인식의 용이성 · 1.4 구별 가능
1.4.5 텍스트 이미지
Images of Text
기술적으로 텍스트로 표현할 수 있다면 글자를 이미지로 만들지 말고 실제 텍스트를 사용해야 합니다.
수준 AAWCAG 2.0
한눈에 보기
- 성공 기준
- 1.4.5 텍스트 이미지
- 수준
- 수준 AA
- 원칙
- 1. 인식의 용이성
- 지침
- 1.4 구별 가능
- 도입
- WCAG 2.0
요구 사항
사용하는 기술로 원하는 시각적 표현을 만들 수 있다면, 정보를 전달할 때 텍스트 이미지 대신 텍스트를 사용합니다. 예외: 사용자가 원하는 대로 바꿀 수 있는 텍스트 이미지(사용자 정의 가능), 특정 표현이 정보 전달에 필수인 경우(로고, 글꼴 견본 등).
왜 필요한가요
텍스트 이미지는 확대하면 깨지고, 글꼴·색·간격을 사용자 설정에 맞게 바꿀 수 없으며, 번역·검색도 되지 않습니다.
도움받는 사용자
- 저시력 사용자(화면 확대 사용자)
- 인지·학습 장애가 있는 사용자
- 난독증이 있는 사용자
- 사용자 스타일을 쓰는 사용자
적용 방법
- 배너·버튼의 문구는 웹 폰트와 CSS로 만든 실제 텍스트로 구현합니다.
- 상세 페이지 안내 이미지 안의 긴 글은 HTML 텍스트로 제공합니다.
- 불가피하게 이미지를 쓴다면 대체 텍스트(1.1.1)에 같은 내용을 넣습니다.
자주 하는 실수
- 이벤트 안내 문구 전체를 한 장의 이미지로 만듭니다.
- 버튼이나 메뉴 글자를 이미지로 만듭니다.
검사 방법
- 이미지 안에 글자가 있는지 확인하고, CSS로 같은 표현이 가능한지 판단합니다.
- 로고 등 예외에 해당하는지 확인합니다.