네이버 널리에서 제공하는 웹 접근성 체크

네이버 널리에서 제공하는 웹 접근성 체크

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

3.3.1 콘텐츠와 배경간의 명도 대비는 4.5:1 이상이 되는가?

명도대비 적용 가이드 보기

장애 유형

장애 유형

전맹, 저시력

오류 설명

• 저시력, 노안의 경우 명도 대비가 뚜렷하지 않은 콘텐츠를 제대로 인식하기 어려우므로 콘텐츠와 배경의 명도 대비가 커야 함.
• 네비게이션, 제목, 본문, 주요 과업 수행 버튼(메일쓰기, 검색 등)은 배경과의 명도대비가 4.5:1 이상이 되게 제공
• 부가 정보, 광고, 부가 기능 수행 버튼(인쇄, 추천 등)은 배경과의 명도대비가 3:1 이상이 되게 제공
• 광고 영역을 제외한 이미지 폰트는 중요도와 상관없이 배경과의 명도대비가 4.5:1 이상이 되게 제공
• 사용할 수 없거나 비활성 영역임을 표시하기 위해 딤드처리 된 폰트는 예외
• 명도 대비 서비스 적용 가이드 보기Internal

오류 유형

주요 과업 버튼, 이미지 폰트의 명도 대비가 4.5:1 이하인 경우

오류 예시

회원 가입 진입 페이지에 사용된 이미지 폰트 및 주요 과업 버튼이 배경과의 명도대비가 2.6:1임

참고 이미지

해결 방법

이미지 폰트는 시스템 폰트보다 인식률이 떨어지므로 중요도와 상관 없이 4.5:1 이상이 되게 제공

부가 정보의 명도 대비가 3:1 이하인 경우

오류 예시

기사 제목 다음에 제공되는 언론사, 게시 날짜와 같은 부가 정보의 명도대비가 2.8:1임

참고 이미지

해결 방법

부가 정보라 하더라도 인식이 가능하기 위해서 최소한의 기준인 3:1 이상이 되도록 제공해야 함

모바일 환경의 텍스트, 이미지 콘텐츠와 배경간 명도 대비가 4.5.1 이하인 경우

오류 예시

메뉴 영역의 콘텐츠와 배경 간 명도대비가 2.3.1 임

참고 이미지

해결 방법

텍스트, 이미지 콘텐츠와 배경간 명도 대비가 4.5:1 이상이 되도록 콘텐츠 혹은 배경 색상을 변경해야 함.

바른 예시

텍스트와 배경간의 명도 대비가 4.5:1 이상임

참고 이미지

주의 사항

이미지 텍스트는 텍스트에 인접한 1px 중 가장 대비가 높은 색을 기준으로 평가

글자색 및 배경색 선택 예제

사용할 수 없는 비활성 영역은 평가하지 않음

비활성 영역 예제

평가 방법

웹 페이지의 전경과 배경간의 명도 대비 확인

평가 도구

N-WAX

평가 방법

3.3.1 명도 대비 항목에서 '전경색 선택' 버튼과 '배경색 선택' 버튼을 눌러 명도 대비 값 확인

[Case.1] 전경과 배경의 명도 대비가 4.5:1 이상인 경우 하얀색 셀로 표시됨

[Case.2] 전경과 배경의 명도 대비가 3:1 이상인 경우 노란색 셀로 표시되며, 글자 크기가 24px 이상 또는 18.66px 이상인지 확인. 이상일 경우 통과

[Case.3] 전경과 배경의 명도 대비가 3:1 미만인 경우 빨간색 셀로 표시되며 오류 처리

포토샵에서의 전경과 배경간의 명도 대비 확인

평가 도구

Contrast Ratio (포토샵 익스텐션)

평가 방법

1. 포토샵 익스텐션 탭에서 스마일 아이콘을 선택
2. 포토샵 자체 컬러픽커에서 확인하고자 하는 이미지의 전경색과 배경색 선택.
3. CONTRASTRATIO 패널에서 결과값 확인

모바일 환경에서 전경과 배경간의 명도 대비 확인

평가 도구

User Agent Switcher(파이어폭스 부가기능), N-WAX, Contrast Ratio (포토샵 익스텐션)

평가 방법

Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX, Contrast Ratio (포토샵 익스텐션)을 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체

접근성 평가도구

N-WAX

소개

