1.4 명료성

사용자가 콘텐츠를 보고 들을 수 있도록 명확하게 구분할 수 있어야 합니다.

1.4.1 컬러 활용 (A)

색상 만으로 정보 전달, 행동을 지시하고, 반응을 유발하고, 시각적 요소를 식별하는 시각적인 용도로 사용하면 안됩니다.

이 가이드라인은 특별히 색상의 인식에 대해 다룹니다. 색상 및 기타 시각적 표현 코딩에 대한 프로그래밍 방식의 접근을 포함하여 가이드라인 1.3에서 다른 형태의 인식으로 다루어집니다.

1.4.2 오디오 컨트롤 (A)

3초 이상 자동으로 웹 페이지가 오디오를 출력한다면, 오디오 재생을 일시정지 하거나 멈추게 하는 기능 또는 오디오 볼륨을 조절할 수 있는 기능을 제공해야 합니다.

이 가이드라인을 충족시키지 못하는 콘텐츠는 사용자의 전체 페이지 사용 능력을 저해 할 수 있으므로 웹 페이지의 모든 콘텐츠(다른 가이드라인을 충족시키는 데 사용되는지 여부와 관계 없음)는 이 가이드라인을 충족해야합니다. 보다 자세한 내용은 적합성 요구 - 5. 비간섭을 참고하세요.

1.4.3 대비 (AA)

텍스트 또는 이미지 텍스트의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차는 최소 4.5:1이 되어야 합니다.

큰 텍스트 24px 이상 또는 18px Bold 텍스트의 경우 3:1 명도 대비 차까지 허용합니다.
중요하지 않은 비 활성화된 UI 컴포넌트 텍스트나 이미지의 텍스트, 순수한 표현 장식, 보이지 않는 콘텐츠, 중요한 다른 시각적인 콘텐츠를 포함하는 그림은 별도의 명도 대비 요구가 없습니다.
로고타입(Logotypes) 로고나 브랜드의 텍스트는 최소한의 명도 대비 요구가 없습니다.

1.4.4 텍스트 크기 조정 (AA)

캡션 및 이미지 텍스트를 제외하고, 텍스트는 콘텐츠와 기능의 손실없이 200% 이상 보조기술 없이 크기 조정이 가능해야 합니다.

1.4.5 이미지 텍스트 (AA)

시각적인 표현을 성취할 수 있는 기술들이 사용될 때, 텍스트는 다음을 제외하고 이미지의 텍스트 보다 많은 정보를 전달할 수 있어야 합니다.

맞춤 설정 가능 (Customizable) 이미지 텍스트는 사용자의 요구에 따라 시각적으로 사용자가 조정 가능해야 합니다.
필수 (Essential) 텍스트의 특정한 표현은 정보가 전달될 때 필수입니다.

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

1.4.6 향상된 대비 (AAA)

텍스트 또는 이미지 텍스트의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차는 적어도 7:1이 되어야 합니다.

큰 텍스트 24px 이상 또는 18px Bold 텍스트의 경우 4.5:1 명도 대비 차까지 허용합니다.
중요하지 않은 비 활성화된 UI 컴포넌트 텍스트나 이미지의 텍스트, 순수한 표현 장식, 보이지 않는 콘텐츠, 중요한 다른 시각적인 콘텐츠를 포함하는 그림은 별도의 명도 대비 요구가 없습니다.
로고타입(Logotypes) 로고나 브랜드의 텍스트는 최소한의 명도 대비 요구가 없습니다.

1.4.7 작거나, 배경음악 아님 (AAA)

일반 오디오(예: 사용자가 의도를 가지고 재생한 음성) 이거나, 오디오 CAPTCHA 또는 로고 송이 아니고, 노래 또는 랩과 같이 가사를 제공하는 음악 표현이 아닌, 사전 녹음된 오디오 전용 콘텐츠의 경우 배경음악이 아닙니다.

배경음악이 아님 배경음악을 포함하지 않는 오디오입니다.
오디오 끄기 배경음악을 끌 수 있습니다.
20데시벨(dB) 배경음악의 데시벨 강도가 20dB 보다 작습니다.

데시벨(dB) 정의에 따라 이 요구 사항을 충족하는 배경 사운드는 일반 음성 콘텐츠(예: 스크린 리더) 보다 약 4배 정도 조용해야 합니다.

1.4.8 시각적 표현 (AAA)

텍스트 블록을 시각적으로 표현하기 위해 다음과 같은 메커니즘을 사용할 수 있습니다.

