Download

OpenWAX(Open Web Accessibility eXtension)는 웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구입니다.

Guide

OpenWAX 실행

접근성 진단을 원하는 사이트에 접속 후 툴바에서 OpenWAX 아이콘을 클릭하여 OpenWAX를 실행합니다. 간단하죠?

Google Chrome에서 실행하려면
북마클릿으로 실행하려면 (1. 북마클릿 링크를 북마크에 추가한 후, 2. 원하는 페이지에서 북마크 실행!)

대상 페이지

이제부터는 OpenWAX 실행결과에서 표시되는 항목들에 대한 설명입니다.

대상 페이지는 OpenWAX가 검사를 수행한 페이지를 표시합니다. 페이지 안에 프레임이 들어있다면 OpenWAX의 옵션에 따라 대상 페이지가 될 수도, 그렇지 않을 수도 있습니다.

비대상 페이지

페이지 안에 들어있는 프레임 중에 대상 페이지가 되지 못한 페이지들입니다.

Google Chrome에서는 현재 애석하게도 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 항상 비대상 페이지에 표시되죠.

북마클릿에서는 당연하게도 Google Chrome처럼 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 왜 이런 제약이 생기는지 알고싶으시면 Same origin policy(동일 출처 정책)을 참고하세요.

1~21번까지의 접근성 지표

1~21번까지의 접근성 지표에는 접근성 검사 수행 결과가 표시됩니다.

X 표시 빨간 배경색(이하 오류항목)이 표시되는 항목은 대부분 접근성 오류입니다.

앗, 빨간 배경! 오류인가봐요.

! 표시 노란 배경색(이하 의심항목)이 표시되는 항목은 접근성 오류가 의심되는 항목입니다.

음, 노란 배경! 오류인지 생각해봐야겠군요.

"숨김" 셀에는 CSS로 display: none; 선언되어 화면에 표시되지 않는 요소가 "Hidden"이라고 표시됩니다. 개발자가 자바스크립트 등을 이용하여 특정 동작을 수행할때만 화면에 표시하고 있는지도 모르죠.

결과 항목에서 가끔 취소선이 그어진 텍스트를 보실 수가 있는데요. 이런 텍스트는 display: none이 부여되어 웹 페이지에서 존재하지 않도록 해놓은 텍스트에요. 이는 웹 브라우저는 물론이고 스크린리더 같은 보조기기에서도 대부분 접근이 불가능하니 참고하세요!

항목을 한번 클릭해보실래요? 당신이 Google Chrome이나 북마클릿을 사용한다면 그 항목에 해당하는 요소에 초점을 맞춰줄거에요. 브라우저의 개발자 도구의 콘솔창을 활성화하신 상태라면 요소의 위치를 콘솔창에 표시합니다.

당신이 Firefox를 사용한다면 Firebug를 설치하신 후에 항목을 클릭해보세요. 그 항목에 해당하는 요소에 초점을 맞춰줌과 동시에 Firebug의 요소 검사 기능을 수행하여 Firebug 창에 표시해줄거에요. 아주 유용하다고 자부할만한 기능이에요. Firebug와 함께라면 숨어있는 요소의 위치도 쉽게 파악할 수 있답니다.

OpenWAX + Firebug라면? 우와!

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

<img>, <area>, <input type="image"> 요소의 alt 속성을 표시합니다. alt 속성이 빈 값으로 선언된 경우에는 내용을 alt=""으로, alt 속성이 빠진 경우에는 내용을 alt 미정의로 표시합니다.

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

CSS Background image가 지정된 요소의 텍스트 콘텐츠를 표시합니다. 이 지표에서는 의미를 갖고 있는 배경 이미지를 찾아서 그 의미가 텍스트 콘텐츠로도 제공되고 있는지를 확인하면 됩니다. 텍스트 콘텐츠가 근처의 요소에 제공되고 있을지도 모르니 오류라고 생각하기 전에 잘 찾아보시는 게 좋아요. 의미없는 이미지는 그냥 지나치세요!

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

이 지표에서는 페이지에 사용된 <object>, <embed>, <video>, <audio>, <canvas>, <svg> 요소를 표시합니다. 그냥 표시만 할뿐이니 표시된 요소의 대체 콘텐츠가 잘 제공되었는지, 키보드로는 잘 작동하는지 살펴보세요.

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

전경색과 배경색을 선택하면 명도 대비를 표시해주는 지표입니다. 전경색과 배경색에 따라 결과란에 명도 대비값이 표시됩니다.

Google Chrome용 명도 대비 도구는 페이지를 100%보다 크게 혹은 작게 확대 혹은 축소 했을 경우 색 선택이 원하는대로 잘 되지 않는 문제가 있어요. 빨리 해결하고 싶은 문제에요. 이 문제를 해결하여 github에 pull request를 해주신다면 제가 커피라도 대접해드릴게요!

북마클릿에서는 작동하지 않습니다. ㅠㅠ

8. 초점 이동

