키보드 접근성

출처 : http://www.wah.or.kr/RIA/Js/js_guide02.asp
가) 접근성 지원 이벤트 핸들러모든 컨트롤은 마우스를 통해 작동될 뿐 아니라 키보드를 통해 접근할 수 있어야 한다. 이것은 화면 낭독 프로그램 사용자 뿐 아니라 마우스를 사용할 수 없는 사용자도 배려하기 위함이다.

JavaScript에서 접근성을 지원하는 마우스 이벤트와 이에 대응되는 키보드 이벤트는 아래 표와 같다.

마우스 이벤트	대응되는 키보드 이벤트
onmouseover	onfocus ()
onmouseout	onblur ()
onmousedown	onkeydown ()
onmouseup	onkeyup ()
onclick	onkeypress ()

onmouseover와 onmouseout 이벤트는 이미지 위에 마우스포인터를 위치시키거나 빠져나갈 때 발생한다. 그러나 이미지 롤오버(image rollover)에 키보드 이벤트 onfocus와 onblur 이벤트를 사용하더라도 화면 낭독 프로그램으로는 아무런 도움이 되지 못한다. 또한 CSS를 사용하여 롤오버 기능을 구현하는 경우에 CSS 이미지 치환 기술은 접근성을 지원하지 않는다. 그러나 텍스트의 치환시에는 문제가 없다.

일부 DHTML의 경우에 onkeypress 대신에 onkeydown과 onkeyup 이벤트를 사용할 수 있다. 예를 들어 화살표 키(arrow key)는 onkeypress 이벤트를 제대로 활성화 시키지 못한다. 그러나 onkeydown과 onkeyup 이벤트는 항상 활성화 된다. 여기서 노트북에는 화살표 키가 없으므로 화살표 키를 꼭 사용할 것인가를 생각해 보아야 한다. 화살표 키를 사용하기 위해서는 반드시 다른 키(기능 확장키)를 눌러야 하므로 이미 키보드이벤트가 발생하기 때문이다. 뿐만 아니라 화면 낭독 프로그램이 이러한 형식의 인터페이스를 지원하는 것도 매우 어려운 일이다.

대부분의 브라우저는 Enter 키를 누를 때 onclick 이벤트를 활성화시킨다. 그러나 일부 브라우저는 이를 지원하지 않는다. 따라서 Enter 키를 지원하기 위해서는 onclick 이벤트 보다는 onkeypress 이벤트를 사용하는 것이 좋다.

이벤트 핸들러를 사용할 경우에는 프로그램의 접근성 지원 여부를 세심하게 관찰하여야 한다. 예를 들어 onchange 이벤트는 입력 데이터의 형식을 수정하는 것과 같은 소소한 경우에는 사용할 수 있으나, Form(form)을 제출(submit)하기 위한 이벤트로는 사용하지 않는 것이 좋다.