전경색과 배경색은 사용자가 선택할 수 있어야 합니다.
너비는 80 글자나 글리프 (CJK의 경우 40자)를 넘으면 안됩니다.
텍스트는 양쪽정렬이 아니어야 합니다. (왼쪽과 오른쪽 여백에 양 정렬 됨)
행간(단락 사이 간격)은 적어도 글자 높이의 1.5배 이상 되어야 합니다.
전체화면에서 콘텐츠를 읽거나, 기능을 사용하는데 문제가 없도록, 보조기술 없이 200% 확대 하더라도 가로 방향으로 스크롤이 생기면 안됩니다.

1.4.9 이미지 텍스트: 예외 X (AAA)

이미지 텍스트는 순수 장식용 또는 텍스트의 특정 표현이 전달되는 정보에 필수적인 경우에만 사용됩니다.

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

1.4.10 리플로우 (AA)

콘텐츠는 정보나 기능의 손실없이 양 방향으로 스크롤하지 않도록 제공되어야 합니다. (CSS 픽셀 기준)

320px에 해당하는 너비의 수직 스크롤링 콘텐츠
256px에 해당하는 높이의 수평 스크롤링 콘텐츠

320px CSS 픽셀은 400% 확대 시, 1280px 뷰포트 너비와 같습니다. 그리고 가로 방향으로 스크롤 되는 콘텐츠(예 세로 방향 텍스트)로 설계된 경우, 256px은 1024px 뷰포트 높이와 동일합니다.

해설

예를 들어 웹 사이트를 400% 확대했을 때 가로, 세로 양쪽 방향을 스크롤 바가 생기면 안된다는 말입니다. 스크롤 바는 가로 또는 세로 방향 한 쪽으로만 표시되어야 합니다.

활용 또는 의미를 위한 2차원 레이아웃이 필요한 콘텐츠의 일부는 제외할 수 있습니다.

예외 2차원 레이아웃을 필요로 하는 콘텐츠의 예로는 콘텐츠를 조작하는 동안 툴바(Toolbar) 보기에 유지해야하는 이미지, 지도, 다이어그램, 비디오, 게임, 프리젠테이션, 데이터 테이블 인터페이스 등이 있습니다.

저시력 장애를 지닌 사용자는 브라우저 확대/축소 기능을 사용하여 화면을 400%까지 확대해 사용합니다. 양방향으로 스크롤 되지 않고, 세로 또는 가로 한 방향으로만 스크롤 되도록 구성하면 저시력 장애를 지닌 사용자의 접근성을 향상시킬 수 있습니다.

400% 확대된 뷰포트 내 콘텐츠가 모두 보여져야 합니다.
반응형 또는 가변 폭을 활용하여 디자인 합니다.

예시

BBC 사이트 디자인을 살펴보면 화면 크기를 400% 확대 하더라도 가로 스크롤은 생기지 않으며, 모든 콘텐츠 또는 기능을 사용하는데 아무런 제약이 없습니다.

화면이 확대되면 폭이 좁아짐에 따라 내비게이션이 변경되어 "더보기(more)" 드롭 다운 메뉴로 감춰집니다. 확대가 계속되면 내비게이션 아이템은 "햄버거" 메뉴 버튼 뒤에 감춰집니다. 버튼을 눌러 내비게이션 메뉴를 활성화 할 수 있습니다. 화면을 확대해도 가로 스크롤이 생기지 않습니다.

samsung.com 사이트 또한 화면을 400% 확대해도 콘텐츠를 이용하는데 아무런 제약이 없습니다.

https://streamable.com/nvdmcstreamable.com

1.4.11 비 텍스트 명도대비 (AA)

다음의 시각적 표현은 인접한 색상 대비 명도대비가 최소 3:1이상 되어야 합니다.

사용자 인터페이스(UI) 컴포넌트 비 활성 컴포넌트 또는 컴포넌트 모양이 사용자 에이전트(예: 브라우저 등)에 의해 결정되고 개발자에 의해 수정되지 않는 경우를 제외하고, UI 컴포넌트 및 상태를 확인하기 위해 요구되는 시각적 정보.
그래픽 객체 특정 그래픽 표현이 전달되는 정보에 필수적인 경우를 제외하고 콘텐츠를 이해하는데 필요한 그래픽의 일부.

해설

이 지침은 1.4.3 대비 (AA) 지침에서 다루는 명도대비 지침을 확장합니다. 이는 저시력 장애인의 접근성을 개선하기 위함으로 페이지의 모든 필수 요소들이 명도대비 수준을 최소한 충족해야 함을 의미합니다. 시력이 약한 사람들은 색의 대비가 부족할 때 식별에 어려움을 겪습니다.

성공기준은 다음과 같습니다.

