웹접근성 진단 도구 - Open WAX, N-WAX, Web Accessibility Toolbar

웹페이지 접근성 진단 도구 몇가지를 소개합니다.

웹페이지 접근성 진단 도구는 누구나 손쉽게 접근성여부를 판단할 수 있는 툴입니다.

1. Open WAX (Open Web Accesiblilty eXtension)

IE, 구글크롬, 파이어폭스 브라우저에서 원하는 사이트에 대해 접근성 진단을 제공합니다.

버튼만 클릭하면 1~21번까지의 접근성 지표에 따른 진단결과를 바로 확인 할 수 있답니다.

오류는 붉은색, 의심은 노란색, 정상은 흰색바탕으로 표시된답니다.

그리고 제일 상단에 평가점수를 제공합니다.

점수 구성은 다음과 같아요.

• 대체 텍스트(30점): 전체 이미지 대비 대체 텍스트가 제공된 이미지를 10점 만점으로 환산합니다. 이미지가 사용되지 않았다면 30점입니다.
• 키보드 포커스(10점): onfocus 이벤트에 blur() 함수를 실행하여 키보드 포커스를 없애는 경우, CSS의 outline 속성이 0으로 설정된 경우가 있으면 0점, 그런 경우가 없으면 10점입니다.
• 프레임 제목(10점): 페이지에 프레임이 제공되었다면 프레임에 제목(title 속성)이 제공된 비율을 10점 만점으로 환산합니다. 프레임이 제공되지 않았다면 10점입니다.
• 링크 텍스트(10점): 전체 링크 대비 링크 텍스트가 제공된 링크를 10점 만점으로 환산합니다. 링크가 사용되지 않았다면 10점입니다.
• 기본 언어(10점): 페이지에 기본 언어가 명시되었는지를 점수로 환산합니다. 프레임을 포함하여 검사하는 경우 기본 언어가 명시된 비율로 점수가 계산됩니다.
• 의도하지 않은 실행(10점): onclick 이벤트에 window.open이 포함된 경우 새 창 알림(title 속성, target="_blank")이 제공된 비율을 10점 만점으로 환산합니다. window.open이 포함된 onclick 이벤트가 없다면 10점입니다.
• 레이블(20점): 전체 폼 서식 대비 레이블이 제공된 폼 서식의 비율을 20점 만점으로 환산합니다. 폼 서식이 사용되지 않았다면 20점입니다.

평가항목 21가지는 다음과 같아요.

1. 적절한 대체 텍스트 (img)

1. 적절한 대체 텍스트 (bg)

1. 적절한 대체 텍스트 (object)

5. 텍스트 콘텐츠의 명도 대비

8. 초점 이동

12. 건너뛰기 링크

13. 제목 제공(<title>)

13. 제목 제공(frame)

13. 제목 제공(<h1>~<h6>)

14. 적절한 링크 텍스트

15. 기본 언어 표시

16. 사용자 요구에 따른 실행

18. 표의 구성(caption, summary)

18. 표의 구성(th)

19. 레이블 제공

21. 마크업 오류 방지

다운로드 및 자세한 기능 설명은 해당 홈페이지에 보실 수 있어요.

[Open WAX 다운로드 및 가이드 바로가기]

2. N-WAX (NHN Web Accessibility eXtension)

엔왁스는 오픈왁스와 거의 유사한 프로그램입니다. 

인터페이스나 사용방법이 많이 유사한데요~ 제작자가 같은거 같아요.

제가 보기에는 오픈왁스 또는 엔왁스 두가지 중 한가지만 써도 무방할 듯 보입니다. 

사견으로는 오픈왁스가 더 업데이트가 잘되는 것으로 보이구요.

엔왁스의 평가 항목입니다.

* 대체 텍스트 (<img>, <area>, CSS 배경)

* W3C 유효성 검사

* 표

* 단축키

* 페이지 언어

* 명도 대비

* 키보드 초점

* 페이지 제목

* 프레임 제목

* 헤딩 요소

* 건너뛰기 링크

* 링크 텍스트

* 레이블

다운로드 및 자세한 기능 설명은 해당 홈페이지에 보실 수 있어요.

[N-WAX 다운로드 및 가이드 바로가기]

3. Web Accessibility Toolbar

위 두가지 프로그램과는 달리 툴바형태로 원하는 항목을 체크할 수 있습니다.

위 두개의 진단프로그램은 접근성 진단항목에 대해 리포트를 제공해 주는 형식이라면

툴바는 진단을 위한 기능을 제공한다고 보시면 됩니다.

[Web Accessibility Toolbar 다운로드]