이 지표에서는 키보드 초점이 표시되지 않는 형태로 제작된 코드를 일부 찾아줍니다. blur() 함수를 호출하여 초점을 사라지게 만든 경우라든지, CSS의 outline 속성을 0으로 설정한 경우에 해당됩니다.

이 지표는 확실히 문제가 있는 경우만 진단하니 별 문제가 나오지 않았더라도 페이지에 초점 이동 문제가 있을 가능성은 남아있어요.

12. 건너뛰기 링크

페이지에 사용된 최초 10개의 해시 링크를 표시합니다. 건너뛰기 링크가 여러개 제공될 수 있으니 넉넉하게 10개를 표시하는거에요. 여기서는 첫 항목부터 건너뛰기 링크가 나오는지, 건너뛰기 링크가 1번째 링크부터 시작하는지 확인하시면 되요. 건너뛰기 링크는 페이지의 시작점에 있어야 하니 1번째 링크여야 하니까요.

건너뛰기 링크가 제대로 제공된 것 같다면 그 다음엔 키보드로도 초점이 가는지 직접 페이지에 테스트를 해보시면 끝나겠죠?

13. 제목 제공(<title>)

모든 대상 페이지에 사용된 제목(<title>)을 표시합니다.

제목이 제공되지 않았거나 특수문자가 반복된 경우 오류항목으로 표시됩니다.

13. 제목 제공(frame)

대상 페이지에 포함된 모든 프레임(<frame>, <iframe>)의 title 속성을 표시합니다.

프레임 제목이 제공되지 않은 경우 오류항목으로 표시됩니다.

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

모든 대상 페이지에 사용된 헤딩 태그(<h1> ~ <h6>)를 표시합니다.

14. 적절한 링크 텍스트

<a>, <area> 요소의 텍스트를 표시합니다.

15. 기본 언어 표시

모든 대상 페이지의 <html> 태그에 선언된 lang, xml:lang 속성을 표시합니다. lang, xml:lang이 선언되어 있지 않으면 오류항목으로 표시됩니다.

HTML 계열의 Doctype 페이지는 lang 속성이 없으면 오류항목으로 표시됩니다.

XHTML 1.0 Transitional Doctype 페이지는 lang 속성만 있고 xml:lang 속성이 없는 경우와 그 반대의 경우 의심항목으로 표시됩니다.

그 외의 XHTML Doctype 페이지는 xml:lang 속성이 없으면 오류항목으로 표시됩니다.

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

이 지표에서는 onclick 이벤트 핸들러 자바스크립트 코드에 window.open이 포함된 경우 및 onchange 이벤트 핸들러가 선언된 요소를 표시합니다.

이 지표에서 표시되는 항목들은 사용자 요구에 따른 실행 지표의 오류가 발생될 수 있는 일부 항목을 표시합니다. 우선 표시되는 항목 중에 오류가 있는지 보시고, 오류가 발견되지 않았다면 여기서 표시되지 않은 콘텐츠 중 오류가 있지는 않은지 추가적으로 점검해야 합니다.

18. 표의 구성(caption, summary)

<table> 요소의 <caption>과 summary가 표시됩니다.

<caption>이 제공되었으나 제목 셀(<th>)이 하나도 없으면 오류로 표시됩니다. 제목 셀이 필요없는 테이블은 배치용 테이블이니 <caption>을 제공하지 않아야 합니다.

반대로 제목 셀(<th>)이 제공되었음에도 <caption>이 제공되지 않은 경우에도 오류로 표시됩니다.

배치용 테이블은 의심항목으로 표시됩니다. 배치용 테이블은 지양하자는 의미를 담고있죠.

18. 표의 구성(th)

18. 표의 구성(caption, summary)과 같은 조건으로 오류 및 의심항목을 표시합니다.

추가로, scope 속성이 부여되지 않은 <th>가 존재하는 경우도 의심항목으로 표시합니다.

19. 레이블 제공

레이블이 필요한 모든 입력 서식과 연결된 <label>과 title 속성을 표시합니다.

<label>이 모두 제공되지 않았다면 오류항목으로, title 속성만 제공되었다면 의심항목으로 표시됩니다.

표시되는 입력 서식은 <input type="hidden">, <input type="submit">, <input type="reset">, <input type="button">, <input type="image">을 제외한 모든 <input> 및 <textarea>, <select>입니다.

21. 마크업 오류 방지

W3C Validation Service의 HTML 유효성 검사 결과 중 접근성 오류를 일으킬 수 있는 항목들을 표시합니다.

OpenWAX가 HTML 유효성 검사 결과 중 접근성 오류를 일으킬 수 있는 항목으로 판단하는 목록은 다음과 같습니다.

  • document type does not allow element * here; missing one of * start-tag.
  • end tag for * which is not finished*
  • end tag for element * which is not open*
  • ID * already defined.
  • unclosed start-tag requires SHORTTAG YES *
  • unclosed end-tag requires SHORTTAG YES *
  • empty start-tag *
  • empty end-tag *

License

OpenWAX is on MIT license.