Completion 0%

Education > PC/모바일 웹 접근성 체크리스트

2.1.1 색상, 크기, 방향, 위치, 음향효과 만으로 정보를 전달하고 있는 콘텐츠는 없는가?

장애 유형

장애 유형
전맹, 저시력, 색맹, 색약, 청각장애
오류 설명
  • 색 구분이 어려운 색맹, 색약, 흑백으로 출력했을 경우 등 시각 장애 환경에서 색상만으로 정보를 제공한 경우 정보의 정확한 구분이 어려움.
  • 전맹, 저시력 등 시각 장애 환경에서 정보의 크기나 방향 만으로 정보를 제공할 경우 정보의 정확한 확인이 어려움.
  • 위치만으로 정보를 지시한 경우, 저시력이나 노인이 글자체를 확대하여 확인하게 되면 지시한 위치와 달라질 수 있으므로 위치만으로 정보를 지시하지 않도록 해야 함.
  • 시간 제한이 완료되었거나, 특정 기능이 수행되었을 때 음향효과만으로 정보를 전달할 경우 청각 장애 환경에서 정보를 인식할 수 없음.
  • 모든 장애환경을 만족시키기는 어렵기 때문에 최소한 두가지 이상의 방법으로 정보를 전달해야 함.

오류 유형

색상만으로 내용을 분별하도록 제공된 콘텐츠(그래프, 차트, 지도 등)

오류 예시
코스피 일봉 그래프의 '5, 20, 60, 120'일 평균선과 지수 상승/하락을 나타내는 표시가 색상만으로 제공됨
참고 이미지
해결 방법
해당 표시를 색상 이외에 명암, 패턴 등으로 구별할 수 있도록 제공해야 함.
혹은 그래프 자체에 항목명을 확인할 수 있도록 제공해야 함.

페이지 내비게이션에서 현재 페이지를 색상만으로 구분하는 경우

오류 예시
페이지 내비게이션에 현재 페이지를 색상의 변화만으로 알리고 있음(명도가 차이나더라도 오류로 간주)
참고 이미지
해결 방법
현재 페이지 표시를 흑백으로 보아도 다른 페이지와 구별할 수 있도록 기울임, 밑줄, 괄호, 테두리 등을 추가하여 수정해야 함.

색, 크기, 모양, 방향 등으로만 정보를 제공한 경우

오류 예시
도움말 세부분류 항목에 대한 설명문구를 방향으로만 제공함
참고 이미지
해결 방법
방향과 상관없이 어떤 콘텐츠를 의미하는지 이해할 수 있도록 수정해야 함.
(ex) '좌측 메일 세부분류에서 원하시는 분류를 선택하여 도움말을 찾아 보세요'
오류 예시
이전 배너, 다음 배너 보기 링크의 텍스트를 "왼쪽", "오른쪽" 등 방향으로만 제공하고 있음.
참고 이미지
해결 방법
"이전 배너 보기" ,"다음 배너 보기" 등으로 제공되는 것이 바람직함.
오류 예시
실시간교통 정보를 색으로만 제공함
참고 이미지
해결 방법
교통흐름의 원활/정체 정도를 색상 이외에 패턴, 굵기 등으로 구별할 수 있도록 제공

필수 입력 항목을 색으로만 표시한 경우

오류 예시
서식의 필수항목 정보를 색으로만 제공함
참고 이미지
해결 방법
필수 항목 정보를 색을 제거하고도 알 수 있도록 제공해야 함.
(ex)안내 문구는 "'* 표시된 항목은 필수 입력사항입니다'" , 필수항목은 "'* 단체명'" 등과 같이 제공해야 함.

선택된 메뉴를 색으로만 구분 가능한 경우

오류 예시
선택된 메뉴를 색으로만 다르게 표현함
참고 이미지
해결 방법
색 외에 테두리 또는 명도 차이를 통해 선택된 메뉴와 선택된 메뉴가 구분 가능하게 해야 함
참고 이미지

모바일 환경에서 색상만으로 내용을 분별하도록 제공된 콘텐츠

오류 예시
메뉴 선택에 대한 정보를 색상의 변화만으로 알리고 있음(명도가 차이나더라도 오류로 간주)
참고 이미지
해결 방법
현재 선택 된 메뉴 상태를 흑백으로 보아도 다른 메뉴와 구별할 수 있도록 굵기, 밑줄, 테두리 등을 추가하여 수정해야 함.

바른 예시

각각의 정보를 색상, 모양, 패턴으로 표현

바른 예시

선택된 페이지를 색상과 모양으로 표현

바른 예시


주의 사항

  • 글자모양을 이용하거나 밑줄(underline) 표시, 굵은 글씨체 또는 이탤릭체, 글자 크기의 변경 등으로 정보의 구분 가능하면 준수한 것으로 인정

평가 방법

  • 심사 대상 사이트의 모든 콘텐츠를 눈으로 확인하고 색상, 크기, 방향, 위치, 음향효과 만으로 정보를 전달하고 있는 콘텐츠를 검출
  • 모바일 환경의 심사 대상 사이트에 포함 되는 모든 콘텐츠를 파이어폭스의 User Agent Switcher를 활용해 PC와 동일한 방식으로 직접 확인 및 평가

평가 도구 전체 설치 방법