N-WAX는 평가를 수행하는데 필요한 도구들을 일원화하고 체크리스트에 대응되도록 구성하여 쉽고 빠르게 웹 접근성 평가를 할 수 있도록 만들어진 도구이다.

서비스를 사용하기 위해 로그인을 하는 등 세션 정보가 요구되는 경우 및 자바스크립트, 플래시 등의 플러그인을 통한 동적으로 구성된 웹 페이지를 원활히 검사할 수 있도록 브라우저 확장 기능 형태로 제작되었다.

설치 방법
(파이어폭스)

1. 파이어폭스에서 다음의 xpi 파일을 설치한다. (파일이 다운로드 된다면 해당 파일을 파이어폭스 브라우저로 드래그 앤 드롭하면 설치할 수 있다.)
   N-WAX 설치 (공개 버전)
   N-WAX 설치 (베타 버전): 베타 버전은 자동 업데이트가 지원되지 않습니다.
2. 평가를 원하는 웹 페이지를 열어놓은 상태에서 'N-WAX'아이콘을 클릭하면 좌측에 N-WAX가 실행된다.
3. 프레임 콘텐츠 포함 여부를 선택한 뒤 'Check Current Page!'를 클릭하여 체크리스트별 결과를 확인한다.

참고 이미지
(파이어폭스)

설치 방법
(구글 크롬)

1. 구글 크롬에서 다음의 crx 파일을 설치한다. (파일이 다운로드 된다면 해당 파일을 크롬 브라우저로 드래그 앤 드롭하면 설치할 수 있다.)
   N-WAX 설치 (공개 버전)
   N-WAX 설치 (베타 버전): 베타 버전은 자동 업데이트가 지원되지 않습니다.
2. 평가를 원하는 웹 페이지를 열어놓은 상태에서 'N-WAX'아이콘을 클릭하면 좌측에 N-WAX가 실행된다.
3. N-WAX 실행과 동시에 표시되는 체크리스트별 결과를 확인한다.

참고 이미지
(구글 크롬)

Web Developer (파이어폭스 부가기능)

설치 방법

파이어폭스 브라우저에서 설치 페이지에 접속하여 "다운로드" 버튼을 클릭하여 설치
https://addons.mozilla.org/ko/firefox/addon/web-developer/

참고 이미지

설치가 완료되면 Web Developer 툴바가 표시된다.

Firebug (파이어폭스 부가기능)

설치 방법

1. Firefox 브라우저 실행 후 아래 사이트에서 firebug를 설치한다.
   getfirebug.com
2. 사용방법을 참고하여 평가 보조도구로 활용할 수 있다.
   What is Firebug?
   Firebug 설치 사용방법 (한글)
   Firebug 사용하기

참고 이미지

UIA Verify

소개

UIA Verify는 플래시, 실버라이트 등의 부가 애플리케이션의 접근성 정보를 탐색할 수 있는 도구이다.

설치 방법

1. 다음 페이지에서 "Download" 버튼을 눌러 프로그램 압축 파일을 다운로드 받는다.
   UI Automation Verify (UIA Verify) Test Automation Framework
2. 다운로드 받은 압축 파일을 압축 해제하여 압축 해제된 폴더를 적당한 위치로 이동시킨다.
3. 폴더 내의 VisualUIAVerify.exe 파일을 실행하면 UIA Verify가 실행된다.

참고 이미지

PEAT (Photosensitive Epilepsy Analysis Tool)

소개

PEAT는 웹 콘텐츠 및 소프트웨어에서의 발작 위험을 식별할 수 있는 도구이다.

설치 방법

1. 다음 페이지에서 "Download PEAT Beta" 링크를 눌러 프로그램 압축 파일을 다운로드 받는다.
   Photosensitive Epilepsy Analysis Tool
2. 다운로드 받은 압축 파일을 압축 해제하여 압축 해제된 폴더를 적당한 위치로 이동시킨다.
3. 폴더 내의 PEAT.exe 파일을 실행하면 PEAT가 실행된다.

참고 이미지

Colour Contrast Analyser

소개

전경색과 배경색의 명도 대비를 확인할 수 있다.

설치 방법

1. 아래 페이지에서 "Download" 링크를 눌러 프로그램 압축 파일을 다운로드 받는다.
   http://www.visionaustralia.org.au/info.aspx?page=628
