[Chrome/openWax/웹접근성검사]openWax로 웹접근성 검사 해보기

배포대기 중인 프로젝트에서

웹 접근성 검사를 맡아서 했다.

웹 접근성은 어떻게 검사해야하는지 정보가 잘 안나와있어서

검사사이트를 사용해야 하는건지, 체크리스트를 사용해야 하는 건지

잘 몰랐었는데

대부분이 chrome에서 제공해주는 openWax란 도구를 사용한다고 한다.

openWax란 chorme의 확장 프로그램인데

한 페이지씩 100점 만점으로 접근성에 대한 점수를 매겨준다.

웹 접근성 검사에서 통과하려면 90점을 넘겨야 한다.

내 자리는 이미 다운 받아져 있어서 따로 설치할 필요가 없었다.

openWax

주소창 오른쪽 끝을 보면 초록 사다리 모양이 있는데 이 버튼을 클릭하면

openWax

이런 화면이 뜨는 데

왼쪽 상단을 보면 내 블로그는 85.2점으로 적절한 접근성을 갖추고있지 않다.

밑에 항목들 중 빨간 칸으로 된 부분을 고쳐준다면 금방 100점이 됐었다.

openWax 레이블 제공

테스트를 해보면서 레이블 제공 쪽에서 가장 많이 점수가 떨어졌었는데

이러한 경우

title을 지정해주면 된다.

.attr("title","타이틀")로 지정해주거나

<input id="id" title="타이틀"/>로 고쳐주면 점수는 금방 오를 것이다

또한 hidden으로 된 input은 코드상으로 찾기 힘들때도 있는데 이럴때는

코드 마지막에

$(document).ajaxStop(function(){
       $("input").attr("title","input");
   });

추가해주면 점수가 오를 수 있다.