Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 접근성 지원 프로그래밍 지침 >
키보드의 이용
키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.
국가표준 항목 2.4에 따르면, 웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 웹 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다. 예를 들어 마우스를 사용할 수 없는 장애인들도 마우스를 사용할 수 있는 사용자와 같이 키보드만으로 웹 콘텐츠가 제공하는 모든 기능을 동일하게 수행할 수 있어야 한다. 이 검사항목은 웹 브라우저의 이용 뿐 아니라 웹 콘텐츠가 제공하는 기능을 이용하는 경우에도 해당된다.
(1) 스크립트가 사용하는 이벤트 핸들러는 접근성을 보장하여야 한다.
(2) 버튼에는 단축키를 제공하여 접근성을 높인다.
가) 접근성 지원 이벤트 핸들러 모든 컨트롤은 마우스를 통해 작동될 뿐 아니라 키보드를 통해 접근할 수 있어야 한다. 이것은 화면 낭독 프로그램 사용자 뿐 아니라 마우스를 사용할 수 없는 사용자도 배려하기 위함이다.
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)하기 위한 이벤트로는 사용하지 않는 것이 좋다.
나) 드래그 앤 드롭(Drag and Drop) 드래그 앤 드롭(drag-and-drop) 이벤트는 마우스를 사용하는 것을 전제로 제공한다. 그런데 전맹, 일부 저시력자, 지체장애인들은 마우스의 사용이 어렵다. 따라서 드래그 앤 드롭 기능은 키보드만으로도 사용할 수 있도록 하여야 한다. 예를 들어 온라인 쇼핑몰에서 쇼핑 카트에 상품을 드래그(drag)하는 과정을 Enter 키를 이용하도록 하는 것과 같다.
그 한 가지 방법은 링크를 이용하는 방법이다. 즉 상품 이미지에 링크를 제공하여 해당 상품 이미지에 대한 대체 텍스트를 읽어주는 동안 Enter 키를 치면 해당 상품이 쇼핑 카트에 담기도록 하는 것이다. 이것이 가능한 이유는 링크 컴포넌트가 키보드 접근을 지원하며, 이미지를 아이콘과 같이 표시할 수 있기 때문이다. 또한 이 링크에 추가적인 이벤트를 할당하여 이벤트가 발생하면 이 상품을 쇼핑 카트로 이동하게 한다.
본격적인 드래그 앤 드롭의 대체 수단은 이 문서의 부록에 수록한 WAI-ARIA 적용사례의 드래그 앤 드롭에 대한 설명을 참고하라.
다) 단축키 설정 다수의 컨트롤이 필요한 복잡한 애플리케이션 콘텐츠는 단축키를 이용하여 사용하도록 하는 것이 좋다. 일부 사용자에게는 하나의 키를 조작하는 것도 많은 노력을 필요로 한다. 따라서 가능한 한 이벤트를 발생시키기 위하여 누르는 키의 수를 줄일 수 있는 단축키를 제공하는 것이 바람직하다.
예를 들어 도움말 화면으로의 빠른 전환을 제공하기 위해 단축키로 '?' 키를 사용할 수 있다. 이것은 사용자들이 '?' 키를 누를 때마다 도움말 화면으로 이동시킨다. 이러한 기능을 수행하기 위해서는 HTML 코드는 다음과 같이 작성한다.
<input type="button" value="도움말" onclick="window.open(http://./help.htm);"
onkeypress="verifyKey(this,event);"/>
아래의 JavaScript 코드는 단축키를 '?'로 정의하고, 키보드에서 '?'를 누르면 도움말 버튼을 누른 것과 같은 효과를 제공한다.
// With onkeypress event, this verifies "?" key
function verifyKey(oElement,oEvent){
if(oEvent.keyCode==63 && oElement.onclick){ // '?' = 63
oElement.onclick();
}
}
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)