웹페이지 접근성 검사 방법, K-WAH, 웹접근성연구소

 

웹 프로젝트의 필수 조건 중의 하나가 호환성과 접근성이다.

오늘은 이 둘중에 접근성(Accessibility)에 대해 알아보겠다.

 

웹 접근성이란 것은 장애인과 비장애인이 동등하게 웹 콘텐츠에 접근할 수 있도록 웹 콘텐츠를 접근 하는 방법이다.

 

보다 자세한 내용은 웹접근성연구소나 국내 큰 포털사이트에서 확인이 가능하다.

 

해당 내용에는 대체택스트(alt tag), 동영상 자막제공, 마크업오류, 색에 무관하게 인식할수 있는 색상 사용 등이 있다.

이중에 개발자의 입장에서 취할수 있는 접근성 검사 방법에 대해 소개하겠다.

 

국내에서는 웹접근성 연구소란 곳에서 K-WAH라는 웹 접근성 검사 도구를 제공하고 있다.

이는 아래의 Link를 통해 다운이 가능하다.

 

Link : 웹 접근성 연구소

 

다운받은 K-WAH를 실행하면 아래와 같은 화면이 실행된다.

 

 

상단 메뉴의 신규 버튼을 클릭하면 자동 점검 설정 창이 나타난다.

 

 

 

프로젝트의 이름을 설정하고 URL로 점검할 것 인지, 파일로 점검할지를 선택한다.

필자는 파일로 선택하는 방법에 대해 설명하겠다.

 

파일평가를 선택하고 '찾기' 버튼을 클릭하면 폴더를 찾는 팝업창이 나오면 점검팔 페이지의 파일이 있는 폴더를 선택한다.

 

 

폴더 선택 후 '시작' 버튼을 클릭한다.

 

 

점검이 완료되면 '확인' 버튼을 클릭한다.

그럼 해당 폴더내의 파일의 오류 현황이 출력된다.

 

 

좌측의 트리에서는 점검항목별 오류가 있는 페이지가 표출되고

가운데는 현황

오른쪽에는 해당 페이지의 소스를 확인 할 수 있다.

 

레이블과 마크업 문법...양이 상당하다.

개발을 하면서 크게 신경을 안쓰는 부분이 레이블 태그이다.

 

 

<label> 태그는 input 태그에 대한 표식, 라벨 이라고 생각하면 된다.

이것을 사용하는 이유는 마우스를 사용하는 사용자의 편의성 제공을 위해서 이다.

 

예를 들어 라디오 버튼을 사용할 경우

<input type="radio" name="gender" id="male" value="01">남성
<input type="radio" name="gender" id="female" value="02">여성

 

위와 같이 레이블태그를 사용하지 않을 경우

 

 

남성이란 글씨를 클릭했을 경우 위와 같이 영역설정만 된다.

 

하지만 아래와 같이 레이블 태그를 사용하게 되면

 

<input type="radio" name="gender" id="male" value="01"><label for="male" class="label">남성</label>
<input type="radio" name="gender" id="female" value="02"><label for="female" class="label">여성</label>

 

 

글씨를 클릭했을 경우 해당 라디오 버튼이 선택된다.

온전히 사용자의 편의성을 위해 사용하는 것이다.

 

여기서 주의해야 될 점은 <label> 태그의 for 속성과 라디오버튼의 id를 일치시켜야 한다는 점이다.

 

솔직히 내 생각엔 input text 같은 경우는 <label>태그를 달 이유가 없다고 보는데.

일단 점검 항목에 뜨니 상단에 하나씩 붙여놓는다.

ex)

<label for="searchKeyword"></label>
<input type="text" id="searchKeyword" name="searchKeyword">

 

<table>에 <caption> 추가나 이미지에 <alt> 태그 추가 등,

나머지 타이틀이 빠진것은 넣으면 되고

열고 닫음이 빠진것이나

id중복, 속성이름 중복 같은 경우에는 오류에 맞게 수정해 주면 된다.

 

참조 : 한국형 웹 콘텐츠 접근성 지침 2.1, 웹 접근성 연구소