실무에서 웹접근성 마크 획득시 주의사항

 

1. input 태그 사용시 유의점

- input[type="text"] 일 경우 label 태그가 있는 경우가 많습니다.

 

예를 들어 로그인 fieldset에서 아이디나 비밀번호 입력 하는 영역이 대표적이겠죠...

 

이럴 경우 마크업은

<label for="userID">ID</label>

<input type="text" id="userID"/>

이런식으로 되어야 합니다. label의 for라는 attribute값과 매칭되어야 할 input 태그의 id값을 일치 시켜 주셔야 합니다. 만약 label이 없는 경우의 input 요소라면, input 태그안에 title이라는 attribute값을 지정해서 현재의 input 태그가 어떤 값을 입력해야 하는지를 명시 해 주셔야 합니다.

2. 이벤트 발생 태그가 아닌 태그에 이벤트를 발생 시 유의점

- a태그,input태그,button태그처럼 브라우져에서 기본적으로 제공하는 이벤트 핸들러가 아닌 span이나 div태그에 링크를 넣거나 이벤트를 발생 시킬 경우가 간혹 있습니다.

이럴 경우 반드시 후속 처리를 해 주셔야 합니다. 눈으로 볼 수 있는 사용자들에게는 style로 cursor:pointer라는 값을 주는것은 많은 분들이 아시고 계실 것입니다.

그러나 마우스를 사용 할 수 없으신 분들을 위하여 기본적인 이벤트 핸들러 기능을 추가 해 주셔야만 합니다.

 

대표적인게 해당 tag element에 tabindex="0" 이라는 attribute를 선언해 주셔야 합니다.

탭으로 이동시 해당 영역이 잡히기 때문이죠... 이 기능은 textarea를 작성하시거나 일정 block 요소 영역에 scroll-y:auto 같은 기능을 사용하실 때도 반드시 넣어 주셔야 합니다.

 

그리고 onclick 이벤트 이외에 keypress 발생 이벤트에 대한 언급도 필요 하겠죠.

aria-role="button" 작성도 필요 합니다. 자세한 내용은 구글의 힘을 빌리세요~

 

3. 페이지 자동 전환, 자동 sorting 등 사용자가 확인하기 전까지의 페이지 이동이나 컨텐츠 동기화는 금물입니다.

 

- 게시판 링크 같은 경우 "10개씩보기", "20개씩보기" 같은 기능을 제공해 주는 경우가 있습니다.

이런 경우 반드시 select 태그 다음에 submit 해 주는 버튼이 필요 합니다. 실수로 선택한 내용에 따라 페이지 이동이나 컨텐츠 동기화는 접근성에 위배 되므로... 기획단계나 디자인 단계에서 빠져 있다면 반드시 수정 요구를 하셔서 기능 구현을 하도록 하셔야 합니다.

로그인이 필요한 페이지도 마찬가지 입니다. 특정 페이지에 진입 하려면 보통 "로그인이 반드시 필요합니다."라는 경고창과 함께 사용자의 의지와는 상관없이 경고창을 닫으면 "로그인"페이지로 이동해 버리는 경우가 많죠... 반드시 사용자의 의지를 확인해야 합니다.

 

4.table 태그 사용 시 유의점

 

- table 태그 사용의 경우에는 Doctype 을 유심히 살피셔야 합니다. HTML5로 선언된 경우 summary라는 attribute는 사용하셔서는 안됩니다. 없어졌거든요. 하지만 xhtml1.0 이나 html4로 선언된 경우 반드시 해당 테이블의 전반적인 값을 알려주는 summary라는 attribute가 table태그안에 있어야 합니다.

그리고 caption태그는 반드시 필요하므로 놓치지 마시기 바랍니다.

 

값의 통계자료 같은 table 작성 시에는 thead > tfoot> tbody 순으로 작성해 주셔야 합니다.

 

th태그는 반드시 필요한 항목이며, th가 들어가지 않는 table은 굳이 table로 작성하지 마시기 바랍니다.

th태그에는 반드시 scope라는 attribute가 필요하며 해당 제목의 값에 해당하는 td들이 가로방향으로 열거된 경우 scope="row" 라고 명시해 줘야 하며, 세로로 열거된 경우 scope="col"이라고 명시해 주셔야 합니다.

 

5. img 태그 longdesc attribute작성시

 

- img를 이용하여 컨텐츠를 제공 하실 때 내용물의 설명이 alt태그안에 간략히 설명할 수 없는 수준일 경우 longdesc라는 attribute를 작성하고 있습니다만... 제가 실무를 할때 시각장애인을 위한 웹 브라우져 음성지원 프로그램중 인식하지 못 하는 경우도 있고... longdesc에 연결되는 파일 경로가 절대경로로 되어있어야 작동 되는 경우도 있었습니다. 고로 만인을 위한 웹을 제공하자는 웹접근성 취지에 맞지 않는다는 판단에 longdesc는 사용하지 않는게 좋을 것 같습니다.

 

대신 IR 기법이라는걸 사용하시기 바랍니다. 자세한 설명은 구글링을 통하시면 많이 나와 있습니다.

 

6. javascript 작성 시 이벤트 중복 선언

 

- javascript 작성 시 유념하실 부분은 이벤트를 발생 시킬 경우 마우스 이벤트와 함께 키보드 이벤트도 선언해 주시길 바랍니다. JQuery 라이브러리 사용 시 아래 코드 예시로 보시기 바랍니다.

 

<script>

$('.button').bind('click keypress',function(){

  alert('hello World!');

});

</script>

대표적인 click 이벤트만 언급 했지만, 

mouseover + focus

mouseout + blur

mousedown + keydown

mouseup + keyup

처럼 bind함수를 이용하여 이벤트들을 묶어서 사용 해 주시길 바랍니다.

웹접근성과 시멘틱 마크업은 그다지 관계가 없습니다.

 

 

[출처] 웹접근성 중요 체크사항|작성자 유준아빠

http://blog.naver.com/slalom92/220736072345