사용자가 색상으로 정보를 추측하게 만들지 마세요. 직관적으로 이해할 수 있도록 만들어 주세요.
기술설명
이 기술의 목적은 필수 입력 양식처럼 색상 차이를 이용하여 정보를 전달하는 경우, 그 정보를 텍스트로 자세히 설명해 주는 데 있습니다.
예시
2-1. 일정을 색상으로 구분한 경우
기술 컨퍼런스 일정을 달력에 표시하였습니다. 3가지 색상으로 나누어 달력에 트랙(track)처럼 표시하였습니다.
첫 번째 일정은 파란색으로, 두 번째 일정은 노란색으로, 세 번째 일적은 초록색으로 표시하였습니다.
각각 색상은 식별이 가능하도록 파란색 위에 'T1', 노란색 위에 'T2', 초록색 위에 'T3'이라고 적었습니다.
2-2. 일정을 색상이 있는 아이콘으로 구분한 경우
기술 컨퍼런스의 세 가지 일정을 달력에 세줄 트랙으로 표시하였습니다. 각각 트랙 앞에 색상 원형에 글자가 적혀있는 아이콘이 있습니다. 첫 번째 트랙의 아이콘은 파란색 배경에 'T1'이라고 적혀있습니다. 두 번째 트랙의 아이콘은 노란색 배경에 'T2'이라고 적혀있습니다. 세 번째 트랙의 아이콘은 초록 배경에 'T3'이라고 적혀있습니다.
각각의 아이콘은 적혀있는 글과 같은 대체 텍스트가 제공됩니다.
2-3. 필수 입력 양식이 있는 경우
'폼(form)'에는 여러 가지 '필수 입력 양식(required fields)'이 있습니다.
입력 양식 앞에 빨간색 별표(*)가 표시 되어있습니다. 그리고 폼 작성 지침에는 '빨간색 별표시가 있는 항목은 반드시 작성해 주세요.'라고 되어있습니다.
참고로 별표는 모든 화면 판독기에서 읽히지 않을 수 있습니다. 그리고 기본 텍스트보다 작은 크기로 지정하면 저 시력자들이 못 볼 수 있습니다. 별표는 되도록 이미지가 아닌 텍스트로 표시하고, 별표의 크기를 크게 하는 것도 좋은 방법입니다.
2-4. 폼에 녹색 제출 버튼이 있는 경우
대출 서비스를 제공해 주는 사이트입니다. 대출을 신청하려고 합니다. 초록버튼을 누르면 진행이 되고 빨간색 버튼을 누르면 진행이 취소된다는 설명이 있습니다.
화면에는 초록색 배경 버튼 위에 텍스트로 '신청하기'라고 적혀 있는 버튼이 있습니다.
폼 이용 지침에 [작성한 내용을 제출하고 다음 단계로 넘어가려면'신청하기' 버튼을 눌러주세요.]라고 되어있습니다.
관련기술
G205: 색상이 있는 양식 제어 레이블에 대한 텍스트 큐 포함
G138: 색상 단서가 사용될 때마다 의미 체계 마크업 사용
G182: 정보를 전달하기 위해 텍스트 색상 차이를 사용할 때 추가적인 시각적 단서를 사용할 수 있는지 확인
G183: 주변 텍스트와 3:1의 명암비를 사용하고 색상만으로 식별하는 링크 또는 컨트롤에 초점에 대한 추가 시각적 단서를 제공합니다.
점검절차
전달되는 정보가 텍스트로도 제공되는지, 그 텍스트가 정보와 맞는지 확인하세요.
나의 정리
색상을 이용하여 정보를 전달하는 경우가 있습니다. 가장 대표적인 예가 신호등입니다.
빨간색은 정지, 초록색은 출발을 의미합니다. 하지만 일부 색상을 구분하지 못하는 색맹을 가진 분들에게는 색상으로 정보를 파악하는 것이 힘들 것입니다.
그래서 색상 위에 텍스트나 픽토그램 같은 이미지를 활용합니다. 빨간색상 위에 사람이 서있는 그림, 초록색에 사람이 걸어가는 그림이 있습니다. 그 그림으로 정보를 파악할 수 있는 겁니다.
이와 같이 웹에서도 색상으로 전달되는 정보에 구분 가능한 어떠한 조치를 해주자는 것입니다.
보통 회원가입이나 로그인할 때 입력 양식(input)에 개인정보를 적는 경우가 있습니다. 이때 입력폼에 테두리가 붉은색이거나 입력 양식 앞에 빨간색 별(*) 모양이 있으면, '이건 반드시 입력해야 하는 부분인가 보다'라고 생각합니다.
하지만 특정 색을 구별 못하거나 저시력자 분들의 경우 이 부분을 인지하지 못할 수 있습니다.
그래서 색상뿐만 아니라 텍스트로도 알려줘야 합니다.
예시에서 말한 것처럼 필수 입력 양식이 있는 경우, '이 부분은 필수 입력 사항입니다.'라고 먼저 알려주어야 합니다.
연도별 성장률을 표시한 그래프의 경우 막대의 색상으로 연도를 구분하기보다는 막대에 '2003', '2004'처럼 텍스트로 표시해 줍니다. 그리고 그래프 내용이 문서상에서 중요한 내용을 담고 있는 것이라면 그래프 전체를 이해할 수 있는 정보를 대체 텍스트나 설명글로 제공해야 합니다.
사용자가 색상으로 정보를 추측하게 만들지 마세요.
직관적으로 이해 할수 있도록 만들어 주세요.
G14: Ensuring that information conveyed by color differences is also available in text
https://www.w3.org/TR/WCAG20-TECHS/G14.html
G14: Ensuring that information conveyed by color differences is also available in text | Techniques for WCAG 2.0
The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is an icon consisting of a colored circle with a number in the middle showing what track it belongs to: blue circles with the number 1 re
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G17] 텍스트(또는 이미지 텍스트)와 그 텍스트의 배경에 대한 명암비는 7:1이어야 한다 (0) | 2024.01.17 |
|---|---|
| [웹접근성 지침-일반기술 G15] '깜박이는 콘텐츠' 또는 '깜빡이는 빨간색'은 정해진 '임계값'을 시켜야 한다. (1) | 2024.01.10 |
| [웹접근성 지침-일반기술 G13] 사이트 내에서 변화를 일으킬 수 있는 폼 컨트롤이 있다면, 변경 시 어떤 일이 일어나는지를 미리 설명해 줘야 한다. (1) | 2024.01.03 |
| [웹접근성 지침-일반기술 G11] 깜빡거리는 콘텐츠는 5초 이내로 정지하기 (1) | 2023.12.29 |
| [웹접근성 지침-일반기술 G10] 브라우저 내의 플랫폼은 접근성API기능이 지원되도록 만들어야 한다. (0) | 2023.12.27 |
