본문 바로가기

성공기준 이해 1.4.8:시각적 표현 (Level AAA)

요약

목표
텍스트 모양을 사용자가 기본 설정에 맞게 변경할 수 있다.
할 일
텍스트 표시 요구 사항을 충족하거나 사용자가 이를 조정할 수 있도록 허용한다.
중요성
일부 텍스트 형식은 인지 장애가 있거나 시력이 약한 사용자가 더 쉽게 읽을 수 있다.

의도

이 성공 기준의 목적은 시각적으로 렌더링된 텍스트가 레이아웃으로 인해 가독성이 방해받지 않게 제시되는 것이다. 일부 인지적, 언어적, 학습 장애가 있거나 약시력인 사용자들은 텍스트 표현 방식이 읽기 어려운 경우 텍스트를 인식하지 못하거나 읽는 위치를 잃어버릴 수 있다.

시각 또는 인지 장애가 있는 사용자는 텍스트 색상과 배경 색상을 선택할 수 있어야 한다. 그들은 때때로 장애가 없는 사람에게는 직관적이지 않은 조합을 선택한다. 때때로 이러한 조합은 대비가 매우 낮다. 때로는 매우 특정한 색상 조합만 효과가 있는 경우도 있다. 색상이나 텍스트 표현의 다른 측면을 제어하면 이해력이 크게 달라진다.

읽기 또는 시각 장애가 있는 사람들에게는 긴 줄의 텍스트가 심각한 장벽이 될 수 있다. 그들은 자신의 자리를 지키고 텍스트의 흐름을 따르는 데 어려움을 겪는다. 좁은 텍스트 블록을 사용하면 블록의 다음 줄로 계속 진행하기가 더 쉽다. 줄은 80자 또는 글리프(CJK의 경우 40)를 초과할 수 없다. 여기서 글리프는 텍스트 쓰기 시스템에서 쓰기 요소이다. 연구 결과에 따르면 중국어, 일본어, 한국어(CJK) 문자는 모두 동일한 가독성을 달성하는 특성으로 표시될 때 CJK가 아닌 문자보다 너비가 약 2배 더 넓다. 따라서 CJK 문자의 최대 줄 너비는 CJK가 아닌 문자 최대 줄 너비의 절반이다.

인지 장애가 있는 사람들은 선과 가까이 있는 텍스트를 추적하는 데 어려움을 겪는다. 선과 문단 사이에 여분의 공간을 제공하면 다음 줄을 더 잘 추적하고 문단의 끝에 도달했을 때를 더 잘 인식할 수 있다. 예를 들어, 줄 간격과 문단 간격에 대한 여러 옵션이 있는 경우가 가장 좋다. 문단 내의 공간과 1/2에 따라 텍스트가 '단일 간격(single spaced)'일 때 줄 간격 1.5배란 한 줄의 상단에서 다음 줄 상단까지의 거리가 기본 간격(폰트의 기본 간격)의 150%라는 의미이다. 문단 간격 1.5배란 한 문단의 마지막 줄 상단에서 다음 문단 첫 줄 상단까지의 거리가 단일 간격의 250%라는 뜻이다(즉, 두 문단 사이에 1.5배의 공백이 있다).

특정 인지 장애가 있는 사람들은 왼쪽과 오른쪽 양쪽으로 정렬된 텍스트를 읽는 데 문제가 있다. 완전히 양쪽 정렬된 텍스트의 단어 사이에 고르지 않은 간격으로 인해 페이지에 공백이 많아 읽기가 어려워지고 어떤 경우에는 불가능할 수도 있다. 텍스트 양쪽 맞춤으로 인해 단어 간격이 밀접해져서 단어 경계를 찾기가 어려울 수도 있다.

이 크기 조절 규정은 시각적으로 렌더링된 텍스트(보이도록 표시된 텍스트 문자[ASCII와 같은 데이터 형식의 텍스트 문자가 아님])가 사용자가 좌우로 스크롤하지 않아도 모든 콘텐츠를 볼 수 있도록 성공적으로 확대/축소될 수 있음을 보장한다. 콘텐츠가 이렇게 작성되었을 때, 그 콘텐츠는 재정렬(reflow)이 가능하다고 말한다. 이를 통해 시력이 낮거나 인지 장애가 있는 사람들은 텍스트 크기를 키울 때 방향 감각을 잃지 않게 된다.

