1.4.5 텍스트 이미지

(Level AA)

요약

목표: 사용자는 텍스트가 표시되는 방식을 조정할 수 있다.
할 일: 텍스트 이미지 대신 텍스트를 사용하라.
중요성: 사용자는 이미지의 텍스트 모양을 변경할 수 없다.

성공 기준(SC)

사용 중인 기술로 동일한 시각적 표현을 구현할 수 있는 경우, 다음의 예외를 제외하고 정보 전달에 텍스트 이미지 대신 텍스트를 사용하라.

사용자 정의 가능한: 텍스트 이미지를 사용자의 요구에 맞게 시각적으로 조절(visually customized)할 수 있는 경우
필수적인: 특정한 텍스트 표현 방식이 전달하려는 정보에 필수적인 경우

참고

로고타입(로고 또는 브랜드 이름의 일부인 텍스트)은 필수적인 것으로 간주한다.

의도

이 성공 기준의 의도는, 기본 시각적 표현을 원하는 대로 구현할 수 있는 저작자가 특정 시각적 텍스트 표현을 필요로 하는 사용자의 필요에 따라 텍스트 표현을 조정할 수 있도록 하는 것을 권장하는 데 있다. 여기에는 특정 글꼴 크기, 전경색 및 배경색, 글꼴, 줄 간격 또는 정렬 방식이 필요한 사용자가 포함된다.

저작자가 텍스트로 동일한 시각적 효과를 구현할 수 있다면, 이미지 대신 텍스트로 정보를 제공해야 한다. 어떠한 이유로든 저작자가 동일한 효과를 내도록 텍스트 서식을 지정할 수 없거나, 일반적으로 사용되는 사용자 에이전트에서 해당 효과를 안정적으로 표현할 수 없는 경우에는 텍스트 이미지를 사용할 수 있다. 또 이 기준을 충족하기 위한 기술 사용이 1.4.4와 같은 다른 기준의 충족을 방해하는 경우에도 텍스트 이미지를 사용할 수 있다. 여기에는 서체 예시, 로고타입, 브랜딩 등 특정 텍스트 표현 방식이 전달하려는 정보에 필수적인 경우가 포함된다. 또한 널리 배포되지 않았거나 저작자에게 재배포 권한이 없는 특정 글꼴을 사용하기 위해, 혹은 모든 사용자 에이전트에서 텍스트에 안티앨리어싱이 적용되도록 보장하기 위해 텍스트 이미지를 사용할 수 있다.

사용자가 자신의 요구에 맞게 텍스트 이미지를 조절할 수 있는 경우에도 텍스트 이미지를 사용할 수 있다.

텍스트 이미지의 정의에는 다음과 같은 참고 사항이 포함된다. 이는 중요한 시각적 콘텐츠를 포함하는 그림의 일부인 텍스트에는 해당하지 않는다. 이러한 그림의 예로는 텍스트 외의 시각적 요소를 통해 중요한 정보를 전달하는 그래프, 스크린샷, 다이어그램 등이 있다.

참고

이 성공 기준은 텍스트 대신 텍스트 이미지가 사용되는 상황을 다루기 위한 것이다. 텍스트 이미지가 텍스트와 함께 동일한 정보를 전달하는 데 사용되고, 두 가지 모두 사용자에게 제공되는 경우에는 이 성공 기준을 충족한다. 이를 통해 저작자는 원하는 스타일로 콘텐츠를 표현하면서도 텍스트로 정보를 함께 제공할 수 있으며, 사용자는 해당 텍스트를 조작하여 더 잘 구별할 수 있다. 이는 텍스트와 함께 사용되는지 여부에 관계없이 모든 텍스트 이미지에 적용되는 1.4.9 텍스트 이미지(예외 없음)와는 대조적이다.

이 성공 기준을 충족하기 위한 기법은 성공 기준 1.4.9의 기법과 동일하지만, 저작자가 사용하는 기술로 시각적 표현을 구현할 수 있는 경우에만 적용하면 된다. 성공 기준 1.4.9의 경우, 충분 기법은 사용자가 출력을 조절할 수 있을 때에만 적용된다.

성공 기준 1.4.9 텍스트 이미지(예외 없음)을 참조하라.

이점

저시력 사용자(저작자가 지정한 글꼴, 크기 및/또는 색상으로 텍스트를 읽는 데 어려움을 겪을 수 있는 사람).
시각적 추적 문제가 있는 사용자(저작자가 지정한 줄 간격 및/또는 정렬 방식으로 텍스트를 읽는 데 어려움을 겪을 수 있는 사람).
읽기에 영향을 미치는 인지 장애가 있는 사용자.

