현재 페이지 위치

Home> 나눔> 웹접근성 가이드> 접근성 평가도구

접근성 평가도구

추천하기
추천 횟수 :4
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

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. 아래 "다운로드" 링크를 눌러 프로그램 압축 파일을 다운로드 받는다.
    Colour Contrast Analyser 다운로드
  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세 손가락을 상하로 쓸기
안드로이드두 손가락을 상하로 쓸기
기타 자세한 사항은널리블로그링크참조