2. 다운로드 받은 압축 파일을 압축 해제하여 압축 해제된 폴더를 적당한 위치로 이동시킨다.
3. 폴더 내의 Colour_Contrast_Analyser.exe 파일을 실행하면 Colour Contrast Analyser가 실행된다.

참고 이미지

Contrast Ratio (포토샵 익스텐션)

소개

포토샵에서 전경색과 배경색의 명도 대비를 바로 확인할 수 있다.
CS4, CS5에서만 사용 가능하며, 그 외의 환경일 경우Colour Contrast Analyser를 사용한다.

설치 방법

1. 아래 링크에서 파일을 다운 받는다.
   [다운로드]
2. 다운받은 파일을 압축 해제한 후 [포토샵 설치 폴더Plug-insPanels]에 복사한다.
   Windows7의 경우 포토샵 설치 폴더는 일반적으로 [C:Program FilesAdobeAdobe Photoshop CS5.1 (64 Bit)] 이며,
   Mac OS는 [ApplicationsAdobe Photoshop CS4(CS5)Plug-InsPanels] 이다.
3. 포토샵을 실행한다.
4. 메뉴에서 [Window] > [Extensions] > [ContrastRatio] 를 선택한다.
5. 익스텐션 탭에서 신호등 아이콘을 선택한다.
6. 포토샵 자체 컬러픽커에서 확인하고자 하는 이미지의 전경색과 배경색을 선택한다.
7. CONTRASTRATIO 패널에서 결과값을 확인한다.

참고 이미지

User Agent Switcher(파이어폭스 부가기능)

소개

파이어폭스에서 모바일기기의 환경으로 웹브라우저를 테스트할 수 있다.
User Agent Strings을 입력하여 원하는 기기의 브라우저 환경으로 설정할 수 있다.

설치 방법

1. 1.Firefox 브라우저 실행 후 아래 사이트에서 User Agent Switcher를 설치한다.
   https://addons.mozilla.org/ko/firefox/addon/user-agent-switcher/?src=search
2. Alt키로 메뉴모음이 나타나도록 한다.
3. 메뉴에서 [도구] > [Default User Agent] > [Edit User Agent] 를 선택한다.
4. New 버튼으로 원하는 모바일 기기의 User Agent String을 등록한다.
   (하단의 *User Agent String 등록 방법 참조)
5. [도구] > [Default User Agent] 에서 원하는 기기의 브라우저 설정을 선택한다.
6. 페이지에 새로 접속을 하거나 새로고침(Ctrl+F5)을 해서 원하는 기기의 브라우저에서 평가를 진행한다.

참고 이미지

*User
Agent
String
등록 방법

1. iPhone 4S (ios 6.0.1) :
   Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25
2. iPad (ios 3.2.1) :
   Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
3. Galaxy S (android 2.3.6) :
   Mozilla/5.0 (Linux; U; Android 2.3.6; ko-kr; SHW-M110S Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
4. LG Optimus LTE (android 4.0.4) :
   Mozilla/5.0 (Linux; U; Android 4.0.4; ko-kr; LG-LU6200 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
5. 기타 : 원하는 기기의 브라우저로http://www.whatsmyuseragent.com/에 접속하여 User Agent String 확인

모바일 스크린리더(iOS/안드로이드)

환경설정
iOS

1. 설정 아이콘 선택
2. 일반 선택
3. 손쉬운사용 선택
4. VoiceOver 선택
5. 꺼져있는 토글 선택, 켜짐

널리블로그링크참조

환경설정
안드로이드

1. 메뉴 선택, 환경설정 선택
2. 접근성 선택
3. TalkBack 선택
4. 꺼짐 토글 선택, 켜짐

* 안드로이드폰은 젤리빈버전(v.4.2)이상에서만 톡백의 충분한 기능을 사용할 수 있다.

기본 사용동작

모바일 스크린리더가 실행된 상태에서 한 손가락 또는 두 손가락, 세 손가락으로 화면을 쓸어 다음 기능동작을 수행할 수 있다.

모바일스크린리더 기능 동작

포커스지정		손가락으로 탭
포커스 이동		손가락을 좌,우로 쓸기
포커스 지정 영역 활성화		손가락으로 두 번 탭
스크롤이동	iOS	세 손가락을 상하로 쓸기
	안드로이드	두 손가락을 상하로 쓸기

기타 자세한 사항은널리블로그링크참조