활성화 된 UI 컴포넌트(예: 버튼, 인풋 등)의 최소 명도대비는 3:1 이상이 요구됩니다.
의미를 가진 그래픽 객체(예: 인포그래픽, 차트 등)의 대비 차 또한 마찬가지로 적용되어야 합니다.

예외 비활성화 된 UI 컴포넌트, 로고, 플래그, 실생활 사진 및 그래픽을 다른 방법으로 표현하기 힘든 경우(예: 웹 사이트 스크린 샷, 생물학에서 발견된 색상을 사용하는 의학정보 다이어그램, 색상 그레디언트 등) 이 성공기준에 포함되지 않습니다.

예시

활성화 된 UI 컴포넌트

링크 텍스트

링크 텍스트가 활성화 된 상태(:hover, :focus, :active 등)를 시각적으로 명확하게 구분할 수 있도록 만들어야 합니다. 기본 스타일을 그대로 사용하거나, 임의의 스타일을 설정해 시각적인 구분을 가능하게 만들어야 합니다.

버튼

고스트 버튼으로 불리는 배경색 없는 버튼이 인기를 얻고 있습니다. 이 버튼은 일반적으로 1.4.3 대비 (AA)를 충족하는 텍스트가 있지만, 배경색과 버튼 외곽 선 또한 대비 요구 사항을 충족해야 합니다. 버튼이 단색 이면 배경과 버튼 색상이 적절한 대비가 필요합니다.

다음은 고스트 버튼의 2가지 예입니다. 첫번째는 흰색 배경에 "다운로드" 단어를 포함하는 회색 윤곽선 버튼입니다. 이 버튼의 명암비는 1.6:1로 매우 낮습니다. 두번째는 명암비가 4.8:1로 성공기준을 충족하는 버튼입니다.

이미지 위에 이러한 고스트 버튼을 사용하면 식별하기 어려울 수 있습니다. 이런 경우 버튼과 대비가 명확한 배경색 또는 이미지를 사용하는 것이 좋습니다. 아래 예시를 살펴보면 대비 차가 명확해야 사용자가 읽고 인식하기 용이하다는 것을 확인할 수 있습니다.

입력

텍스트를 입력하는 컴포넌트 또한 활성화 될 경우, 시각적으로 명확하게 구분할 수 있도록 구성해야 합니다.

아래 예시는 사용자가 검색하는 입력 컴포넌트를 시각적으로 명확하게 구분할 수 있도록 아웃라인(테두리)을 활용하거나, 배경색과 대비되는 컬러를 사용하여 구분할 수 있도록 활용된 예입니다.

그래픽 객체

차트와 같은 그래픽 객체는 다소 까다롭습니다. 예를 들어 원형 차트의 각 조각은 인접한 조각색 또는 배경색과 충분한 대비가 있어야 합니다. 색상 만으로 구분하기 보다는 형태를 구분할 수 있도록 구성하는 것이 좋습니다. 예를 들어 각 조각을 당기거나 밀어 각 조각을 쉽게 구분할 수 있게 만들 수 있습니다. 다른 방법은 각 조각의 테두리를 그려 주변 조각과 구분할 수 있습니다.

아이콘

웹 사이트는 협소한 공간을 효율적으로 활용하거나, 사용자의 관심을 끌기 위해 아이콘을 사용합니다. 아이콘은 일반적으로 텍스트가 포함되어 있지 않아 WCAG 2.0 대비 성공기준에 포함되지 않았지만, WCAG 2.1부터는 아이콘 또한 대비 성공기준에 충족해야 합니다. 아이콘 내부의 그림은 아이콘 배경과 대비가 잘 되어 있어야 합니다.

아래 이미지는 2개의 다른 파란색 배경을 가진 달력 아이콘입니다. 첫 번째 아이콘은 2.2:1의 명암비를, 두 번째 아이콘은 5.3:1의 명암비를 갖습니다.

원형 차트

아래 원형 차트는 "중국 주스 과즙 함량 별 시장점유율"을 나타낸 그래픽 객체입니다. 색상 만으로 각 조각을 구분한 디자인으로 쉽게 식별할 수 없습니다.

아래 원형 차트는 조각을 당겨 주변의 조각과 구분하고, 각 조각에 연결된 선과 텍스트를 통해 명확하게 인식할 수 있도록 디자인을 개선한 결과입니다.

인포그래픽

명암 대비를 보장하는 방법은 여러 가지가 있습니다. 이 예에서는 경계선을 사용합니다. 다른 기술은 원 배경에 어두운 색을 사용하거나, 각 항목에 텍스트 레이블 및 값을 추가하는 것입니다.

