성공 기준(SC)
1.4.4 텍스트 크기 조정
(Level AA)
- 목표
- 텍스트를 확대할 수 있다.
- 할 일
- 텍스트 크기를 두 배까지 키울 수 있도록 보장해야 한다.
- 중요성
- 일부 사용자는 텍스트가 더 클 때만 읽을 수 있다.
이 성공 기준의 목적은 텍스트를 사용하는 컨트롤과 레이블을 포함하여 시각적으로 렌더링된 텍스트를 더 크게 만들 수 있도록 보장하는 것이다. 이는(화면 확대기와 같은) 보조 기술 없이도 경증 시각 장애가 있는 사용자가 더 쉽게 읽을 수 있도록 하기 위함이다. 사용자는 웹페이지의 모든 콘텐츠를 확대하여 도움을 받을 수 있지만, 텍스트가 가장 중요하다.
사용자 에이전트의 책임은 주로 콘텐츠를 확대하거나 축소하는 것이다. UAAG 1.0 Checkpoint 4.1을 충족하는 사용자 에이전트는 전체 페이지 콘텐츠의 확대 축소, 부분 확대, 텍스트 전용 크기 조정, 그리고 렌더링된 텍스트의 크기를 사용자가 설정할 수 있도록 허용하는 등 다양한 메커니즘을 통해 사용자가 텍스트 크기를 구성할 수 있게 한다. 저작자의 책임은 사용자 에이전트가 콘텐츠를 효과적으로 확대하거나 축소하는 것을 방해하지 않는 웹페이지 콘텐츠를 만드는 것이다. 저작자는 텍스트 기반의 컨트롤을 포함하여 텍스트 크기 조정을 지원하는 사용자 에이전트의 기능을 방해하지 않음을 확인하거나, 텍스트 크기 조정 또는 레이아웃 변경을 직접 지원함으로써 이 성공 기준을 충족할 수 있다. 직접 지원의 예로는 다양한 스타일시트를 할당하는 데 사용할 수 있는 서버사이드 스크립트 등이 있다.
사용자 에이전트가 지원하는 하나 이상의 텍스트 크기 조정 메커니즘을 사용하여 콘텐츠를 200%까지 확대할 수 있다면 해당 콘텐츠는 성공 기준을 충족하는 것으로 본다.
저작자가 사용하는 기술의 사용자 에이전트가 특정 텍스트 크기 조정 메커니즘을 지원하지 않는 경우, 저작자는 해당 기능을 직접 제공하거나 사용자 에이전트가 제공하는 기능과 호환되는 콘텐츠를 제공할 책임이 있다. 예를 들어, 사용자 에이전트가 전체 화면 확대 기능을 제공하지 않더라도 사용자가 텍스트 크기를 변경할 수 있게 한다면, 저작자는 텍스트 크기가 조정될 때에도 콘텐츠를 계속 사용할 수 있도록 보장하는 것이다.
레이블 역할을 수행하고 콘텐츠에 접근하기 위해 사용자의 활성화가 필요한 일부 사용자 인터페이스 구성요소는 레이블의 콘텐츠를 모두 담을 만큼 너비가 충분하지 않을 수 있다. 예를 들어, 웹 메일 애플리케이션에서 제목 열은 모든 제목을 표시하기에 너비가 부족할 수 있지만, 해당 제목을 활성화하면 사용자는 전체 제목이 포함된 전체 메시지로 이동하게 된다. 웹 기반 스프레드시트의 경우, 열에 표시하기에 너무 긴 셀 콘텐츠는 잘릴 수 있으며, 셀에 초점이 맞춰지면 셀의 전체 콘텐츠를 사용자가 확인할 수 있다. 또한 사용자가 열 너비를 조정할 수 있는 인터페이스에서는 사용자 인터페이스 구성요소의 콘텐츠가 너무 넓어질 수도 있다. 이러한 유형의 사용자 인터페이스 구성요소에서는 줄 바꿈이 필수적이지 않으며, 구성요소의 전체 콘텐츠를 초점 시 또는 사용자 활성화 후에 확인할 수 있고, 이 정보에 접근할 수 있다는 표시가 단순히 잘려 있다는 사실 외에 다른 방식으로 사용자에게 제공된다면 콘텐츠를 자르는 방식도 허용한다.
콘텐츠를 너비와 높이 각각 최대 두 배인 200%까지 확대할 수 있다면 성공 기준을 충족한 것으로 본다. 저작자는 그 이상의 확대를 지원할 수 있으나, 확대가 심해질수록 적응형 레이아웃에서 운용상의 문제가 발생할 수 있다. 예를 들어, 단어가 사용 가능한 가로 공간보다 넓어져 일부가 잘릴 수 있다. 또한 레이아웃의 제약으로 인해 텍스트를 크게 확대했을 때 다른 콘텐츠와 겹치는 현상이 발생할 수 있다. 또는 한 줄에 문장의 단어 하나만 표시되어 문장이 읽기 어려운 세로 형태의 텍스트 열로 나타날 수도 있다.
사용자 에이전트가 제공하거나 저작자가 구현한 크기 조정 메커니즘이 100%에서 200% 사이의 점진적인 크기 조정 단계를 제공하는 경우, 저작자는 모든 단계에서 콘텐츠나 기능의 손실이 없도록 보장해야 한다.
실무 그룹은 200%가 다양한 디자인과 레이아웃을 지원할 수 있는 합리적인 수치이며, 최소 200%의 확대 기능을 제공하는 구형 확대기와도 상호 보완적이라고 판단한다. 200%를 초과하는 경우에는 텍스트, 이미지, 레이아웃 영역의 크기를 조정하고 가로 및 세로 스크롤이 모두 필요할 수 있는 더 큰 캔버스를 생성하는 전체 화면 확대 방식이 텍스트 전용 크기 조정보다 더 효과적일 수 있다. 이러한 상황에서는 대개 확대 지원 전용 보조 기술이 사용되며, 이는 저작자가 사용자를 직접 지원하려는 시도보다 더 나은 접근성을 제공할 수 있다.
참고
텍스트 이미지는 확대 시 계단현상이 나타나는 경향이 있어 텍스트만큼 효과적으로 확대되지 않으므로, 가능한 모든 곳에 텍스트를 사용하는 것이 좋다. 또한 일부 사용자에게 필수적인 전경 및 배경의 대비와 색상 조합을 변경하는 것도 텍스트 이미지의 경우 더 어렵다. 성공 기준 1.4.5 텍스트 이미지를 함께 참고하라.
참고
대부분의 다른 성공 기준과 마찬가지로, 이 기준은 다양한 화면 크기에 맞춰 자동적으로 제시되는 웹페이지의 각 변형에 적용된다. 사용자가 확대할 때 텍스트 크기가 일관되게 증가하지 않는 구현 방식에서도, 이 기준을 충족하기 위해서는 여전히 200% 확대를 구현할 수 있어야 한다.
예를 들어, 브라우저의 기본 설정인 100% 확대 상태에서 창의 너비가 1280 CSS 픽셀일 때 텍스트가 20px로 설정되어 있다면, 200% 확대 시 시각적으로는 두 배 크기로 나타날 것이다. 400% 확대 후 페이지가 320 CSS 픽셀 뷰포트에 맞춰 재배치될 때, 저작자가 페이지의 텍스트 크기를 10px로 설정할 수 있다. 이때 텍스트는 CSS 픽셀 기준으로 원래 크기의 절반이지만, 400%로 확대되었으므로 100% 확대인 브라우저 기본 설정과 비교하면 여전히 두 배 크기로 표시된다. 특정 중단점 내에 머물면서 텍스트 200% 확대를 달성해야 하는 것은 아니지만, 기본 100% 확대와 비교했을 때 어떤 방식으로든 텍스트 200% 확대가 가능해야 한다.
1.4.3: 시각적 표현 또한 참고하라.
- 이 성공 기준은 저시력 사용자가 콘텐츠의 텍스트 크기를 키워 읽을 수 있도록 도움을 준다.
- 시각 장애가 있는 사용자가 브라우저에서 웹페이지의 텍스트 크기를 1em에서 1.2em으로 키운다. 사용자는 작은 크기에서는 텍스트를 읽을 수 없었으나, 더 큰 텍스트는 읽을 수 있다. 텍스트에 더 큰 글꼴을 사용하더라도 페이지의 모든 정보는 계속 표시된다.
- 웹페이지에 페이지 크기를 변경하는 컨트롤이 포함되어 있다. 서로 다른 설정을 선택하면 해당 크기에 최적화된 디자인을 사용하도록 페이지의 레이아웃이 변경된다.
- 사용자가 브라우저의 전체 페이지 확대 기능을 사용하여 콘텐츠의 크기를 변경한다. 모든 콘텐츠가 균일하게 확대되며, 필요한 경우 브라우저가 스크롤바를 제공한다.
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
- CSS 2 Box Model
- CSS 2 Visual formatting Model
- CSS 2 Visual formatting Model Details
- About fluid and fixed width layouts
- Accessible CSS
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
- G142: Using a technology that has commonly-available user agents that support zoom
- Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
-
Techniques for relative measurements
-
Techniques for text container resizing
- G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
- G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.
- C17: Scaling form elements which contain text
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
- C22: Using CSS to control visual presentation of text
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
- F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%
- F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.