콘텐츠 크기 조절은 주로 사용자 에이전트의 책임이다. UAAG 1.0 Checkpoint 4.1을 충족하는 사용자 에이전트를 사용하면 사용자가 텍스트 크기를 설정할 수 있다. 저작자의 책임은 사용자 에이전트가 콘텐츠 크기를 조정하는 것을 방해하지 않고 뷰포트의 현재 너비 내에서 콘텐츠의 재정렬(reflow)을 허용하는 웹 콘텐츠를 만드는 것이다. 텍스트 크기 조정에 대한 자세한 내용은 1.4.4: 텍스트 크기 조정을 참조하라.

가로 스크롤 요구 사항은 긴 단어가 한 줄에 표시될 수 있고 사용자가 가로로 스크롤해야 하는 화면이 작은 장치에 적용하기 위한 것이 아니다. 이 요구 사항의 목적을 위해 저작자는 브라우저 창이 최대화된 표준 데스크톱/노트북 디스플레이에서 콘텐츠가 이 요구 사항을 충족하는지 확인해야 한다. 사람들은 일반적으로 몇 년 이상 컴퓨터를 사용하므로 평가할 때 최신 데스크탑/노트북 디스플레이 해상도에 의존하지 않고 몇 년 사이의 일반적인 데스크탑/노트북 디스플레이 해상도를 고려하는 것이 가장 좋다.

단어가 너무 길어서 단일 단어가 전체 화면 너비의 절반을 넘지 않는 한 줄 바꿈은 항상 가능해야 한다. 매우 긴 URI는 확대된 화면에서 벗어날 수 있지만 "읽기"를 위한 텍스트로 간주되지 않으므로 이 조항을 위반하지 않는다.

이 규정은 사용자가 가로 스크롤을 사용할 필요가 전혀 없다는 의미는 아니다. 이는 텍스트 한 줄을 읽기 위해 가로 스크롤을 앞뒤로 사용할 필요가 없다는 의미일 뿐이다. 예를 들어 페이지가 두 개의 동일한 크기의 텍스트 열(다단의)로 구성된 경우 자동으로 이 조항을 충족한다. 페이지를 확대한다는 것은 첫 번째 열이 화면에 완전히 표시되고 사용자가 페이지를 수직으로 아래로 스크롤하여 읽을 수 있음을 의미한다. 두 번째 열을 읽으려면 오른쪽으로 가로 스크롤해야 한다. 그러면 오른쪽 열이 화면 너비에 완전히 맞고 더 이상 가로 스크롤하지 않고도 해당 열을 읽을 수 있다.

이점

이 성공 기준은 저시력 사용자가 프리젠테이션 기능을 방해하지 않고 텍스트를 볼 수 있도록 돕는다. 텍스트 블록의 색상과 크기를 제어할 수 있어 더 쉽게 볼 수 있는 방식으로 텍스트를 구성할 수 있다.

이 성공 기준은 인지, 언어 및 학습 장애가 있는 사람들이 텍스트를 인식하고 텍스트 블록 내에서 위치를 추적하는 데 도움이 된다.

  • 인지 장애가 있는 사람은 자신이 원하는 전경색과 배경색 조합을 선택하면 텍스트를 더 잘 읽을 수 있다.
  • 일부 인지 장애가 있는 사용자는 텍스트 블록이 좁고 줄과 단락 사이의 간격을 구성할 수 있을 때 자신의 위치를 더 쉽게 추적할 수 있다.
  • 일부 인지 장애가 있는 사람은 단어 사이의 간격이 규칙적일 때 텍스트를 더 쉽게 읽을 수 있다.

예제

그림 1 다음 이미지는 단락의 단일 간격, 절반 간격 및 이중 간격 텍스트의 예를 보여준다.
단일 간격 텍스트의 예. (텍스트의 각 줄 사이에 공백이 없음) 절반 간격(space-and-a-half) 텍스트의 예.(텍스트 줄 높이의 절반에 해당하는 공백) 이중 간격 텍스트의 예. (각 줄 사이의 텍스트 줄 높이와 동일한 공백)

글리프의 예로 "A", "→"(화살표 기호) 및 "さ"(일본어 문자)가 있다.

관련 자료

자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.

기법

이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.

충분 기법

Instructions: Since this is a multi-part success criterion, you must satisfy one of the numbered items for each of the requirements below.

오류

다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

맨 위로