이 성공 기준은 시력이 약한 사람들이 아이콘과 그래픽 객체를 보다 쉽게 보고 인식하도록 도와줍니다. 뿐만 아니라 좋은 대비는 장시간 화면을 보거나, 밝은 태양 아래에서 화면을 볼 때 사람들의 눈이 쉽게 피로해지지 않게 만듭니다.

아이콘과 그래픽 객체의 대비는 텍스트의 대비 만큼이나 중요합니다. 화면의 모든 요소에 대해 충분한 대비를 사용하세요.

성공기준 이해하기 1.4.11를 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

1.4.12 텍스트 간격 (AA)

다음 텍스트 스타일 속성을 지원하는 HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 다음 스타일을 모두 설정하고 다른 스타일 속성을 변경하지 않으면 콘텐츠 또는 기능이 손실되지 않습니다.

행간(줄 사이 간격)은 글자 크기(높이)의 1.5배 이상 이어야 합니다.
단락 간 간격은 글자 크기의 2배 이상으로 간격(마진)을 두어야 합니다.
자간(글자 사이 간격)을 글자 크기의 0.12배 이상으로 설정합니다.
어간(단어 사이 간격)은 글자 크기의 0.16배 이상으로 설정합니다.

예외 이러한 텍스트 스타일 속성 중 하나 이상을 필기 텍스트에 사용하지 않는 인간의 언어 및 스크립트는 해당 언어 및 스크립트 조합에 대해 존재하는 속성만 사용하여 준수할 수 있습니다.

PDF는 마크업 언어가 아니기에 예외 입니다.
이미지 텍스트, 로고, 비디오 캡션(자막)은 예외 입니다.
Canvas 요소를 사용해 구현된 텍스트는 이미지 텍스트로 분류되어 예외 입니다.

해설

이 지침의 목적은 사람들이 텍스트를 수정하여 읽기 쉽도록 하는 것입니다. 시력이 약한 사람들은 일반 글꼴 보다 큰 글꼴을 기본 글꼴로 설정하여 사용합니다. 문자, 단어 또는 줄 간격을 변경하여 사이트를 테스트 하면 큰 글꼴을 사용하는 효과를 시뮬레이션 할 수 있습니다. 문자, 단어, 줄 또는 단락 사이에 더 많은 공간이 있으면 인지 또는 읽기 장애가 있는 사람들이 잘 읽을 수 있습니다.

사용자는 사용자 정의 스타일 시트, 북마클릿(bookmaklet) 또는 브라우저 확장(extensions) 등을 사용하여 이 값을 조정할 수 있습니다. 웹 페이지 작성자는 이러한 설정을 변경하는 옵션을 제공 할 필요가 없습니다. 하지만 이러한 설정을 통해 화면이 변경 되더라도 모든 콘텐츠가 정상적으로 표시되도록 리플로우 되어야 합니다.

예시

이 성공 기준을 지원하는 가장 좋은 방법은 반응형 디자인을 사용하고 고정된 높이나 너비를 컨테이너에 사용하지 않는 것입니다. 아래 웹 사이트 예를 보면 좌측의 콘텐츠 행간을 사용자가 임의로 조정했을 때(우측) 텍스트 중 일부가 표시되지 않는 문제를 확인할 수 있습니다.

반면 다음의 웹 사이트 예는 사용자가 임의로 행간, 자간을 조정해도 텍스트가 모두 잘 표시됩니다. 고정 높이를 사용하지 않았기 때문입니다.

성공기준 이해하기 1.4.12를 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

1.4.13 콘텐츠 포커스/호버 (AA)

마우스 포인터 호버(마우스 오버) 또는 키보드 포커스를 받은 다음 제거하면, 추가 내용이 화면에 표시되고 숨겨 지도록 실행되는데 다음 조건이 요구됩니다.

닫을 수 있는 (Dismissable) 추가 콘텐츠(예: 툴팁)가 입력 오류를 전달하거나 다른 콘텐츠를 가리거나 교체하지 않는 한, 포인터 호버나 키보드 포커스를 이동하지 않고도 추가 콘텐츠를 닫을 수 있는 메커니즘을 제공해야 합니다.
호버 가능한 (Hoverable) 포인터 호버로 인해 추가 콘텐츠가 화면에 표시된 경우, 추가 콘텐츠 위로 포인터를 이동해도 추가 콘텐츠는 지속적으로 표시되어야 합니다.
지속성 있는 (Persistent) 추가 콘텐츠는 포인터 호버 또는 포커스 트리거를 제거하거나 사용자가 닫고자 하는 경우가 아니라면, 해당 정보는 지속적으로 화면에 표시되어야 합니다.