예제

스타일이 적용된 제목: 비트맵 이미지를 사용하여 특정 글꼴과 크기로 제목을 표시하는 대신, 저작자는 CSS를 사용하여 동일한 결과를 구현한다.
동적으로 생성된 이미지: 웹 페이지는 서버 측 스크립팅을 사용하여 텍스트를 이미지로 표시한다. 해당 페이지에는 사용자가 생성된 이미지의 글꼴 크기와 전경색 및 배경색을 조절할 수 있는 컨트롤이 포함되어 있다.
인용문: 웹 페이지에 인용문이 포함되어 있다. 인용문 자체는 기울임꼴 텍스트로 표시되며 왼쪽 여백에서 들여쓰기된다. 인용문의 출처 인물 이름은 인용문 아래에 1.5배의 줄 간격으로 표시되며 왼쪽 여백에서 더 들여쓰기된다. CSS를 사용하여 텍스트의 위치를 지정하고, 줄 간격을 설정하며, 글꼴, 크기, 색상 및 장식을 표시한다.
탐색 항목: 웹 페이지에 대상을 설명하는 아이콘과 텍스트가 모두 포함된 탐색 링크 메뉴가 있다. CSS를 사용하여 텍스트의 글꼴, 크기, 전경색 및 배경색과 탐색 링크 간의 간격을 표시한다.
텍스트가 포함된 로고: 웹사이트의 각 웹 페이지 왼쪽 상단에 조직의 로고가 포함되어 있다. 로고에는 로고타입(로고의 일부 또는 전체를 구성하는 텍스트)이 포함되어 있다. 텍스트의 시각적 표현은 로고의 정체성에 필수적이며, 텍스트 속성을 변경할 수 없는 GIF 이미지로 포함되어 있다. 해당 이미지에는 대체 텍스트가 제공된다.
글꼴 표현: 웹 페이지에 특정 글꼴에 대한 정보가 포함되어 있다. 해당 글꼴을 다른 글꼴로 대체하면 표현의 목적이 훼손된다. 표현은 텍스트 속성을 변경할 수 없는 JPEG 이미지로 포함되어 있다. 해당 이미지에는 대체 텍스트가 제공된다.
편지 원본: 웹 페이지에 편지 원본이 포함되어 있다. 원본 형식으로 된 편지의 묘사는 편지가 작성된 시대에 관해 전달하려는 정보에 필수적이다. 편지는 텍스트 속성을 변경할 수 없는 GIF 이미지로 포함되어 있다. 해당 이미지에는 대체 텍스트가 제공된다.
기호 텍스트 문자: 양식을 통해 사용자가 텍스트 블록을 입력할 수 있다. 양식에는 텍스트 스타일 지정 및 맞춤법 검사 기능을 포함한 여러 버튼이 있다. 일부 버튼은 사람의 언어로 의미 있는 문자열을 구성하지 않는 텍스트 문자를 사용한다. 예를 들어 글꼴 굵기를 변경하는 “B”, 텍스트를 기울이는 “I”, 맞춤법을 검사하는 “ABC” 등이 있다. 기호 텍스트 문자는 텍스트 속성을 변경할 수 없는 GIF 이미지로 포함되어 있다. 버튼에는 대체 텍스트가 제공된다.
텍스트 이미지의 글꼴 설정 조절: 웹사이트에서 사용자가 글꼴 설정을 지정할 수 있으며, 사이트의 모든 텍스트 이미지는 해당 설정을 기반으로 제공된다.
이미지의 텍스트를 별도의 텍스트로도 제공: 사용자가 텍스트가 포함된 이벤트 포스터 이미지를 웹사이트의 이벤트 캘린더에 업로드해야 한다. 사이트의 CMS(콘텐츠 관리 시스템)가 제한적이어서 포스터를 HTML/CSS/SVG로 재현할 수 없다. 그러나 이미지 외에도 캘린더 항목에 일반 텍스트를 추가할 수 있으므로, 포스터와 이미지에 포함된 텍스트를 함께 게시한다. 이 텍스트는 사이트의 캘린더 페이지에서 포스터 이미지 옆에 표시된다.

기법

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

충분 기법

조언 기법

준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.

점검 규칙

다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.

HTML images contain no text

1.4.5 텍스트 이미지

요약

의도

이점

예제

관련 자료

기법

충분 기법

조언 기법

점검 규칙