성공 기준(SC)
1.4.9 텍스트 이미지(예외 없음)
(Level AAA)
- 목표
- 사용자는 언제든지 텍스트 표시 방법을 조정할 수 있다.
- 할 일
- 정보를 표시할 다른 방법이 있다면 텍스트 이미지를 사용하지 않는다.
- 중요성
- 사람은 이미지의 텍스트 표시를 변경할 수 없다.
이 성공 기준의 목적은 특정한 시각적 텍스트 표현이 필요한 사람이 필요에 맞게 텍스트 표시를 조절할 수 있도록 하는 것이다. 여기에는 특정한 글꼴 크기, 전경색과 배경색, 글꼴 종류, 줄 간격 또는 정렬로 텍스트를 필요로 하는 사람이 포함된다.
이는 텍스트의 표시 방식을 바꿀 수 있게 구현하거나, 사용자가 대체 표시를 선택할 수 있는 수단을 제공하는 것을 뜻한다. 텍스트 이미지를 사용하는 것은 그 안의 텍스트 표시를 사용자가 바꿀 수 없게 구현한 사례다.
어떤 상황에서는 특정한 시각적 텍스트 표현이 전달하려는 정보에 필수적이다. 이는 그 특정한 시각적 표현이 없으면 정보가 손실된다는 뜻이다. 이 경우 텍스트의 표시 방식을 바꿀 수 있게 구현할 필요는 없다. 여기에는 특정 글꼴 종류처럼 텍스트의 특정한 시각적 측면을 보여주는 텍스트, 또는 회사 로고 안의 텍스트처럼 정체성을 전달하는 텍스트가 포함된다.
장식용 텍스트는 표시 방식을 바꿀 수 있게 구현할 필요가 없다.
텍스트 이미지의 정의에는 다음 참고가 포함되어 있다.
참고: 여기에는 중요한 다른 시각적 콘텐츠를 담고 있는 그림의 일부인 텍스트는 포함되지 않는다. 그러한 그림의 예로는 그래프, 스크린샷, 다이어그램이 있다. 이들은 텍스트만이 아니라 다른 시각 요소를 통해서도 중요한 정보를 전달한다.
- 저시력인 사람(저작자가 지정한 글꼴 종류, 크기, 색상으로는 텍스트를 읽기 어려운 사람)
- 시각 추적에 어려움이 있는 사람(저작자가 지정한 줄 간격, 정렬로는 텍스트를 읽기 어려운 사람)
- 읽기에 영향을 주는 인지 장애가 있는 사람
- 인용문
웹 페이지에 인용문이 있다. 인용문 자체는 기울임꼴로 왼쪽 여백에서 들여쓰기되어 표시된다. 인용문의 출처인 사람의 이름은 인용문 아래에 1.5배 줄 간격으로, 왼쪽 여백에서 더 들여쓰기되어 있다. CSS를 사용하여 텍스트의 위치를 잡고, 줄 사이 간격을 설정하며, 텍스트의 글꼴 종류, 크기, 색상, 장식을 표시한다.
- 내비게이션 항목
웹 페이지에 대상을 설명하는 아이콘과 텍스트를 함께 갖춘 내비게이션 링크 메뉴가 있다. CSS를 사용하여 텍스트의 글꼴 종류, 크기, 전경색과 배경색, 그리고 내비게이션 링크 사이의 간격을 표시한다.
- 텍스트가 포함된 로고
한 웹사이트가 각 웹 페이지의 왼쪽 상단에 조직의 로고를 두고 있다. 이 로고에는 로고타입(로고의 일부 또는 전체를 이루는 텍스트)이 담겨 있다. 이 텍스트의 시각적 표현은 로고의 정체성에 필수적이며, 텍스트 특성을 바꿀 수 없는 gif 이미지로 포함되어 있다. 이 이미지에는 대체 텍스트가 있다.
- 글꼴의 표현
웹 페이지에 특정 글꼴에 관한 정보가 있다. 그 글꼴을 다른 글꼴로 대체하면 표현의 목적이 사라진다. 이 표현은 텍스트 특성을 바꿀 수 없는 jpeg 이미지로 포함되어 있다. 이 이미지에는 대체 텍스트가 있다.
- 편지의 표현
웹 페이지에서 원본 편지를 보여주고 있다. 편지를 원래 형태로 묘사하는 것은 그 편지가 쓰인 시대에 관해 전달하려는 정보에 필수적이다. 이 편지는 텍스트 특성을 바꿀 수 없는 gif 이미지로 포함되어 있다. 이 이미지에는 대체 텍스트가 있다.
- 기호 텍스트 문자
한 양식에서 사용자가 텍스트 블록을 입력할 수 있다. 이 양식은 텍스트에 스타일을 적용하고 맞춤법을 검사하는 기능을 비롯한 여러 버튼을 제공한다. 일부 버튼은 인간 언어의 의미를 담지 않는 텍스트 문자를 사용한다. 예를 들어 글꼴 굵기를 키우는 “B”, 텍스트를 기울이는 “I”, 맞춤법을 검사하는 “ABC”가 있다. 이 기호 텍스트 문자는 텍스트 특성을 바꿀 수 없는 gif 이미지로 포함되어 있다. 이 버튼들에는 대체 텍스트가 있다.
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
- CSS Web fonts
- Weblog comments: WebKit now supports CSS @font-face rules
- Creating Cross Browser Compatible CSS Text Shadows
- CSS and text
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
- C22: Using CSS to control visual presentation of text
- C30: Using CSS to replace text with images of text and providing user interface controls to switch
- G140: Separating information and structure from presentation to enable different presentations
- PDF7: Performing OCR on a scanned PDF document to provide actual text
준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.
- C12: Using percent for font sizes
- C13: Using named font sizes
- C14: Using em units for font sizes
- C8: Using CSS letter-spacing to control spacing within a word
- C6: Positioning content based on structural markup
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.