Accessibility 본문

N-WAX (NHN Web Accessibility eXtension)

N–WAX 란?

NHN 에서 북 마클릿형 웹 접근성 평가 도구 PAJET 에서 모티브를 따와 내부 가이드를 바탕으로 제작한 웹 접근성 평가 툴

다운로드 및 설치

Mozilla Firefox
  1. Firefox 부가 기능으로 이동합니다. Mozilla Firefox에서 N-WAX 설치 화면1
  2. [+ Firefox에 추가] 버튼을 클릭합니다.
  3. 소프트웨어 설치 창에 [설치] 버튼을 클릭합니다. Mozilla Firefox에서 N-WAX 설치 화면2
  4. Firefox를 다시 시작합니다. Mozilla Firefox에서 N-WAX 설치 화면3
  5. Firefox 주소창 왼쪽에 N–WAX 아이콘이 생성되었으면 설치가 완료되었습니다. Mozilla Firefox에서 N-WAX 설치 화면4
Google Chrome
  1. chrome 웹스토어로 이동합니다. Google Chrome에서 N-WAX 설치 화면1
  2. [+ CHROME 에 추가] 버튼을 클릭합니다.
  3. 새 확장 프로그램 확인에 [추가] 버튼을 클릭합니다. Google Chrome에서 N-WAX 설치 화면2
  4. chrome 주소창 오른쪽에 N–WAX 아이콘이 생성되었으면 설치가 완료되었습니다. Google Chrome에서 N-WAX 설치 화면3

사용방법

Mozilla Firefox
  1. N–WAX 아이콘을 클릭합니다. Mozilla Firefox에서 N-WAX 사용 화면1
  2. 사이드바에 N–WAX가 실행되면 [현재 페이지 검사] 버튼을 클릭합니다. Mozilla Firefox에서 N-WAX 사용 화면2
  3. 체크리스트별 결과를 확인합니다. Mozilla Firefox에서 N-WAX 사용 화면3
Google Chrome
  1. 평가를 원하는 웹 페이지를 열어놓습니다. Google Chrome에서 N-WAX 사용 화면1
  2. N–WAX 아이콘을 클릭합니다. Google Chrome에서 N-WAX 사용 화면2
  3. 체크리스트별 결과를 확인합니다. Google Chrome에서 N-WAX 사용 화면3

Tip

다음과 같이 웹접근성에 준수한 여부에 따라 체크리스트에 나타낸 모습이 다름니다.
웹 접근성 준수 여부에 따른 체크리스트 화면
  • 웹접근성에 준수한 요소 : 흰배경에 검은 글씨
  • 웹접근성에 반정도 준수한 요소 : 노랑배경에 검은 글씨
  • 웹접근성에 위배된 요소 : 빨간 배경에 검은 글씨
  • 숨셔져 있는 요소 : 흰배경에 회색 글씨
  • 마우스를 오버한 목록 : 회색배경에 검은 글씨

진단할수 있는 검사항목

  • O : N–WAX 툴로 평가 가능
  • – : N–WAX 툴로 평가 가능하나 확인 필요
  • X : N–WAX 툴로 평가 불가능하며 직접 확인 필요
검사항목 상세내용 결과
1.1.1 대체 텍스트 (img) 이미지 요소(<img>, <area>, <input type="image">)의 대체 텍스트 표시
1.1.1 대체 텍스트 (bg) CSS Background Image의 대체 텍스트를 표시
1.1.1 대체 텍스트 (object) <object>, <embed> 요소가 사용되었는지 표시 O
2.2.1 W3C Validation
  • 검사하는 페이지와 포함된 프레임 페이지의 W3C Validation 결과 표시
  • 로그인 정보 등 세션 정보가 적용된 소스 코드로 Validation을 수행
O
2.3.1 표 제목 사용된 <table> 요소의 caption, summary 정보 표시 O
2.3.2, 2.3.3 표 구조화
  • 사용된 <table> 요소의 행들이 <thead>, <tbody>, <tfoot>으로 그루핑 되었는지 표시
  • 사용된 <table> 요소에 제목 셀이 제공 유무 표시
  • 사용된 <table> 요소에 scope 표시
2.6.1 (레벨AA) 단순 열람 문서 형식 doc, xls, ppt, hwp 형식으로 제공된 문서 표시 X
2.7.2 (레벨AA) 단축키 accesskey 속성으로 제공된 단축키 정보 표시 O
3.1.1 주언어 명시 검사하는 페이지와 포함된 프레임 페이지에 선언된 주언어 표시 O
3.3.1 명도 대비 페이지에서 사용되어 마우스로 선택한 두 색상의 명도 대비 표시
6.3.1 키보드 포커스 onfocus="this.blur()", CSS의 outline 속성이 0으로 지정된 요소 표시 X
7.1.1 페이지 제목 검사하는 페이지와 포함된 프레임 페이지에 선언된 페이지 제목 표시 O
7.1.2 프레임 사용 프레임의 제목(title 속성)을 표시 O
7.1.3 콘텐츠 블록 제목 <h1>~<h6>과 포함된 텍스트 표시 O
7.3.1 링크 텍스트 링크 요소(<a>, <area>)의 텍스트 표시 O
8.1.1 의도하지 않은 기능 window.open 함수 혹은 onchange 이벤트가 사용된 요소와 내용 표시 X
8.2.1 레이블 폼 입력 요소에 사용된 대체텍스트(<label>, title 속성) 표시 O

Firefox와 Chrome에서 실행시킨 N–WAX의 차이

사용하는 브라우저가 Firefox, Chrome에 따라서 약간의 차이를 보입니다.

한 창에 실행시킬 수 있는 N–WAX 툴의 갯수
Mozilla Firefox

N–WAX의 실행과 동시에 페이지 검사가 표시되지 않습니다.

Mozilla Firefox에서 한 창에 실행시킬 수 있는 N-WAX 툴의 갯수

즉, 한 창에는 하나의 페이지만 검사 할 수 있습니다.

한 창마다 N–WAX를 실행 시킬수 있습니다.
Google Chrome

N–WAX의 실행과 동시에 페이지 검사가 표시됩니다.

Google Chrome에서 한 창에 실행시킬 수 있는 N-WAX 툴의 갯수

즉, 한 창에서 여러 페이지를 검사 할 수 있습니다.

한 탭마다 N–WAX를 실행 시킬수 있습니다.
N-WAX 툴로 검사할 수 있는 페이지
Mozilla Firefox

"http://"나 "file://"로 시작하는 주소를 가진 페이지를 검사할 수 있습니다.

Mozilla Firefox에서 N-WAX 툴로 검사할 수 있는 페이지
Google Chrome

"http://"로 시작하는 주소를 가진 페이지만 검사할 수 있습니다.

Google Chrome에서 N-WAX 툴로 검사할 수 있는 페이지